three面试题汇总

前端 Three.js 高频面试题汇总（超详细，建议收藏）

大家好，我是前端开发。

最近在学习和使用 :contentReference[oaicite:0]{index=0} 做 3D 可视化，整理了一套面试中高频出现的 Three.js 面试题，涵盖：

Three基础
场景和相机
Vector数学
模型加载
材质灯光
动画
性能优化
项目实战

建议收藏。

一、Three.js 是什么？

面试题

Three.js 是什么？和 WebGL 什么关系？

标准回答

Three.js 是一个基于 :contentReference[oaicite:1]{index=1} 的 JavaScript 3D 引擎。

它对 WebGL 做了高度封装，让开发者可以更简单地实现：

场景管理
相机控制
光照系统
材质系统
模型加载
动画控制

关系：

text 复制代码

Three.js
↓
WebGL
↓
GPU

二、Three.js 基本开发流程

面试题

Three.js 基本开发流程？

标准回答

流程：

text 复制代码

创建场景
↓

创建相机
↓

创建渲染器
↓

创建模型
↓

加入scene
↓

渲染

代码：

javascript 复制代码

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera()

const renderer = new THREE.WebGLRenderer()

renderer.render(scene,camera)

三、Scene、Mesh 是什么？

Scene

:contentReference[oaicite:2]{index=2}

scene 是整个3D世界容器。

所有物体都需要添加到 scene 中。

javascript 复制代码

scene.add(mesh)

Mesh

:contentReference[oaicite:3]{index=3}

mesh = geometry + material

公式：

Mesh = Geometry + Material

代码：

javascript 复制代码

const mesh = new THREE.Mesh(
    geometry,
    material
)

四、相机

面试题

透视相机和正交相机区别？

透视相机

:contentReference[oaicite:4]{index=4}

特点：

近大远小。

适用于：

游戏
漫游
建筑

正交相机

:contentReference[oaicite:5]{index=5}

特点：

大小不变。

适用于：

CAD
后台大屏

面试题

near 和 far 是什么？

答：

相机裁剪面。

text 复制代码

near前面看不到

far后面看不到

五、Three 坐标系

Three 使用：

右手坐标系。

text 复制代码

x → 右

y ↑ 上

z → 外

六、position、rotation、scale

Three 三大变换：

javascript 复制代码

position

rotation

scale

position

表示位置。

javascript 复制代码

cube.position.set(1,2,3)

等价：

javascript 复制代码

cube.position.x = 1
cube.position.y = 2
cube.position.z = 3

rotation

表示旋转。

javascript 复制代码

cube.rotation.x=Math.PI

scale

表示缩放倍率。

默认：

javascript 复制代码

(1,1,1)

含义：

text 复制代码

1 = 原始大小

2 = 放大2倍

0.5 = 缩小一半

面试题

setScalar 和 multiplyScalar 区别？

setScalar

javascript 复制代码

cube.scale.setScalar(2)

表示：

直接设置倍率。

text 复制代码

scale = 2

multiplyScalar

javascript 复制代码

cube.scale.multiplyScalar(2)

表示：

当前倍率乘2。

text 复制代码

scale *=2

七、Vector3 高频面试题

:contentReference[oaicite:6]{index=6}

创建

javascript 复制代码

const v=new THREE.Vector3()

set

设置值。

javascript 复制代码

v.set(1,2,3)

clone

创建新对象。

javascript 复制代码

const v2=v1.clone()

copy

复制值。

javascript 复制代码

v2.copy(v1)

add

加法。

javascript 复制代码

v1.add(v2)

sub

减法。

javascript 复制代码

v1.sub(v2)

normalize

单位化。

长度变成1。

面试题

normalize 的作用？

答：

只保留方向，去掉长度。

八、模型移动

面试题

Three 如何移动物体？

方式1

直接赋值：

javascript 复制代码

cube.position.x=10

方式2

累加：

javascript 复制代码

cube.position.x+=1

方式3

Vector移动：

javascript 复制代码

cube.position.add(
    new THREE.Vector3(1,0,0)
)

九、Box3 包围盒

:contentReference[oaicite:7]{index=7}

面试题

Box3 有什么作用？

答：

计算模型包围盒。

用于：

居中
碰撞检测
获取尺寸

获取包围盒

javascript 复制代码

const box=new THREE.Box3()
box.setFromObject(model)

获取中心

javascript 复制代码

const center=box.getCenter(
    new THREE.Vector3()
)

模型居中

javascript 复制代码

model.position.sub(center)

原理：

text 复制代码

position = position-center

把模型几何中心移动到世界原点。

十、材质

MeshBasicMaterial

:contentReference[oaicite:8]{index=8}

特点：

不受光照影响。

MeshLambertMaterial

:contentReference[oaicite:9]{index=9}

特点：

漫反射。

MeshPhongMaterial

:contentReference[oaicite:10]{index=10}

特点：

镜面高光。

MeshStandardMaterial

:contentReference[oaicite:11]{index=11}

特点：

PBR。

十一、模型加载

gltf

:contentReference[oaicite:12]{index=12}

特点：

小
快
支持动画

obj

:contentReference[oaicite:13]{index=13}

老格式。

面试题

为什么 gltf 加载后要 traverse？

答：

遍历模型所有子节点。

用于：

修改材质
开启阴影
获取子模型

代码：

javascript 复制代码

model.traverse(item=>{

})

十二、模型拾取

:contentReference[oaicite:14]{index=14}

面试题

模型点击如何实现？

流程：

text 复制代码

鼠标位置
↓

NDC坐标
↓

Raycaster
↓

intersectObjects

十三、动画

面试题

为什么 requestAnimationFrame 比 setInterval 好？

答：

与屏幕刷新同步
更流畅
更省性能

代码：

javascript 复制代码

function animate(){

    requestAnimationFrame(animate)

    renderer.render(
        scene,
        camera
    )

}

十四、OrbitControls

:contentReference[oaicite:15]{index=15}

面试题

OrbitControls 原理？

答：

通过修改 camera.position 和 lookAt 实现。

十五、性能优化

面试题

Three 项目如何优化？

1. 减少 DrawCall

2. 使用 InstancedMesh

:contentReference[oaicite:16]{index=16}

一次绘制多个相同模型。

3. 模型合并

merge。

4. 纹理压缩

5. LOD

远近细节优化。

6. dispose

释放内存。

十六、项目高频问题

模型太小

javascript 复制代码

model.scale.setScalar(100)

模型不在中心

javascript 复制代码

const box=new THREE.Box3()

box.setFromObject(model)

const center=box.getCenter(
    new THREE.Vector3()
)

model.position.sub(center)

模型太黑

检查：

是否加光
材质是否正确
法线是否正常

总结

Three.js 面试最容易考：

Scene
Mesh
Camera
Vector3
Box3
Raycaster
gltf
scale
OrbitControls
性能优化

建议重点掌握。