scene是容器、camera定视角、renderer合成画面，三者必须按序创建并调用renderer.render(scene, camera)才能显示，缺一不可。
Scene、Camera、Renderer 三者必须按顺序创建且正确关联
Three.js 的核心流程不是“写完就能跑”，而是 Scene 存对象、Camera 定视角、Renderer 负责把前两者合成一帧画面——缺一不可，顺序错乱或漏掉 renderer.render(scene, camera) 就是白屏。
常见错误现象：WebGLRenderer is not defined（没引入库）、控制台无报错但页面空白（漏调 render() 或 camera 未设 position）、模型显示为一个点（camera.position.z 太小，穿进物体里了）。
-
Scene创建后可直接用，无需额外配置 -
PerspectiveCamera必须传四个参数：fov（视场角，常用 75）、aspect（宽高比，用window.innerWidth / window.innerHeight）、near（近裁剪面，别设 0，推荐 0.1）、far（远裁剪面，太大影响精度，初学者设 1000 足够） -
WebGLRenderer建议显式设置antialias: true，否则边缘锯齿明显；创建后必须调renderer.setSize(width, height)，且需监听窗口 resize 并同步更新
必须手动添加光源，否则所有材质都是纯黑
Three.js 不自带环境光，MeshBasicMaterial 能绕过光照显示颜色，但一旦换成 MeshStandardMaterial 或 MeshPhongMaterial，没有光源就彻底不可见——这不是 bug，是设计如此。
最简可用组合：一个 AmbientLight（提供基础亮度）+ 一个 DirectionalLight（模拟太阳光，有方向和阴影）。
-
AmbientLight颜色建议设0x404040，强度 0.5 左右，避免过曝 -
DirectionalLight需调用light.position.set(x, y, z)，再执行light.lookAt(0, 0, 0)指向原点，否则光可能照偏 - 若要用阴影，必须开启
renderer.shadowMap.enabled = true，并给灯光设castShadow = true、接收阴影的物体设receiveShadow = true、投射阴影的物体设castShadow = true
物体加入 Scene 前必须有几何体 + 材质 + 网格封装
不能直接 scene.add({x: 0, y: 0, z: 0})，也不能只写 new THREE.BoxGeometry() 就完事。Three.js 的物体是三层结构：几何体（Geometry 或 BufferGeometry）定义形状，材质（Material）定义表面属性，网格（Mesh）把二者打包成可添加到场景的实体。
初学者常卡在 BufferGeometry 和 Geometry 混用、材质没指定颜色、忘记 new Mesh 导致报 Object3D.add: object not an instance of Object3D。
- 推荐起步用
BoxGeometry+MeshStandardMaterial，例如：const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); -
MeshStandardMaterial需要光源才能显色；MeshBasicMaterial不依赖光，适合调试阶段快速验证位置和大小 - 所有物体默认位于原点，移动用
mesh.position.set(x, y, z)，别直接改mesh.x
动画循环必须用 requestAnimationFrame，别用 setInterval
requestAnimationFrame 是浏览器专为动画优化的 API，会自动匹配屏幕刷新率；setInterval 容易丢帧、不同步，还会在标签页切走时继续执行，浪费资源。
最简动画函数长这样，注意它必须递归调用自己：
function animate() {
requestAnimationFrame(animate);
// 在这里更新旋转、位置等
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
容易被忽略的点：
- 不要在
animate外部调一次render()，否则第一帧可能没内容 - 如果物体没动，但想保持渲染（比如等用户交互），仍需调
requestAnimationFrame，只是不更新状态 - resize 监听里重设
renderer.setSize后，记得同步更新camera.aspect和camera.updateProjectionMatrix()，否则画面拉伸
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
