Three.js 进阶之旅：基础入门（下）
2023-10-28 07:11:36
续接上文
在上一篇文章中，我们已经完成了一个简单的 Three.js 3D 页面，其中包含一个球体和一个立方体。我们还了解了如何使用 Three.js 的基本 API 来创建场景、网格和材质。在本文中，我们将继续深入 Three.js，学习更高级的知识，例如如何添加纹理、灯光、阴影和相机。
继续深入 Three.js
1. OrbitControls
OrbitControls 是一个 Three.js 的插件，它可以让你轻松地控制摄像机的位置和旋转。它非常适合用于创建交互式 3D 场景。要使用 OrbitControls，首先你需要将其安装到你的项目中。你可以通过 npm 或 yarn 来安装它：
npm install three-orbitcontrols
yarn add three-orbitcontrols
安装完成后，你就可以在你的代码中使用 OrbitControls 了。首先，你需要创建一个新的 OrbitControls 实例：
const controls = new OrbitControls(camera, renderer.domElement);
然后，你需要将 controls 添加到你的场景中：
scene.add(controls);
最后，你需要在你的渲染循环中更新 controls：
controls.update();
2. 纹理贴图
纹理贴图可以用来给你的 3D 模型添加更多的细节。要使用纹理贴图，首先你需要创建一个新的纹理对象：
const texture = new THREE.TextureLoader().load('path/to/texture.png');
然后，你需要将纹理对象应用到你的材质上：
const material = new THREE.MeshBasicMaterial({ map: texture });
最后，你需要将材质应用到你的网格上：
const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
3. 着色器
着色器可以用来创建更复杂的材质。要使用着色器，首先你需要创建一个新的着色器对象：
const vertexShader = `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * position;
}
`;
const fragmentShader = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
然后，你需要将着色器对象应用到你的材质上：
const material = new THREE.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader
});
最后，你需要将材质应用到你的网格上：
const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
4. 点光源和聚光灯
点光源和聚光灯可以用来给你的场景添加灯光。要使用点光源，首先你需要创建一个新的点光源对象：
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
然后，你需要将点光源对象添加到你的场景中：
scene.add(pointLight);
要使用聚光灯，首先你需要创建一个新的聚光灯对象：
const spotLight = new THREE.SpotLight(0xffffff, 1, 100);
然后，你需要将聚光灯对象添加到你的场景中：
scene.add(spotLight);
5. 阴影
阴影可以用来给你的场景添加更多的真实感。要使用阴影，首先你需要创建一个新的阴影贴图对象：
const shadowMap = new THREE.WebGLRenderTarget(1024, 1024);
然后，你需要创建一个新的阴影材质对象：
const shadowMaterial = new THREE.ShadowMaterial();
最后，你需要将阴影材质对象应用到你的网格上：
mesh.material = shadowMaterial;
6. 相机
相机用于控制你看到场景的角度。要使用相机，首先你需要创建一个新的相机对象：
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
然后，你需要将相机对象添加到你的场景中：
scene.add(camera);
7. 动画
动画可以用来让你的场景动起来。要使用动画，首先你需要创建一个新的动画器对象：
const animator = new THREE.AnimationMixer(scene);
然后，你需要创建一个新的动画动作对象：
const animationAction = animator.clipAction(clip);
最后，你需要播放动画动作对象：
animationAction.play();
8. 交互
交互可以用来让你的用户与你的场景进行互动。要使用交互，首先你需要创建一个新的事件侦听器对象：
const listener = new THREE.EventListener();
然后，你需要将事件侦听器对象添加到你的场景中：
scene.addEventListener('click', listener);
最后，你需要在你的事件侦听器对象中定义一个回调函数：
listener.on('click', function(event) {
console.log('The scene was clicked!');
});
结语
在本系列文章的两部分中，我们已经详细介绍了 Three.js 的基本知识，包括场景、网格、材质、灯光、阴影、相机、动画和交互。这些知识足以让你创建简单的 Three.js 3D 页面了。如果你想学习更多关于 Three.js 的知识，你可以参考官方文档或其他在线教程。
