用途:在网页上构建或调试真实的三维场景,例如产品旋转展示、交互式主视觉、着色器与材质效果、3D 数据可视化;适合需要超出背景特效的完全控制,并能投入时间做资源管线与性能调优的场景。
核心模型:创建 Scene(根节点图)、Camera(透视或正交)、Renderer(WebGLRenderer);Mesh 由 Geometry 与 Material 组成;使用非无光照材质时需添加 Lights。渲染循环用 requestAnimationFrame(animate),在其中更新基于时间的动画、控制器、mixer,再调用 renderer.render(scene, camera)。
关键 API 与模式:初始化用 new THREE.WebGLRenderer({ canvas, antialias, alpha }),配合 renderer.setSize(width, height, false) 与 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));相机调整用 camera.aspect = width / height 与 camera.updateProjectionMatrix();场景图用 scene.add(object) 及 position/rotation/scale;资源加载用 GLTFLoader(模型)、TextureLoader(图片)、DRACOLoader(压缩 glTF);常用控制器有 OrbitControls(调试/产品)、PointerLockControls(第一人称)及自定义指针处理。单页应用中需清理:geometry.dispose()、material.dispose()、texture.dispose()、renderer.dispose(),并移除事件监听、取消 RAF。
常见陷阱:未处理 resize 导致画面拉伸或裁切;devicePixelRatio 过高拖垮移动 GPU;未释放 WebGL 资源导致路由切换后崩溃;加载超大贴图/模型拖慢启动,应使用压缩贴图、Draco/KTX2 与更小贴图;灯光与阴影过多开销大,可用烘焙贴图伪造光照。
无障碍:若 prefers-reduced-motion: reduce,应渲染静止帧(不用 RAF)或放慢更新。
使用前建议确认:是装饰性主视觉还是功能性 3D(产品查看器);目标设备是否含移动端或较旧 iPhone;资源格式(glTF、HDRI、贴图)与文件大小限制;无障碍与减少动态效果要求。
限制:资料未提供具体安装命令、版本要求、收费与平台信息,暂未提供。