Three.js 是一个流行的 JavaScript 库，用于在 WebGL 上下文中渲染 3D 场景。它为开发者提供了创建交互式 3D 对象的简单方法，并允许他们利用 HTML5 的 canvas 元素来渲染三维图形。以下是使用 Three.js 构建交互式移动应用的基本指南：
1. 安装和引入 Three.js
首先，你需要在你的项目中安装 Three.js。可以通过 npm（Node.js 包管理器）或直接下载源码进行安装。
```bash
npm install three
```
或者
```bash
git clone https://github.com/mrdoob/three.js.git
```
然后，在你的 HTML 文件中引入 Three.js 库：
```html
```
2. 创建场景、相机和渲染器
```javascript
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个具有透视效果的摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建一个渲染器以显示场景
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
```
3. 添加光源和材质
为了给场景添加光源，我们需要一个光源对象，如 `pointLight`、`directionalLight` 或 `ambientLight`。例如，你可以创建一个点光源来照亮场景：
```javascript
const pointLight = new THREE.PointLight(0xffffff, 1, 1000);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);
```
4. 添加几何体（如立方体）和纹理贴图
要向场景中添加几何体，你可以使用 `THREE.Mesh` 类。例如，创建一个立方体：
```javascript
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 红色材质
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
```
5. 动画和物理模拟
Three.js 支持多种动画类型，包括刚体、软体、布料等。要实现动画，你需要创建一个动画循环，并在其中调用 `renderer.render()` 方法。例如，创建一个旋转立方体的动画：
```javascript
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
renderer.render(scene, camera);
}
animate();
```
6. 交互式功能
Three.js 提供了许多交互式功能，例如点击、拖拽、键盘事件等。你可以使用 `THREE.PointerLock` 类来锁定鼠标指针，以便用户可以直接与模型互动。例如，创建一个可以拖动的立方体：
```javascript
const pointerLock = new THREE.PointerLock();
pointerLock.lock();
const cube = new THREE.Mesh(geometry, material);
cube.position.y = 1; // 初始位置
cube.addEventListener('click', function() {
if (pointerLock.isLocked) {
cube.position.y = -1; // 下落
pointerLock.unlock(); // 解锁鼠标指针
} else {
cube.position.y = 1; // 上升
pointerLock.lock(); // 锁定鼠标指针
}
});
```
7. 优化性能和资源管理
为了提高性能，你应该尽可能地减少不必要的计算和绘制。例如，你可以考虑将多个几何体组合成一个更大的几何体，或者使用更高效的着色器语言。同时，合理地管理资源，例如关闭不需要的光源和几何体，以及释放不再使用的纹理资源。
8. 测试和调试
最后，不要忘记测试你的应用，确保所有的交互都按预期工作。使用浏览器的开发者工具来查看渲染输出，并检查是否有任何错误或警告。
以上就是使用 Three.js 开发交互式移动应用的基本指南。随着你对 Three.js 的深入理解，你可以探索更多的高级功能和应用。
