在这篇文章中，我们将学习如何使用 Three.js 创建基于 WebGL 的场景和特效。WebGL 是一种在浏览器中渲染 3D 图形的技术，而 Three.js 是一个用于简化 WebGL 开发的 JavaScript 库。使用 Three.js，我们可以轻松地创建出令人惊叹的 3D 场景和特效。
准备工作
在开始之前，我们需要确保以下几点：
- 了解基本的 HTML、CSS 和 JavaScript 语法。
- 拥有一个支持 WebGL 的浏览器，例如 Google Chrome 或 Mozilla Firefox。
安装 Three.js
首先，我们需要将 Three.js 引入到我们的项目中。你可以从 Three.js 官方网站 上下载最新的版本，或使用以下 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/three@0.132.0/build/three.min.js"></script>
创建一个基本的 WebGL 场景
现在我们可以开始创建我们的 WebGL 场景了。首先，我们需要在 HTML 文件中创建一个用于显示 WebGL 场景的容器。我们可以使用一个简单的 <div> 元素，并为其指定一个 ID：
<div id="canvas"></div>
接下来，我们将在 JavaScript 文件中创建我们的 Three.js 场景。首先，我们需要获取对容器的引用：
const canvas = document.getElementById('canvas');
然后，我们可以使用 Three.js 创建一个场景、相机和渲染器：
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
注意到我们使用了透视相机 (PerspectiveCamera)，这是常用的用于创建真实感觉的 3D 场景的一种相机类型。
现在，我们需要设置渲染器的大小并将其附加到容器中：
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
canvas.appendChild(renderer.domElement);
最后，我们可以开始渲染场景。我们将创建一个函数 animate 用于更新场景并进行连续渲染：
function animate() {
requestAnimationFrame(animate);
// 在这里更新场景
// ...
renderer.render(scene, camera);
}
animate();
现在，我们的基本 WebGL 场景已经搭建完成了！
创建一个 3D 对象
接下来，让我们尝试创建一个 3D 对象并将其添加到场景中。
首先，我们需要创建一个几何体 (Geometry) 来定义我们的对象的形状。在这里，我们将使用 BoxGeometry 来创建一个立方体：
const geometry = new THREE.BoxGeometry();
然后，我们需要为对象创建一个材质 (Material) 来定义其外观。我们将使用 MeshBasicMaterial 来创建一个基础材质：
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
接下来，我们用几何体和材质创建一个网格 (Mesh) 对象，并将其添加到场景中：
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
最后，我们需要在 animate 函数中对对象进行更新。我们可以旋转对象或改变其位置：
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
现在，我们已经成功地创建并渲染了一个带有动画效果的 3D 对象！
添加光照效果
要给我们的场景添加更真实的光照效果，我们需要创建一个光源 (Light) 并将其添加到场景中。
首先，我们将创建一个点光源 (PointLight)：
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);
scene.add(light);
然后，我们需要更改材质，以便对象能够反射光源。我们将使用 MeshPhongMaterial 来创建一个光滑的材质：
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
最后，我们需要将光源的位置更新到相机的位置，以便光源始终面向相机：
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
light.position.copy(camera.position);
renderer.render(scene, camera);
}
animate();
现在，我们的场景应该具有更真实的光照效果了！
创建更复杂的特效
使用 Three.js，我们可以通过在场景中添加更多的对象和特效来实现更复杂的场景。
例如，我们可以给场景添加一个环境光源 (AmbientLight) 来增加整体的亮度：
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
我们还可以在场景中添加其他形状的几何体，如球 (SphereGeometry)、圆柱体 (CylinderGeometry) 等，并对其进行变换、添加纹理等操作。
const sphereGeometry = new THREE.SphereGeometry();
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(2, 0, 0);
scene.add(sphere);
我们还可以使用 Three.js 提供的控制器来允许用户与我们的场景进行交互，如 OrbitControls、TrackballControls 等。
以上只是一些 Three.js 提供的基础特性和技巧，你可以根据自己的需求和创造力来创建更多复杂、令人惊叹的特效和场景。
希望这篇文章能帮助你入门 Three.js，并在 WEBGL 中创建令人惊叹的场景和特效！
本文来自极简博客，作者：破碎星辰，转载请注明原文链接：使用 Three.js 创建 WebGL 场景与特效
