Three.js零基础入门指南及案例代码分享
Three.js 是一个非常流行的 JavaScript 库，用于在 Web 上创建 3D 图形。如果你是零基础入门，下面是一个简单的指南和案例代码，帮助你快速上手。
一、环境准备
设置开发环境：
- 安装一个文本编辑器，例如 VS Code。
- 确保你的电脑有一个现代的网络浏览器，例如 Chrome 或 Firefox。
引入 Three.js：
- 你可以通过 CDN 的方式加载 Three.js：
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> - 也可以使用 npm 安装并在项目中引入：
npm install three
- 你可以通过 CDN 的方式加载 Three.js：
二、基础结构
要开始使用 Three.js，你需要创建一个基本的场景，包括场景（Scene）、相机（Camera）和渲染器（Renderer）。
三、简单案例代码
下面是一个简单的 Three.js 程序示例，它在网页上显示一个旋转的立方体。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Three.js Example</title><style>body { margin: 0; }canvas { display: block; }</style></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script>// 创建场景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);// 创建立方体const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({color: 0x00ff00});const cube = new THREE.Mesh(geometry, material);scene.add(cube);// 动画函数function animate() {requestAnimationFrame(animate);// 旋转立方体cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染场景renderer.render(scene, camera);};// 调用动画函数animate();</script></body></html>
四、关键步骤详解
创建场景（Scene）：
- 使用
THREE.Scene()创建一个场景对象，所有的 3D 对象都会添加到这个场景里。
- 使用
设置相机（Camera）：
THREE.PerspectiveCamera(fov, aspect, near, far)用于创建透视相机。fov表示视场角，aspect为宽高比，near和far则定义了渲染的最近和最远距离。
创建渲染器（Renderer）：
THREE.WebGLRenderer()创建一个 WebGL 渲染器，并设置其尺寸为全屏。
添加几何体和材质：
THREE.BoxGeometry()用于创建一个立方体的几何体。THREE.MeshBasicMaterial({color: 0x00ff00})设置立方体的材质颜色。
动画循环：
- 使用
requestAnimationFrame创建一个动画循环，每帧都渲染场景并更新立方体的旋转。
- 使用
五、更多学习资源
- Three.js 文档：官方文档提供了详尽的 API 说明。
- Three.js 示例：许多示例帮助你理解各种复杂功能。
- 社区和论坛：在社区中与其他开发者交流经验。
通过这个基础示例，你已经初步掌握了 Three.js 的使用方法。接下来，你可以尝试加入灯光、纹理和更多复杂的 3D 对象，进一步提高你的技能。