Three.js入门必看：快速掌握3D网页动画！

三.js（Three.js）是一个基于WebGL的JavaScript库，能够帮助开发者轻松创建3D网页动画和交互效果。如果你是初学者，下面是一份快速入门指南，帮助你快速掌握Three.js的基础知识，制作属于自己的3D网页动画。

—

## 一、Three.js 简介
– **Three.js** 是一个跨浏览器的JavaScript库，封装了WebGL底层绘图API，让开发者更简单地创建3D图形。
– 它支持场景（Scene）、相机（Camera）、灯光（Light）、几何体（Geometry）、材质（Material）、网格（Mesh）等3D基本元素。
– 适合制作3D动画、模型浏览、游戏和数据可视化等。

—

## 二、快速开始：构建你的第一个3D场景

### 1. 基础HTML结构
“`html

body { margin: 0; }
canvas { display: block; }

“`

### 2. 创建JavaScript文件（app.js）
“`javascript
// 1. 创建场景Scene
const scene = new THREE.Scene();

// 2. 创建相机Camera (透视相机)
const camera = new THREE.PerspectiveCamera(
75, // 视野角度（FOV）
window.innerWidth / window.innerHeight, // 宽高比
0.1, // 最近距离
1000 // 最远距离
);

// 3. 创建渲染器Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 4. 创建几何体Geometry和材质Material，组成网格Mesh
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); // 添加到场景中

// 5. 设置相机位置
camera.position.z = 5;

// 6. 动画循环函数
function animate() {
requestAnimationFrame(animate);

// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

// 渲染场景和相机
renderer.render(scene, camera);
}
animate();

// 7. 监听窗口大小变化，自适应渲染器和相机
window.addEventListener(‘resize’, () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);
});
“`

—

## 三、重要概念解析

### 1. 场景（Scene）
相当于3D世界的容器，所有对象都添加到场景中。

### 2. 相机（Camera）
确定你用什么视角观察3D世界，常用透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。

### 3. 渲染器（Renderer）
负责将3D场景绘制到屏幕上，Three.js默认用WebGLRenderer。

### 4. 几何体（Geometry）
3D模型的形状，比如立方体、球体、平面等。

### 5. 材质（Material）
定义几何体的外观，比如颜色、纹理、反射效果等。

### 6. 网格（Mesh）
几何体和材质的结合体，可以被添加到场景中。

—

## 四、给你的3D场景添加灯光和阴影

“`javascript
// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 白色光，强度0.5
scene.add(ambientLight);

// 添加点光源
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

// 使用标准材质支持光照
const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });
“`

—

## 五、进一步学习建议

– **官方文档和示例**： [https://threejs.org/](https://threejs.org/)
– **常用教程网站**：如MDN Web Docs、各种博客和YouTube教学视频
– **探索拓展功能**：导入模型（GLTFLoader）、控制器（OrbitControls）、粒子系统、后期效果（Postprocessing）等
– **实践项目**：尝试制作简单的交互动画、3D产品展示、小游戏等

—

## 总结

Three.js虽然功能强大，但入门并不复杂。掌握场景、相机、几何体、材质和渲染循环这几个核心步骤，就可以快速搭建自己的3D网页动画。不断尝试和学习，可以让你实现越来越酷炫的3D效果。祝你学习愉快，玩转Three.js！

—

如果你有具体的项目需求或遇到困难，欢迎随时提问，我可以帮你解答！