前端3D可视化岗位需求暴涨，Three.js作为最主流的3D开发库，是面试基础中的基础。本期聚焦入门高频题，帮你快速夯实基础，避开入门误区，适合应届生、转行者及3D可视化新手。所有题目均结合真实面试场景，附考点解析+实战易错点，背会直接应对基础面！
1. 请简述Three.js的三大核心组件及其作用？（必考题）
考点：Three.js基础架构，区分新手与入门者的核心考点。
解析：三大核心组件缺一不可，口诀记牢：「场景装对象，相机定视角，渲染出画面」。
1. 场景（Scene）：3D世界的“容器”，所有3D对象（模型、灯光、相机）都需要添加到场景中，相当于一个虚拟的3D空间，负责管理所有子对象的层级关系。
2. 相机（Camera）：模拟人眼的视角，决定了场景中哪些部分会被渲染到画布上。常用两种：透视相机（PerspectiveCamera，符合人眼近大远小，适合大多数3D场景）和正交相机（OrthographicCamera，无透视效果，适合2.5D、UI可视化）。
3. 渲染器（Renderer）：将场景和相机的“视角”渲染到页面的Canvas元素上，核心是将3D场景的三维信息转换为二维像素，同时支持阴影、抗锯齿等效果配置。
2. Three.js中Geometry和BufferGeometry的区别？为什么优先用BufferGeometry？
解析：二者都是Three.js中用于描述3D模型形状的核心类，核心差异在性能和兼容性：
1. Geometry：旧版几何体，API友好，数据存储在JavaScript对象中，易操作（比如直接修改vertices数组），但性能较差——频繁与GPU交互时，数据传输开销大，Three.js r125版本后已正式废弃。
2. BufferGeometry：新版几何体，将顶点、法线、纹理坐标等数据存储在TypedArray（如Float32Array）中，直接映射到GPU缓存，减少CPU与GPU之间的数据传输开销，性能远超Geometry，支持大规模顶点渲染，是当前生产环境中唯一推荐使用的几何体。
3. 如何在Three.js中创建一个带纹理的立方体？
解析：核心步骤：加载纹理→创建材质→创建几何体→创建网格→添加到场景，需注意纹理加载的跨域问题和参数配置。
import { TextureLoader } from 'three/addons/loaders/TextureLoader.js';
const textureLoader = new TextureLoader();
const texture = textureLoader.load('brick.jpg',
(texture) => { console.log('纹理加载成功'); },
(xhr) => { console.log(`加载进度：${(xhr.loaded / xhr.total * 100).toFixed(2)}%`); },
(err) => { console.error('纹理加载失败：', err); });
texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(2, 2); const material = new THREE.MeshStandardMaterial({ map: texture });
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);scene.add(cube);
const light = new THREE.AmbientLight(0xffffff, 0.5);scene.add(light);
易错点：使用MeshStandardMaterial时，必须添加灯光，否则模型会显示黑色；纹理图片尺寸建议为2的幂次方（如256×256、512×512），GPU处理更高效。
4. Three.js中的材质分为哪几类？MeshBasicMaterial和MeshStandardMaterial的核心区别是什么？
解析：Three.js材质按功能可分为基础材质、光照材质、特殊材质三类，核心区别在于是否响应光照：
1. 基础材质：不响应光照，只显示颜色或纹理，代表：MeshBasicMaterial（无光照，适合简单场景、2D贴图）、MeshDepthMaterial（按深度显示颜色）。
2. 光照材质：响应光照，能呈现明暗、阴影、金属感等效果，代表：MeshLambertMaterial（漫反射，无高光）、MeshPhongMaterial（漫反射+高光）、MeshStandardMaterial（PBR材质，基于物理渲染，支持金属度、粗糙度，最接近真实效果，推荐生产环境使用）。
3. 特殊材质：用于实现特殊效果，如MeshNormalMaterial（显示法线颜色）、MeshTransparentMaterial（透明材质）。
核心区别：MeshBasicMaterial无视灯光，无论是否添加灯光，都能显示纹理或颜色；MeshStandardMaterial是PBR材质，必须添加灯光（环境光、平行光等）才能显示正常颜色，支持金属度、粗糙度调节，视觉效果更真实。
5. 如何让Three.js中的物体产生阴影效果？
解析：阴影渲染本质是“额外的渲染通道”，需要同时开启渲染器、光源、物体的阴影相关配置，缺一不可：
renderer.shadowMap.enabled = true;
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.castShadow = true; directionalLight.shadow.mapSize.set(2048, 2048); scene.add(directionalLight);
const cube = new THREE.Mesh(geometry, material);cube.castShadow = true; cube.receiveShadow = true; scene.add(cube);
const groundGeometry = new THREE.PlaneGeometry(10, 10);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground);
易错点：环境光（AmbientLight）不能投射阴影；阴影分辨率设置过高会导致性能下降，需根据场景需求平衡清晰度和性能。
6. Three.js中如何实现物体的旋转动画？（至少两种方式）
解析：Three.js动画核心有4种方式，面试时至少掌握2种，优先说最常用的两种：方式1：帧循环动画（CPU驱动，最常用）——通过requestAnimationFrame创建渲染循环，每帧更新物体的rotation属性（x、y、z轴旋转角度）。
function animate() { requestAnimationFrame(animate); cube.rotation.y += 0.01; cube.rotation.x += 0.005; renderer.render(scene, camera);}animate();
方式2：补间动画（Tween.js，适合平滑过渡）——结合Tween.js库，实现物体属性的平滑过渡（如旋转、平移、缩放），简化动画逻辑。
import { Tween } from 'three/addons/libs/tween.module.min.js';new Tween(cube.rotation) .to({ y: Math.PI }, 1000) .easing(TWEEN.Easing.Linear.None) .repeat(Infinity) .start();
补充：还有两种进阶方式——骨骼动画（SkinnedMesh，适合人物、机械等复杂动画）、Shader动画（GPU驱动，适合大规模粒子、流水等效果），面试时提到可加分。
7. 简述Three.js中的纹理映射（Texture Mapping）流程及注意事项？
解析：纹理决定物体表面细节，核心流程+注意事项如下：
1. 流程：① 创建纹理加载器（TextureLoader）→ ② 加载纹理图片（处理加载进度、失败回调）→ ③ 配置纹理参数（重复、拉伸、过滤方式等）→ ④ 将纹理赋值给材质的map属性 → ⑤ 结合几何体的UV坐标，实现纹理与物体表面的对应。
– UV坐标必须正确：UV坐标决定纹理在物体表面的映射位置，若UV坐标错误，纹理会出现扭曲、拉伸，需在Blender等建模工具中调整。
– 跨域问题：开发环境中，纹理图片需放在同一域名下，或配置服务器允许跨域；否则会出现纹理加载失败、渲染异常。
– 纹理尺寸：建议为2的幂次方（如256×256、512×512），GPU处理更高效，非2的幂次方纹理可能会被自动拉伸，影响显示效果。
– 纹理压缩：大规模场景中，可使用ETC1、ASTC等纹理压缩格式，减少内存占用，提升加载速度。
8. Three.js中如何加载外部3D模型（如GLTF/GLB）？加载失败的常见原因有哪些？
考点：外部模型加载，实战问题排查能力（高频追问）。
解析：GLTF/GLB是当前最主流的3D模型格式，Three.js通过GLTFLoader加载，核心步骤+失败排查如下：
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';const gltfLoader = new GLTFLoader();gltfLoader.load( 'model.glb', (gltf) => { scene.add(gltf.scene); gltf.scene.scale.set(1, 1, 1); gltf.scene.position.set(0, 0, 0); }, (xhr) => { console.log(`模型加载进度：${(xhr.loaded / xhr.total * 100).toFixed(2)}%`); }, (err) => { console.error('模型加载失败：', err); });
1. 路径错误：确认模型路径相对于HTML文件的位置，开发环境中避免路径拼写错误（如大小写不一致）。
2. 格式损坏：模型导出时出错，可使用Blender重新导出，优先选择GLB 2.0格式（体积小、兼容性好）。
3. 缺少依赖：GLTFLoader需单独导入，不可遗漏；若模型包含Draco压缩，还需导入DRACOLoader并配置解码器路径。
4. 跨域问题：同纹理加载，模型文件需处理跨域，否则会出现加载失败。 5. 模型过大：未进行模型压缩，导致加载超时，可使用Draco压缩、LOD细节层次等方式优化。
9. Three.js中相机的视场角（FOV）、近裁剪面、远裁剪面的作用是什么？
解析：三者是透视相机（PerspectiveCamera）的核心参数，直接影响场景的显示范围和清晰度：
1. 视场角（FOV）：相机的视野范围，单位是角度（默认75度），FOV越大，视野越广，场景中显示的内容越多，但物体看起来越小；FOV越小，视野越窄，类似望远镜效果，物体看起来越大。
2. 近裁剪面（near）：相机能看到的最近距离，小于这个距离的物体将被剔除（不渲染），通常设置为0.1（避免与相机位置重叠）。
3. 远裁剪面（far）：相机能看到的最远距离，大于这个距离的物体将被剔除（不渲染），设置过大会导致性能下降（需渲染更多物体），设置过小会导致远处物体消失，需根据场景大小合理配置。
10. Three.js中如何实现物体的平移、缩放？
解析：物体的平移、缩放通过修改对应属性实现，核心两种方式，简单易记：
– 平移：修改position属性（x、y、z轴坐标），如cube.position.x = 2; （沿x轴平移2个单位）、cube.position.set(2, 0, 0); （一次性设置三个轴坐标）。
– 缩放：修改scale属性（x、y、z轴缩放比例），如cube.scale.y = 2; （沿y轴放大2倍）、cube.scale.set(2, 2, 2); （整体放大2倍）。
2. 使用矩阵变换（适合复杂变换，如组合平移+缩放）：
const translateMatrix = new THREE.Matrix4().makeTranslation(2, 0, 0);const scaleMatrix = new THREE.Matrix4().makeScale(2, 2, 2);cube.matrix.multiply(translateMatrix).multiply(scaleMatrix);cube.matrixAutoUpdate = false;
11. Three.js中的灯光有哪些类型？各自的作用是什么？
解析：Three.js灯光分为4类核心类型，覆盖不同光照需求，面试需掌握每种的作用和使用场景：
1. 环境光（AmbientLight）：全局光，无方向，均匀照亮场景中所有物体，无法产生阴影，用于提升场景整体亮度，避免物体过暗（通常搭配其他灯光使用）。
2. 平行光（DirectionalLight）：方向光，模拟太阳光，光线平行发射，能产生强烈的阴影，适合模拟户外光照（如白天场景）。
3. 点光源（PointLight）：点光源，从一个点向四周均匀发射光线，能产生阴影，适合模拟灯泡、蜡烛等点光源效果。
4. 聚光灯（SpotLight）：聚光，从一个点向特定方向发射锥形光线，能产生阴影，适合模拟手电筒、舞台射灯等效果。补充：还有半球光（HemisphereLight），模拟地面反射光，能让场景光照更自然，适合户外场景。
12. Three.js中如何实现物体的透明效果？
解析：核心是设置材质的transparent和opacity属性，结合blending混合模式，实现不同透明效果：
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, transparent: true, // 开启透明 opacity: 0.5 // 透明度（0~1，0完全透明，1不透明）});
material.blending = THREE.AdditiveBlending; material.blending = THREE.AlphaBlending; const texture = new THREE.TextureLoader().load('glass.png');const material = new THREE.MeshStandardMaterial({ map: texture, transparent: true, alphaTest: 0.1 // 透明度阈值，低于阈值的像素完全透明，避免模糊边缘});
易错点：开启透明后，物体渲染顺序可能异常（透明物体被不透明物体遮挡），可通过调整renderOrder属性设置渲染顺序（值越大，越晚渲染）。
13. Three.js中如何监听窗口大小变化，适配场景渲染？
解析：窗口大小变化时，需同步更新相机的宽高比和渲染器的尺寸，否则会出现画面拉伸、模糊：
window.addEventListener('resize', handleResize);function handleResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio);}handleResize();
14. Three.js中什么是渲染循环？为什么需要渲染循环？
解析：渲染循环是Three.js实现动画的核心机制，本质是通过requestAnimationFrame函数，每帧（约16.7ms，对应60帧/秒）重新渲染场景，实现动态效果： 1. 渲染循环的作用：Three.js场景默认只渲染一次，若要实现物体旋转、平移、动画等动态效果，需要每帧更新物体状态（如rotation、position），并重新渲染场景，让肉眼看到连续的动态画面。 2. 核心代码（同第6题帧循环动画）：
function animate() { requestAnimationFrame(animate); cube.rotation.y += 0.01; renderer.render(scene, camera);}animate();
补充：requestAnimationFrame会自动适配浏览器刷新频率，比setInterval更流畅，且页面隐藏时会暂停，节省性能。
15. Three.js中如何实现物体的拖拽功能？
解析：核心结合射线检测（Raycasting）和鼠标事件，实现“点击物体→拖拽移动”，步骤如下：
const raycaster = new THREE.Raycaster();const mouse = new THREE.Vector2();let selectedObject = null;let offset = new THREE.Vector3();window.addEventListener('mousedown', (event) => { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = - (event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { selectedObject = intersects[0].object; const intersectPoint = intersects[0].point; offset.copy(intersectPoint).sub(selectedObject.position); }});window.addEventListener('mousemove', (event) => { if (!selectedObject) return; mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = - (event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const groundIntersects = raycaster.intersectObject(ground); if (groundIntersects.length > 0) { selectedObject.position.copy(groundIntersects[0].point.sub(offset)); }});window.addEventListener('mouseup', () => { selectedObject = null;});
16. Three.js中BufferGeometry如何添加顶点颜色？
解析：BufferGeometry通过设置color属性，为每个顶点分配颜色，最终通过材质渲染显示，步骤如下：
const geometry = new THREE.BufferGeometry();const positions = new Float32Array([ -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 0.0, 1.0, 0.0 ]);const colors = new Float32Array([ 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0 ]);geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));const material = new THREE.MeshStandardMaterial({ vertexColors: true, side: THREE.DoubleSide });const mesh = new THREE.Mesh(geometry, material);scene.add(mesh);
17. Three.js中如何实现全屏渲染？
解析：借助浏览器的Fullscreen API，结合Three.js渲染器，实现全屏/退出全屏功能：
function toggleFullscreen() { const canvas = renderer.domElement; if (!document.fullscreenElement) { canvas.requestFullscreen().catch(err => { console.error('无法进入全屏：', err); }); } else { document.exitFullscreen(); }}canvas.addEventListener('click', toggleFullscreen);document.addEventListener('fullscreenchange', () => { if (document.fullscreenElement) { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); } else { renderer.setSize(800, 600); camera.aspect = 800 / 600; camera.updateProjectionMatrix(); }});
18. Three.js中什么是材质的side属性？有哪些取值？
解析：side属性用于控制几何体的渲染面（正面、背面、双面），默认只渲染正面，避免因模型面朝向错误导致无法显示： 1. 取值及作用： – THREE.FrontSide（默认）：只渲染几何体的正面（朝向相机的面）。 – THREE.BackSide：只渲染几何体的背面。 – THREE.DoubleSide：双面渲染，正面和背面都渲染，适合薄物体（如纸张、树叶）。 2. 实战示例：const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, side: THREE.DoubleSide // 双面渲染});易错点：双面渲染会增加渲染开销，非必要不开启；若模型只显示黑色/空白，可能是面朝向错误，可尝试设置side为DoubleSide排查问题。
19. Three.js中如何实现粒子效果的颜色渐变？
解析：核心两种方式，根据粒子数量和性能需求选择： 1. 顶点颜色渐变（适合少量粒子，CPU驱动）：
const particleCount = 1000;const geometry = new THREE.BufferGeometry();const positions = new Float32Array(particleCount * 3);const colors = new Float32Array(particleCount * 3);for (let i = 0; i < particleCount * 3; i += 3) { positions[i] = (Math.random() - 0.5) * 200; positions[i + 1] = (Math.random() - 0.5) * 200; positions[i + 2] = (Math.random() - 0.5) * 200; const color = new THREE.Color(); color.setHSL(0.6 * (positions[i] / 200 + 0.5), 1.0, 0.5); colors[i] = color.r; colors[i + 1] = color.g; colors[i + 2] = color.b;}geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));const material = new THREE.PointsMaterial({ size: 3, vertexColors: true, transparent: true});const particles = new THREE.Points(geometry, material);scene.add(particles);
2. Shader着色器渐变（适合大量粒子，GPU驱动，性能更优）：通过片元着色器根据粒子位置计算颜色，实现渐变效果。
20. Three.js中如何导出3D场景为图片？
解析：利用Three.js渲染器的domElement（Canvas元素），结合Canvas的toDataURL方法，将场景渲染结果导出为图片：
function exportSceneAsImage() { renderer.render(scene, camera); const dataURL = renderer.domElement.toDataURL('image/png'); const a = document.createElement('a'); a.href = dataURL; a.download = 'threejs-scene.png'; a.click();}document.getElementById('exportBtn').addEventListener('click', exportSceneAsImage);
注意：若场景中有透明效果，导出时需确保renderer的preserveDrawingBuffer属性设为true，否则透明部分可能异常。
21. Three.js中什么是LOD？简单说明其作用（基础版）
解析：LOD（Level of Detail，细节层次）是一种性能优化技术，核心思想是：根据物体与相机的距离，切换不同精度的模型——物体离相机越近，使用高精度模型（高模），保证显示效果；物体离相机越远，使用低精度模型（低模），减少渲染开销。作用：在不明显降低视觉效果的前提下，减少场景中顶点数量和Draw Call，提升大规模3D场景（如城市可视化、游戏）的渲染性能。
22. Three.js中如何实现文字渲染？
解析：Three.js本身不支持直接渲染文字，需借助外部库或Canvas纹理实现，两种常用方式： 1. Canvas纹理文字（简单易实现，适合静态文字）：
const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = 256;canvas.height = 64;context.font = '48px Arial';context.fillStyle = '#ffffff';context.textAlign = 'center';context.fillText('Three.js', canvas.width / 2, canvas.height / 2);const texture = new THREE.CanvasTexture(canvas);const geometry = new THREE.PlaneGeometry(5, 1.2);const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });const textMesh = new THREE.Mesh(geometry, material);scene.add(textMesh);
2. 外部库（如Troika Text）：适合动态文字、复杂文字排版，支持3D文字、文字弯曲等效果，需单独导入库。
23. Three.js中如何检测物体之间的碰撞？
解析：Three.js无内置碰撞检测函数，需手动实现，两种常用方式（从简单到复杂）： 1. 包围盒碰撞（简单高效，适合规则物体）：为每个物体创建包围盒（Box3），检测两个包围盒是否重叠。
function createBoundingBox(object) { const box = new THREE.Box3(); box.setFromObject(object); return box;}function checkCollision(obj1, obj2) { const box1 = createBoundingBox(obj1); const box2 = createBoundingBox(obj2); return box1.intersectsBox(box2); }if (checkCollision(cube1, cube2)) { console.log('物体碰撞！');}
2. 射线检测碰撞（精准，适合不规则物体）：通过射线检测物体之间的交点，判断是否碰撞（类似物体拾取）。
24. Three.js中renderer的antialias属性作用是什么？
解析：antialias（抗锯齿）属性用于减少场景中物体边缘的锯齿感，让画面更平滑： 1. 作用：开启抗锯齿后，渲染器会对物体边缘的像素进行混合处理，避免出现明显的“锯齿边”，提升视觉体验。 2. 开启方式：const renderer = new THREE.WebGLRenderer({ antialias: true }); // 开启抗锯齿注意：开启抗锯齿会增加GPU渲染开销，性能较低的设备（如手机）可根据需求关闭，平衡性能和视觉效果。
25. Three.js中如何设置物体的层级关系？
解析：通过Group（组）或直接设置parent属性，实现物体的层级管理，方便批量操作（如平移、旋转整个组）： 1. 使用Group（推荐，适合批量管理）：
const group = new THREE.Group();const cube1 = new THREE.Mesh(geometry, material);const cube2 = new THREE.Mesh(geometry, material);cube2.position.x = 2;group.add(cube1, cube2);scene.add(group);group.rotation.y += 0.01;
2. 直接设置parent属性（适合简单层级）：cube2.parent = cube1;
// cube2成为cube1的子物体，cube1旋转时cube2也会跟随旋转
26. Three.js中如何实现雾效？
解析：Three.js提供两种雾效，通过场景的fog属性设置，营造远距离模糊的氛围： 1. 线性雾（LinearFog）：雾的浓度随距离线性变化，适合模拟户外雾效。// 线性雾：颜色、近距离（开始起雾）、远距离（完全雾遮）scene.fog = new THREE.LinearFog(0xffffff, 10, 50); // 白色雾，10单位开始起雾，50单位完全遮罩 2. 指数雾（FogExp2）：雾的浓度随距离指数变化，更接近真实雾效，浓度增长更快。// 指数雾：颜色、浓度（值越大，雾越浓）scene.fog = new THREE.FogExp2(0xcccccc, 0.02);注意：雾效会影响整个场景的渲染，需根据场景氛围合理配置颜色和浓度。
27. Three.js中如何重置场景？（清除所有物体、灯光等）
解析：通过遍历场景的children，逐个移除并销毁物体、灯光等资源，避免内存泄漏：
function resetScene() { scene.traverse((obj) => { if (obj.isMesh) { obj.geometry.dispose(); obj.material.dispose(); if (obj.material.map) obj.material.map.dispose(); } scene.remove(obj); }); scene.fog = null; scene.background = null;}
28. Three.js中什么是骨骼动画？简单说明应用场景
解析：骨骼动画（SkinnedMesh）是一种用于模拟人物、动物、机械等复杂物体运动的动画方式，核心是通过“骨骼”控制模型的形变： 1. 原理：将模型绑定到一套骨骼系统上，通过控制骨骼的旋转、平移，带动模型顶点移动，实现自然的形变（如人物走路、手臂摆动）。 2. 应用场景：人物角色动画（如游戏角色、虚拟人）、机械关节运动（如机器人手臂）、动物运动（如鸟类飞行）等。补充：Three.js通过SkinnedMesh类实现骨骼动画，通常配合GLTF/GLB模型加载（模型中包含骨骼动画数据）。
29. Three.js中如何实现视角切换？（如从第一人称切换到第三人称）
解析：核心是修改相机的位置和目标点（lookAt），实现不同视角切换，示例如下（第一人称→第三人称）：
function setFirstPersonView() { camera.position.copy(cube.position); camera.lookAt(0, 0, 0); }function setThirdPersonView() { camera.position.set(cube.position.x, cube.position.y + 2, cube.position.z + 5); camera.lookAt(cube.position); }document.getElementById('firstPersonBtn').addEventListener('click', setFirstPersonView);document.getElementById('thirdPersonBtn').addEventListener('click', setThirdPersonView);
30. Three.js的优势和局限性分别是什么？
解析：结合实战场景，客观说明优势和局限性，体现对框架的深入理解：优势： 1. 封装完善，API友好，上手门槛低，无需深入掌握WebGL底层，就能快速开发3D场景。 2. 生态完善，有大量插件、工具（如加载器、控制器），支持多种模型格式、纹理、动画效果。 3. 跨平台兼容性好，支持主流浏览器，可用于网页、移动端H5、小程序等场景。 4. 开源免费，社区活跃，问题易排查，更新迭代快。局限性： 1. 性能上限有限，大规模场景（如10万+顶点、大量粒子）下，渲染性能可能不足，需手动优化。 2. 底层封装较深，若需自定义复杂Shader、底层渲染逻辑，不如直接使用WebGL灵活。 3. 对移动端性能要求较高，低端手机可能出现卡顿、掉帧。
✨ 本期总结：基础篇30题覆盖Three.js核心API、场景搭建、模型纹理、动画交互、基础优化，是入门3D可视化面试的“敲门砖”。下期将聚焦Three.js进阶考点（性能优化、工程结合、复杂效果），难度升级，帮你拉开与新手的差距，记得关注！
评论0