简介
Three.js 是一个用于创建并展示 3D 图形的 JavaScript 库。它提供了一个简便的方法，通过在浏览器中使用 WebGL 渲染引擎进行图形编程。
在本博客中，我们将探讨如何使用 Three.js 创建一个基本的 3D 网页交互效果，并介绍一些 Three.js 提供的功能。
准备工作
首先，在开始之前，确保你已经在你的项目中包含了 Three.js 的库文件。你可以从官方网站（https://threejs.org/）下载 Three.js，或者通过 CDN 进行引用。
在项目中引入 Three.js 的最简单方法是通过 <script> 标签将其包含在 HTML 文件中。
<script src="path/to/three.js"></script>
创建一个3D场景
首先，我们需要一个渲染器和一个场景来呈现 3D 图形。创建一个 <div> 元素作为渲染容器，并在 JavaScript 中获取该元素的引用。
<div id="container"></div>
// 获取渲染容器的引用
const container = document.querySelector('#container');
然后，我们需要创建一个渲染器，并将其附加到渲染容器中。
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到渲染容器中
container.appendChild(renderer.domElement);
接下来，我们创建一个场景。
// 创建场景
const scene = new THREE.Scene();
// 设置场景的背景颜色
scene.background = new THREE.Color(0xeeeeee);
现在，我们已经准备好了一个基本的 3D 场景。
添加3D对象
在 Three.js 中，我们可以添加各种不同类型的 3D 对象，例如几何体、灯光和相机。
让我们首先创建一个几何体。Three.js 提供了许多预定义的几何体，例如立方体、球体和圆柱体。
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建网格对象
const cube = new THREE.Mesh(geometry, material);
// 将立方体添加到场景中
scene.add(cube);
我们还可以创建一个灯光来提供环境光照明。
// 创建环境光
const ambientLight = new THREE.AmbientLight(0x404040);
// 将环境光添加到场景中
scene.add(ambientLight);
最后，我们需要创建一个相机来观察场景。
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 设置相机的位置
camera.position.z = 5;
现在，我们已经添加了一个立方体、一个环境光和一个相机到场景中。
渲染场景
最后，我们需要在每一帧中更新并渲染场景。
function animate() {
// 更新立方体的旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 重新渲染场景
renderer.render(scene, camera);
// 在下一帧中调用 animate 函数
requestAnimationFrame(animate);
}
// 启动动画
animate();
以上代码中的 animate 函数将在每一帧中被调用，并更新立方体的旋转。然后，我们使用渲染器来渲染更新后的场景，并在下一帧中递归调用 animate 函数。
现在，你可以在浏览器中看到一个旋转的立方体，这是通过 Three.js 创建的一个简单的 3D 网页交互效果。
结论
Three.js 是一个功能强大且易于使用的 JavaScript 库，可以帮助我们在 web 网页中创建具有吸引力的 3D 图形和交互效果。本博客介绍了如何使用 Three.js 创建一个基本的 3D 网页交互效果，并演示了如何添加几何体、灯光和相机到场景中，以及如何在每一帧中更新和渲染场景。
你可以通过探索 Three.js 的文档和示例来进一步学习和探索 Three.js 的功能和特性。祝你愉快地构建令人惊叹的 3D 网页交互效果！
本文来自极简博客，作者：深海探险家，转载请注明原文链接：使用Three.js创建3D网页交互效果
