Three.js 3D可视化毕设入门

背景

Three.js 是浏览器端 3D 渲染的事实标准。毕设中如果能加入 3D 元素——产品 3D 展示、校园导览、数据可视化地球、虚拟展厅——会立刻让项目档次提升。Three.js 屏蔽了 WebGL 的复杂性，前端开发者无需学 OpenGL 也能做 3D。

---

核心概念

三要素

Scene (场景)  → 容納所有 3D 物体
Camera (相机) → 观察视角
Renderer (渲染器) → 绘制到屏幕

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

四大组件

组件	说明	示例
Geometry	形状	Box, Sphere, Cylinder, BufferGeometry
Material	材质	MeshBasic, MeshPhong, MeshStandard
Light	光照	Ambient, Directional, Point, Spot
Controls	交互	OrbitControls, FlyControls

---

分步操作

第一步：引入 Three.js

npm install three

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

第二步：创建第一个立方体

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0x3b82f6 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 别忘了加光照
scene.add(new THREE.AmbientLight(0x404040));
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

第三步：添加交互

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.autoRotate = true;

第四步：加载 3D 模型

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('/models/building.glb', (gltf) => {
  scene.add(gltf.scene);
});

---

毕设推荐场景

校园 3D 导览

Blender 建模校园建筑 → glTF 导出 → Three.js 加载 → OrbitControls 漫游。

产品 3D 展示

商品 360 度旋转查看，支持缩放和材质切换。

数据可视化

3D 柱状图、3D 地图、3D 粒子效果。

虚拟展厅

COVID 期间流行的线上展厅，三维空间展示作品。

---

思考题

1. PerspectiveCamera 和 OrthographicCamera 的区别？各自适用场景？
2. 为什么需要光照？MeshBasicMaterial 和 MeshStandardMaterial 的区别？
3. 加载大型 3D 模型时如何优化性能？

---

小结

Three.js 是毕设的"视觉杀手锏"。一个带 3D 元素的毕设项目，在答辩演示时视觉冲击力远超传统 2D 页面。