Three.js 是主流 Web 3D 库，通过 Scene、Camera、Renderer 三要素搭建场景，用几何体+材质+网格创建物体，支持 glTF 模型加载与 OrbitControls 交互动画。
用 JavaScript 做 3D 建模，通常不是从零手写几何体顶点，而是借助成熟库（如 Three.js）加载模型、构建场景、控制渲染。Three.js 是目前最主流的 Web 3D 库，它封装了 WebGL 的复杂性，让你用简洁的 JS 代码创建交互式 3D 场景。
基础场景搭建：相机、渲染器、场景三要素
每个 Three.js 项目都离不开三个核心对象：
- Scene（场景）：所有 3D 对象的容器，相当于一个空舞台
-
Camera（相机）：决定“谁在看”和“怎么看”，常用
PerspectiveCamera（透视相机） -
Renderer（渲染器）：把场景和相机的内容画到 HTML 的
<canvas></canvas>上，一般用WebGLRenderer
初始化示例：
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
添加 3D 物体：几何体 + 材质 + 网格
Three.js 中的物体由三部分组成：几何体（shape）、材质（appearance）、网格（mesh，即两者的组合）。
立即学习“Java免费学习笔记（深入）”；
- 几何体：如
BoxGeometry、SphereGeometry、CylinderGeometry，定义顶点和面 - 材质：如
MeshBasicMaterial（无光照）、MeshStandardMaterial（支持 PBR 光照） - 网格：
new THREE.Mesh(geometry, material)，是可添加进场景的实际对象
例如创建一个旋转的立方体：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ffcc });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 添加光源才能看到标准材质效果
const light = new THREE.PointLight(0xffffff, 2, 100);
light.position.set(5, 5, 5);
scene.add(light);
加载外部 3D 模型（如 glTF）
实际项目中，精细模型通常由 Blender、Maya 等工具导出为 .glb 或 .gltf 格式（推荐 glTF，Web 标准）。Three.js 官方推荐使用 GLTFLoader 加载：
- 需单独引入：
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; - 加载后得到场景子树，可缩放、旋转、添加动画
- 注意：模型可能自带材质/纹理/动画，需配合
DRACOLoader（压缩）或TextureLoader（贴图）优化
简单加载示例：
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
const model = gltf.scene;
model.scale.set(0.5, 0.5, 0.5);
scene.add(model);
}, undefined, (err) => console.error('加载失败:', err));
让场景动起来：动画循环与交互
Three.js 不自动重绘，需手动调用 renderer.render()。标准做法是用 requestAnimationFrame 实现平滑动画循环：
- 每一帧更新物体位置、旋转、缩放等属性
- 监听鼠标/触摸事件实现拖拽旋转（可用
OrbitControls快速实现） - 响应窗口大小变化时，同步更新相机宽高比和渲染器尺寸
基础动画循环：
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
启用轨道控制器（自由旋转缩放平移）：
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 惯性阻尼
