在当今的数字时代，3D图形和动画在网页设计、游戏开发、虚拟现实（VR）等领域发挥着越来越重要的作用，Three.js 是一个基于 WebGL 的 JavaScript 库，它简化了 3D 图形的创建过程，使得开发者可以更容易地将复杂的 3D 动画和交互效果集成到网页中，本文将为你提供一份详尽的 Three.js 入门教程，帮助你从零开始学习如何使用 Three.js 创建令人惊叹的 3D 内容。
1. 什么是 Three.js？
Three.js 是一个开源的 JavaScript 库，由 Ricardo Cabello（又名 Mr.doob）于2010年创建，它的主要目的是让开发者能够更轻松地利用 WebGL 技术在浏览器中渲染 3D 图形，WebGL 是一种用于在网页上渲染 2D 和 3D 图形的标准，不需要任何插件或框架，直接使用 WebGL 编程相当复杂，而 Three.js 通过提供一组高级 API 来简化这个过程，使得开发者可以专注于创意而不是底层技术细节。
2. 为什么选择 Three.js？
易用性：Three.js 提供了许多预定义的对象和方法，使开发者能够快速上手，即使是没有 3D 经验的开发者也能轻松创建出复杂的 3D 场景。
灵活性：Three.js 支持多种渲染模式，包括标准渲染、阴影映射、光线追踪等，可以根据项目需求灵活选择。
社区支持：Three.js 拥有一个活跃的开发者社区，提供了大量的示例代码、教程和插件，有助于解决开发过程中遇到的问题。
性能优化：Three.js 在性能方面做了大量优化，即使是处理大量 3D 对象和复杂动画，也能保持流畅的用户体验。
3. 安装和设置
要开始使用 Three.js，首先需要在你的项目中引入 Three.js 库，你可以通过以下几种方式来安装：
CDN 引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
npm 安装：
npm install three
然后在你的 JavaScript 文件中引入：
import * as THREE from 'three';
4. 创建第一个 3D 场景
我们将创建一个简单的 3D 场景，包含一个旋转的立方体，以下是详细的步骤：
1、创建 HTML 结构：
<!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 src="app.js"></script>
</body>
</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);
// 创建几何体
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);
// 渲染函数
function animate() {
requestAnimationFrame(animate);
// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
// 开始动画
animate();3、运行代码：
将上述 HTML 和 JavaScript 代码保存到文件中，然后在浏览器中打开 HTML 文件，你应该会看到一个旋转的绿色立方体。
5. 进阶技巧
一旦你掌握了基本的 3D 场景创建，可以尝试一些更高级的技巧，
添加光照：使用THREE.DirectionalLight 或THREE.PointLight 来模拟自然光或点光源。
纹理贴图：使用THREE.TextureLoader 加载纹理图片，并将其应用到几何体上。
动画和交互：使用THREE.AnimationMixer 和THREE.Raycaster 来实现复杂的动画和用户交互。
性能优化：使用THREE.WebGLRenderer.setPixelRatio 和THREE.Object3D.frustumCulled 来提高渲染性能。
6. 实战案例
为了更好地理解 Three.js 的实际应用，我们来看一个具体的案例：创建一个带有光照和纹理的 3D 地球模型。
1、创建场景：
const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 15; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
2、加载纹理：
const textureLoader = new THREE.TextureLoader();
const earthTexture = textureLoader.load('path/to/earth.jpg');
const earthBumpMap = textureLoader.load('path/to/earth_bump.jpg');3、创建地球模型：
const geometry = new THREE.SphereGeometry(5, 32, 32);
const material = new THREE.MeshPhongMaterial({
map: earthTexture,
bumpMap: earthBumpMap,
bumpScale: 0.05
});
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);4、添加光照：
const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(5, 5, 5).normalize(); scene.add(directionalLight);
5、渲染和动画：
function animate() {
requestAnimationFrame(animate);
earth.rotation.y += 0.001;
renderer.render(scene, camera);
}
animate();7. 结论
通过本教程，你已经学会了如何使用 Three.js 创建基本的 3D 场景，并了解了一些进阶技巧和实战案例，Three.js 的强大功能和易用性使其成为创建 3D 内容的理想选择，希望这篇教程能激发你对 3D 图形编程的兴趣，鼓励你继续探索更多 Three.js 的高级特性和应用场景。
如果你对 Three.js 有任何疑问或需要进一步的帮助，可以参考官方文档或加入社区讨论，祝你在 3D 开发的道路上越走越远！
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
诗落
这家伙太懒。。。
- 暂无未发布任何投稿。
