前端Three.js面试题及参考答案

目录

Three.js 的核心架构包含哪些模块？简述其协作流程。

WebGL 与 Three.js 的关系是什么？Three.js 如何简化 WebGL 开发？

Three.js 中 Scene 的作用是什么？如何管理场景中的对象层级？

Three.js 中 Camera 的作用及初始化步骤是什么？

Three.js 中 Renderer 的作用及初始化步骤是什么？

解释 Three.js 的坐标系系统（世界坐标、局部坐标、屏幕坐标）

什么是渲染循环（Render Loop）？如何通过 requestAnimationFrame 实现动画？

如何理解 Three.js 中的几何体（Geometry）与缓冲几何体（BufferGeometry）的区别？

如何通过 Geometry 与 BufferGeometry 优化网格（Mesh）的性能？

材质（Material）与着色器（Shader）的关系是什么？自定义着色器的常见场景。

材质（Material）的 side 属性如何影响渲染？如何解决单面材质穿透问题？

Three.js 支持哪些光源类型？简述 PointLight、DirectionalLight、AmbientLight 的特性。

点光源（PointLight）、平行光（DirectionalLight）、环境光（AmbientLight）的光照特性差异？

如何实现模型的加载与解析（GLTF、OBJ、FBX 等格式）？

GLTF 格式

OBJ 格式

FBX 格式

什么是射线投射（Raycasting）？如何实现物体点击交互？

1. 创建射线投射器

2. 获取鼠标位置

3. 更新射线

4. 进行射线投射

5. 处理相交结果

什么是射线投射（Raycaster）？如何实现 3D 物体的点击交互？

解释 Three.js 中 Matrix4 的作用及常见变换操作（平移、旋转、缩放）

如何管理 Three.js 的内存泄漏问题？

如何检测并修复内存泄漏（如未释放几何体、纹理资源）？

正交投影相机（OrthographicCamera）与透视投影相机（PerspectiveCamera）的区别及应用场景。

透视相机（PerspectiveCamera）与正交相机（OrthographicCamera）的区别及适用场景？

什么是纹理映射（Texture Mapping）？如何为模型添加贴图？

如何实现 Three.js 与 HTML/CSS 的混合渲染（如叠加 UI 元素）？

如何创建自定义几何体（如生成地形或参数化模型）？

MeshBasicMaterial、MeshPhongMaterial、MeshStandardMaterial 的区别及性能影响。

如何实现模型的骨骼动画（SkinnedMesh）与变形动画（MorphTargets）？

解释 OrbitControls 的作用及常用配置参数（阻尼、旋转限制等）

如何通过 OrbitControls 实现场景的交互式旋转、平移与缩放？

如何通过 THREE.Group 管理复杂场景层级？

什么是后处理（Post-Processing）？列举常用效果（辉光、景深、抗锯齿）

如何实现阴影渲染？需调整哪些相机与光源参数？

如何优化模型顶点数据（如合并几何体、使用索引缓冲）？

解释 WebGLRenderer 的 antialias、alpha、shadowMap 等配置项。

解释 WebGLRenderer 中 antialias、alpha、shadowMap.enabled 参数的作用？

如何监听窗口尺寸变化并自适应渲染器与相机？

如何动态调整渲染器（Renderer）的尺寸以适应浏览器窗口变化？

如何实现模型的拾取与拖拽（结合 Raycaster 与变换控制）？

什么是实例化渲染（InstancedMesh）？适合哪些场景？

如何通过 TextureLoader 加载并管理纹理资源（包括压缩格式如 Basis Universal）？

解释 THREE.Clock 的作用及在动画计时中的应用。

如何通过 THREE.LOD 实现细节层次优化？

列举 Three.js 中常见的性能瓶颈及排查工具（如 stats.js、Chrome DevTools）。

如何通过视锥体剔除（Frustum Culling）减少渲染负载？

纹理压缩（如使用 KTX2 格式）对性能的影响及实现方法。

如何利用 Web Worker 优化复杂计算（如物理模拟）？

多线程渲染（OffscreenCanvas）在 Three.js 中的应用限制与解决方案

如何通过合并 Draw Call 减少 GPU 压力？

动态批处理（Dynamic Batching）与静态批处理（Static Batching）的区别

如何优化大规模粒子系统（如使用 Points 与 BufferAttribute）？

什么是 GPU 粒子（GPU Particles）？与传统 CPU 粒子的性能对比

Three.js 如何支持 PBR（基于物理的渲染）材质？

如何实现模型的 GPU 加速蒙皮？

如何通过 WebAssembly 提升 Three.js 的计算性能？

如何将 Three.js 与前端框架（React、Vue）集成？

如何实现跨平台兼容性（如移动端适配、低端设备降级）？

顶点着色器（Vertex Shader）与片元着色器（Fragment Shader）在渲染管线中的分工？

顶点着色器的分工

片元着色器的分工

两者的协作

---

Three.js 的核心架构包含哪些模块？简述其协作流程。

Three.js 的核心架构由多个重要模块构成，每个模块都有独特功能，它们协同工作以创建出 3D 场景。

场景（Scene）模块是整个 3D 世界的容器，所有的物体、灯光、相机等元素都要添加到场景中。它就像一个舞台，为其他元素提供了展示的空间。

相机（Camera）模块决定了观