🎮 3D图形开发 - THREEJS

What is Three.js? What role does it play in Web 3D development?

考察点：Three.js基础概念。

答案：

Three.js是一个基于WebGL的JavaScript 3D图形库，它简化了在Web浏览器中创建和显示3D内容的过程。Three.js封装了复杂的WebGL API，为开发者提供了更高级、更友好的接口来创建3D场景、几何体、材质、光照和动画。

核心作用：

• WebGL抽象化：将复杂的WebGL底层API封装成简单易用的JavaScript接口
• 跨浏览器兼容：处理不同浏览器对WebGL支持的差异性
• 性能优化：提供高效的渲染管线和优化策略
• 丰富的功能模块：内置大量几何体、材质、光源、相机等组件

主要特点：

1. 场景图管理：提供完整的3D场景组织结构
2. 材质系统：支持多种材质类型，从基础到物理渲染
3. 动画系统：内置补间动画和骨骼动画支持
4. 加载器生态：支持多种3D模型格式导入

适用场景：

• 3D产品展示和配置器
• 数据可视化和图表
• 在线3D游戏和互动体验
• 虚拟现实(VR)和增强现实(AR)应用
• 建筑和工程可视化

实际应用：

• 电商网站的3D产品预览
• 在线地图的3D模式
• 科学数据的3D可视化
• Web端的3D建模工具

What are the core components of Three.js? What are the relationships between them?

考察点：核心架构理解。

答案：

Three.js的核心架构基于经典的3D图形渲染管线，主要包含四个核心组件：场景(Scene)、相机(Camera)、渲染器(Renderer)和对象(Object3D)。这些组件协同工作，形成完整的3D渲染流程。

核心组件：

1. Scene（场景）

const scene = new THREE.Scene();
// 场景是所有3D对象的容器
scene.add(mesh); // 添加网格对象
scene.add(light); // 添加光源

2. Camera（相机）

// 透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

3. Renderer（渲染器）

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

4. Object3D（3D对象）

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

组件关系：

• Scene → Object3D：场景包含所有3D对象（网格、光源、相机等）
• Camera → Scene：相机观察场景中的内容，决定视角和投影方式
• Renderer → Scene + Camera：渲染器将相机视角下的场景内容渲染到画布
• Object3D → Geometry + Material：3D对象由几何体和材质组成

渲染流程：

1. 创建场景和相机
2. 创建几何体、材质和网格对象
3. 将对象添加到场景中
4. 渲染器将相机视角下的场景渲染到屏幕

How to create a basic 3D scene in Three.js?

考察点：基础场景搭建。

答案：

创建基本3D场景需要遵循Three.js的标准流程：场景→相机→渲染器→对象→渲染循环。这是所有Three.js应用的基础模板。

基本步骤：

1. 初始化核心组件

// 创建场景
const scene = new THREE.Scene();

// 创建相机 (视野角度, 宽高比, 近裁剪面, 远裁剪面)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2. 创建3D对象

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});

// 创建网格（几何体+材质）
const cube = new THREE.Mesh(geometry, material);

// 添加到场景
scene.add(cube);

3. 设置相机位置

camera.position.z = 5;

4. 创建渲染循环

function animate() {
    requestAnimationFrame(animate);
    
    // 添加旋转动画
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    // 渲染场景
    renderer.render(scene, camera);
}
animate();

完整示例：

// 完整的基础场景代码
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);
camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

注意事项：

• 确保正确设置相机的宽高比
• 合理设置近远裁剪面避免渲染问题
• 使用requestAnimationFrame创建平滑动画
• 及时清理资源避免内存泄漏

What are the commonly used geometries in Three.js? How to create and use them?

考察点：几何体应用。

答案：

Three.js提供了丰富的内置几何体类型，从基础的立方体到复杂的参数化曲面。几何体定义了3D对象的形状和顶点信息，是构建3D场景的基础元素。

常用几何体类型：

1. 基础几何体

// 立方体几何体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1); // 宽、高、深

// 球体几何体  
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32); // 半径、水平分段、垂直分段

// 平面几何体
const planeGeometry = new THREE.PlaneGeometry(1, 1, 32, 32); // 宽、高、宽度分段、高度分段

// 圆柱体几何体
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32); // 顶部半径、底部半径、高度、径向分段

2. 高级几何体

// 圆环几何体
const torusGeometry = new THREE.TorusGeometry(1, 0.3, 16, 100); // 环半径、管半径、径向分段、管向分段

// 圆锥几何体
const coneGeometry = new THREE.ConeGeometry(1, 2, 32); // 底面半径、高度、径向分段

// 十二面体几何体
const dodecahedronGeometry = new THREE.DodecahedronGeometry(1); // 半径

3. 自定义几何体

// 使用BufferGeometry创建自定义几何体
const customGeometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0
]);
customGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

使用几何体：

// 创建网格对象
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const mesh = new THREE.Mesh(geometry, material);

// 添加到场景
scene.add(mesh);

// 几何体变换
mesh.scale.set(2, 1, 1); // 缩放
mesh.rotation.x = Math.PI / 4; // 旋转
mesh.position.set(1, 0, 0); // 位移

性能优化：

• 合理控制分段数：过多分段影响性能
• 复用几何体：相同形状可复用同一几何体
• 及时释放：不使用时调用 geometry.dispose() 释放内存

实际应用：

• 产品展示：BoxGeometry用于包装盒、SphereGeometry用于球类产品
• 建筑可视化：PlaneGeometry用于地面、CylinderGeometry用于柱子
• 游戏开发：各种几何体组合创建复杂模型
• 数据可视化：几何体形状映射数据维度

What is Material? What are the commonly used material types in Three.js?

考察点：材质系统理解。

答案：

材质（Material）决定了3D对象的外观表现，包括颜色、纹理、反射、透明度等视觉属性。材质与几何体结合形成网格对象，是Three.js渲染系统的核心组成部分。材质实际上是着色器程序的高级封装。

常用材质类型：

1. 基础材质

// MeshBasicMaterial - 不受光照影响的基础材质
const basicMaterial = new THREE.MeshBasicMaterial({
    color: 0xff0000,        // 颜色
    wireframe: true,        // 线框模式
    transparent: true,      // 透明
    opacity: 0.5           // 透明度
});

// MeshNormalMaterial - 法向量材质，用于调试
const normalMaterial = new THREE.MeshNormalMaterial();

2. 光照材质

// MeshLambertMaterial - 漫反射材质
const lambertMaterial = new THREE.MeshLambertMaterial({
    color: 0x00ff00,
    emissive: 0x004400      // 自发光颜色
});

// MeshPhongMaterial - 高光材质
const phongMaterial = new THREE.MeshPhongMaterial({
    color: 0x0000ff,
    specular: 0x111111,     // 高光颜色
    shininess: 100          // 高光强度
});

3. 物理材质

// MeshStandardMaterial - 基于物理的标准材质
const standardMaterial = new THREE.MeshStandardMaterial({
    color: 0x806060,
    metalness: 0.2,         // 金属度
    roughness: 0.8          // 粗糙度
});

// MeshPhysicalMaterial - 高级物理材质
const physicalMaterial = new THREE.MeshPhysicalMaterial({
    color: 0xffffff,
    metalness: 0,
    roughness: 0,
    clearcoat: 1.0,         // 清漆层
    clearcoatRoughness: 0.1
});

4. 纹理材质

// 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');

const texturedMaterial = new THREE.MeshStandardMaterial({
    map: texture,           // 漫反射贴图
    normalMap: normalTexture, // 法向贴图
    roughnessMap: roughnessTexture // 粗糙度贴图
});

材质属性配置：

const material = new THREE.MeshStandardMaterial({
    // 基础属性
    color: 0xffffff,        // 基础颜色
    transparent: false,     // 是否透明
    opacity: 1.0,          // 透明度
    side: THREE.FrontSide, // 渲染面（前面/后面/双面）
    
    // 物理属性
    metalness: 0.0,        // 金属度 (0-1)
    roughness: 1.0,        // 粗糙度 (0-1)
    
    // 纹理贴图
    map: null,             // 颜色贴图
    normalMap: null,       // 法向贴图
    envMap: null           // 环境贴图
});

性能考虑：

• 材质复杂度：物理材质比基础材质计算开销大
• 纹理优化：合理压缩纹理尺寸和格式
• 材质复用：相同材质可以复用实例

适用场景：

• MeshBasicMaterial：UI元素、不需要光照的简单对象
• MeshStandardMaterial：现实物体模拟，平衡效果和性能
• MeshPhysicalMaterial：高质量渲染，汽车、珠宝等精细模型

How to add and control light sources in Three.js?

考察点：光照系统基础。

答案：

光源是Three.js中实现逼真渲染效果的关键要素。不同类型的光源模拟现实世界中的各种光照情况，与材质配合产生丰富的视觉效果。只有使用光照材质（如MeshLambertMaterial、MeshPhongMaterial等）的对象才会受到光源影响。

常用光源类型：

1. 环境光（AmbientLight）

// 环境光 - 均匀照亮所有对象
const ambientLight = new THREE.AmbientLight(0x404040, 0.6); // 颜色, 强度
scene.add(ambientLight);

2. 方向光（DirectionalLight）

// 方向光 - 模拟太阳光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1); // 设置光源方向
directionalLight.target.position.set(0, 0, 0); // 设置照射目标
scene.add(directionalLight);
scene.add(directionalLight.target);

3. 点光源（PointLight）

// 点光源 - 模拟灯泡
const pointLight = new THREE.PointLight(0xff6600, 1, 100); // 颜色, 强度, 距离
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

// 添加光源辅助器可视化光源位置
const pointLightHelper = new THREE.PointLightHelper(pointLight, 1);
scene.add(pointLightHelper);

4. 聚光灯（SpotLight）

// 聚光灯 - 模拟手电筒或舞台灯
const spotLight = new THREE.SpotLight(0xffffff, 1, 100, Math.PI / 6, 0.25, 1);
// 颜色, 强度, 距离, 角度, 边缘模糊度, 衰减度
spotLight.position.set(0, 10, 0);
spotLight.target.position.set(0, 0, 0);
scene.add(spotLight);
scene.add(spotLight.target);

光源控制技巧：

1. 动态光源控制

// 动画控制光源
function animateLight() {
    const time = Date.now() * 0.001;
    pointLight.position.x = Math.cos(time) * 10;
    pointLight.position.z = Math.sin(time) * 10;
    pointLight.intensity = Math.sin(time * 2) * 0.5 + 0.5;
}

2. 光源阴影设置

// 开启渲染器阴影
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

// 光源投射阴影
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;

// 对象接收和投射阴影
mesh.castShadow = true;    // 投射阴影
floor.receiveShadow = true; // 接收阴影

3. 光源性能优化

// 限制光源影响范围
pointLight.distance = 50; // 设置衰减距离
pointLight.decay = 2;     // 设置衰减率

// 合理设置阴影质量
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 25;

典型光照设置：

// 三点光照法 - 经典摄影布光
const keyLight = new THREE.DirectionalLight(0xffffff, 1);    // 主光
const fillLight = new THREE.DirectionalLight(0x8888ff, 0.3); // 补光  
const backLight = new THREE.DirectionalLight(0xff8888, 0.2); // 背光

keyLight.position.set(2, 2, 1);
fillLight.position.set(-1, 1, 1);
backLight.position.set(0, 0, -1);

scene.add(keyLight, fillLight, backLight);
scene.add(new THREE.AmbientLight(0x404040, 0.1)); // 微弱环境光

适用场景：

• 室内场景：点光源模拟灯具，环境光模拟反射光
• 室外场景：方向光模拟太阳，环境光模拟天空光
• 产品展示：聚光灯突出重点，多光源营造氛围
• 游戏开发：动态光源增加沉浸感

What types of cameras are there in Three.js? What are their characteristics?

考察点：相机系统理解。

答案：

相机定义了观察3D世界的视角和投影方式，是Three.js渲染管线的关键组件。不同类型的相机适用于不同的应用场景，影响最终的视觉效果和用户体验。

主要相机类型：

1. 透视相机（PerspectiveCamera）

// 透视相机 - 模拟人眼视觉
const camera = new THREE.PerspectiveCamera(
    75,                                    // fov: 视野角度（度）
    window.innerWidth / window.innerHeight, // aspect: 宽高比
    0.1,                                   // near: 近裁剪面
    1000                                   // far: 远裁剪面
);
camera.position.set(0, 0, 5);

透视相机特点：

• 近大远小：符合人眼透视规律
• 视角真实：适合第一人称、第三人称视角
• 景深效果：远近物体有明显的大小变化
• 应用场景：游戏、VR/AR、产品展示

2. 正交相机（OrthographicCamera）

// 正交相机 - 平行投影
const frustumSize = 10;
const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(
    -frustumSize * aspect / 2,  // left
     frustumSize * aspect / 2,  // right
     frustumSize / 2,           // top
    -frustumSize / 2,           // bottom
     0.1,                       // near
     1000                       // far
);
camera.position.set(0, 0, 5);

正交相机特点：

• 平行投影：物体大小不随距离变化
• 无透视变形：保持物体真实比例
• 工程精度：测量和建模应用首选
• 应用场景：CAD软件、建筑设计、2D游戏

相机控制技术：

1. 相机移动和旋转

// 基础变换
camera.position.set(x, y, z);     // 设置位置
camera.rotation.set(x, y, z);     // 设置旋转
camera.lookAt(target);            // 看向目标点

// 围绕目标旋转
const target = new THREE.Vector3(0, 0, 0);
camera.position.x = Math.cos(angle) * radius;
camera.position.z = Math.sin(angle) * radius;
camera.lookAt(target);

2. 相机控制器

// OrbitControls - 轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;    // 启用阻尼
controls.dampingFactor = 0.1;     // 阻尼系数
controls.enableZoom = true;       // 启用缩放

// FlyControls - 飞行控制器  
import { FlyControls } from 'three/examples/jsm/controls/FlyControls.js';
const flyControls = new FlyControls(camera, renderer.domElement);
flyControls.movementSpeed = 10;
flyControls.rollSpeed = Math.PI / 24;

3. 相机动画

// 使用Tween.js实现平滑相机动画
import * as TWEEN from '@tweenjs/tween.js';

function animateCamera(targetPosition, targetLookAt) {
    new TWEEN.Tween(camera.position)
        .to(targetPosition, 1000)
        .easing(TWEEN.Easing.Quadratic.Out)
        .start();
        
    new TWEEN.Tween(controls.target)
        .to(targetLookAt, 1000)
        .easing(TWEEN.Easing.Quadratic.Out)
        .start();
}

相机参数优化：

1. 视野角度调整

// 广角镜头效果 (FOV > 75)
camera.fov = 90; // 更宽视野，边缘可能有畸变

// 长焦镜头效果 (FOV < 50)  
camera.fov = 35; // 较窄视野，更适合特写
camera.updateProjectionMatrix(); // 更新投影矩阵

2. 裁剪面优化

// 合理设置近远裁剪面
camera.near = 0.1;    // 过小可能产生Z-fighting
camera.far = 1000;    // 过大影响深度精度
camera.updateProjectionMatrix();

响应式相机设置：

// 窗口大小变化时更新相机
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);

应用场景对比：

• 产品展示：透视相机 + OrbitControls，自由观察产品
• 建筑设计：正交相机，保持尺寸准确性
• 游戏开发：透视相机 + 自定义控制，沉浸式体验
• 数据可视化：根据数据特点选择合适的投影方式

How to load external 3D models in Three.js?

考察点：模型加载机制。

答案：

Three.js支持多种3D模型格式的加载，通过不同的加载器（Loader）处理各种格式文件。模型加载是构建复杂3D场景的重要技术，涉及异步加载、材质处理、性能优化等多个方面。

常用模型格式和加载器：

1. GLTF/GLB格式（推荐）

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();

// 基础加载
loader.load(
    'path/to/model.gltf',
    function (gltf) {
        // 成功回调
        scene.add(gltf.scene);
        
        // 访问模型组件
        const model = gltf.scene;
        const animations = gltf.animations;
        const cameras = gltf.cameras;
    },
    function (progress) {
        // 进度回调
        console.log('Loading progress:', progress.loaded / progress.total * 100 + '%');
    },
    function (error) {
        // 错误回调
        console.error('Loading error:', error);
    }
);

2. OBJ格式

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';

// 先加载材质文件（可选）
const mtlLoader = new MTLLoader();
mtlLoader.load('path/to/model.mtl', function(materials) {
    materials.preload();
    
    const objLoader = new OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.load('path/to/model.obj', function(object) {
        scene.add(object);
    });
});

3. FBX格式

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';

const fbxLoader = new FBXLoader();
fbxLoader.load('path/to/model.fbx', function(object) {
    // FBX模型通常需要调整缩放
    object.scale.setScalar(0.01);
    scene.add(object);
});

加载器配置和优化：

1. 添加加载管理器

import { LoadingManager } from 'three';

const manager = new LoadingManager();

// 监听加载事件
manager.onStart = function(url, itemsLoaded, itemsTotal) {
    console.log('Started loading:', url);
};

manager.onLoad = function() {
    console.log('All assets loaded');
    // 隐藏加载界面，开始渲染
};

manager.onProgress = function(url, itemsLoaded, itemsTotal) {
    console.log('Loading progress:', itemsLoaded / itemsTotal * 100 + '%');
};

manager.onError = function(url) {
    console.error('Loading error:', url);
};

// 使用管理器
const loader = new GLTFLoader(manager);

2. 纹理路径配置

// 设置纹理路径
loader.setPath('models/');
loader.load('mymodel.gltf', function(gltf) {
    scene.add(gltf.scene);
});

模型后处理：

1. 模型变换

loader.load('model.gltf', function(gltf) {
    const model = gltf.scene;
    
    // 缩放调整
    model.scale.setScalar(2);
    
    // 位置调整
    model.position.set(0, -1, 0);
    
    // 旋转调整
    model.rotation.y = Math.PI;
    
    // 遍历模型子对象
    model.traverse(function(child) {
        if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });
    
    scene.add(model);
});

2. 动画处理

let mixer;
loader.load('animated-model.gltf', function(gltf) {
    scene.add(gltf.scene);
    
    // 创建动画混合器
    if (gltf.animations.length > 0) {
        mixer = new THREE.AnimationMixer(gltf.scene);
        
        // 播放第一个动画
        const action = mixer.clipAction(gltf.animations[0]);
        action.play();
    }
});

// 在渲染循环中更新动画
function animate() {
    if (mixer) {
        mixer.update(clock.getDelta());
    }
    renderer.render(scene, camera);
}

性能优化策略：

1. 模型压缩

// 使用Draco压缩
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('js/libs/draco/');
loader.setDRACOLoader(dracoLoader);

2. 渐进式加载

// 先加载低精度模型，再替换高精度模型
loader.load('low-res-model.gltf', function(gltf) {
    scene.add(gltf.scene);
    
    // 后台加载高精度模型
    loader.load('high-res-model.gltf', function(highResGltf) {
        scene.remove(gltf.scene);
        scene.add(highResGltf.scene);
    });
});

错误处理和调试：

loader.load(
    'model.gltf',
    function(gltf) {
        // 检查模型完整性
        if (!gltf.scene) {
            console.error('Model scene is empty');
            return;
        }
        
        // 输出模型信息用于调试
        console.log('Model loaded:', {
            scene: gltf.scene,
            animations: gltf.animations.length,
            materials: gltf.materials?.length || 0
        });
        
        scene.add(gltf.scene);
    },
    undefined,
    function(error) {
        console.error('Model loading failed:', error);
        // 加载备用模型或显示错误提示
    }
);

实际应用：

• 电商展示：产品3D模型展示和交互
• 游戏开发：角色和场景资源加载
• 建筑可视化：BIM模型导入和渲染
• 教育培训：交互式3D教学模型

How to implement basic animation effects in Three.js?

考察点：动画基础。

答案：

Three.js动画系统基于时间循环和属性插值，通过持续更新对象属性创建流畅的动画效果。动画是3D交互体验的核心要素，从简单的旋转到复杂的骨骼动画都有对应的实现方法。

基本动画实现方式：

1. 手动动画（直接属性修改）

let cube;
const clock = new THREE.Clock();

function animate() {
    requestAnimationFrame(animate);
    
    const elapsedTime = clock.getElapsedTime();
    
    // 旋转动画
    cube.rotation.x = elapsedTime * 0.5;
    cube.rotation.y = elapsedTime * 0.3;
    
    // 位置动画（正弦波）
    cube.position.y = Math.sin(elapsedTime * 2) * 2;
    
    // 缩放动画
    const scale = 1 + Math.sin(elapsedTime * 3) * 0.3;
    cube.scale.setScalar(scale);
    
    renderer.render(scene, camera);
}
animate();

2. Tween.js补间动画

import * as TWEEN from '@tweenjs/tween.js';

// 位置补间动画
function animatePosition(object, targetPosition, duration = 1000) {
    new TWEEN.Tween(object.position)
        .to(targetPosition, duration)
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(() => {
            // 动画更新回调
        })
        .onComplete(() => {
            console.log('Animation completed');
        })
        .start();
}

// 旋转补间动画
function animateRotation(object, targetRotation, duration = 1000) {
    new TWEEN.Tween(object.rotation)
        .to(targetRotation, duration)
        .easing(TWEEN.Easing.Elastic.Out)
        .start();
}

// 在渲染循环中更新Tween
function animate() {
    requestAnimationFrame(animate);
    TWEEN.update(); // 更新所有补间动画
    renderer.render(scene, camera);
}

// 使用示例
animatePosition(cube, {x: 5, y: 2, z: -3}, 2000);
animateRotation(cube, {x: 0, y: Math.PI, z: 0}, 1500);

3. Three.js内置动画系统

// 创建关键帧轨道
const positionKF = new THREE.VectorKeyframeTrack(
    '.position', 
    [0, 1, 2], 
    [0, 0, 0, 5, 0, 0, 0, 0, 0]
);

const scaleKF = new THREE.VectorKeyframeTrack(
    '.scale',
    [0, 1, 2],
    [1, 1, 1, 2, 2, 2, 1, 1, 1]
);

// 创建动画剪辑
const clip = new THREE.AnimationClip('Action', 2, [positionKF, scaleKF]);

// 创建动画混合器
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clip);
action.play();

// 更新动画
function animate() {
    requestAnimationFrame(animate);
    const delta = clock.getDelta();
    mixer.update(delta);
    renderer.render(scene, camera);
}

动画控制技术：

1. 动画链和序列

// 使用Tween.js创建动画序列
function createAnimationSequence(object) {
    // 第一个动画：移动
    const tween1 = new TWEEN.Tween(object.position)
        .to({x: 5, y: 0, z: 0}, 1000)
        .easing(TWEEN.Easing.Quadratic.Out);
    
    // 第二个动画：旋转
    const tween2 = new TWEEN.Tween(object.rotation)
        .to({x: 0, y: Math.PI, z: 0}, 800)
        .easing(TWEEN.Easing.Bounce.Out);
    
    // 第三个动画：缩放
    const tween3 = new TWEEN.Tween(object.scale)
        .to({x: 2, y: 2, z: 2}, 600)
        .easing(TWEEN.Easing.Elastic.InOut);
    
    // 链接动画
    tween1.chain(tween2);
    tween2.chain(tween3);
    
    // 启动序列
    tween1.start();
}

2. 相机动画

function animateCamera(targetPosition, targetLookAt) {
    // 相机位置动画
    new TWEEN.Tween(camera.position)
        .to(targetPosition, 2000)
        .easing(TWEEN.Easing.Cubic.InOut)
        .start();
    
    // 相机朝向动画（通过控制器target）
    if (controls) {
        new TWEEN.Tween(controls.target)
            .to(targetLookAt, 2000)
            .easing(TWEEN.Easing.Cubic.InOut)
            .start();
    }
}

3. 材质动画

function animateMaterial(material) {
    // 颜色动画
    const startColor = {r: 1, g: 0, b: 0};
    const endColor = {r: 0, g: 1, b: 1};
    
    new TWEEN.Tween(startColor)
        .to(endColor, 2000)
        .onUpdate(() => {
            material.color.setRGB(startColor.r, startColor.g, startColor.b);
        })
        .start();
    
    // 透明度动画
    new TWEEN.Tween(material)
        .to({opacity: 0.3}, 1000)
        .easing(TWEEN.Easing.Quadratic.InOut)
        .yoyo(true)
        .repeat(Infinity)
        .start();
}

性能优化：

1. 动画性能监控

const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
    stats.begin();
    
    // 渲染代码
    TWEEN.update();
    renderer.render(scene, camera);
    
    stats.end();
    requestAnimationFrame(animate);
}

2. 动画复用和池化

// 动画对象池
class AnimationPool {
    constructor() {
        this.pool = [];
        this.activeAnimations = [];
    }
    
    getTween() {
        return this.pool.pop() || new TWEEN.Tween();
    }
    
    returnTween(tween) {
        tween.stop();
        this.pool.push(tween);
    }
}

交互式动画：

// 鼠标悬停动画
function setupHoverAnimation(object) {
    const originalScale = object.scale.clone();
    
    object.userData.onMouseEnter = () => {
        new TWEEN.Tween(object.scale)
            .to({x: 1.2, y: 1.2, z: 1.2}, 200)
            .easing(TWEEN.Easing.Back.Out)
            .start();
    };
    
    object.userData.onMouseLeave = () => {
        new TWEEN.Tween(object.scale)
            .to(originalScale, 200)
            .easing(TWEEN.Easing.Back.Out)
            .start();
    };
}

实际应用：

• 产品展示：产品360度旋转、特写动画
• 数据可视化：图表数据变化的动画过渡
• 游戏开发：角色移动、技能效果动画
• 交互界面：按钮点击、页面切换动画效果

How to handle mouse interaction events in Three.js?

考察点：交互事件处理。

答案：

Three.js的交互事件处理基于射线投射（Raycasting）技术，将2D屏幕坐标转换为3D空间射线，检测与3D对象的交互。交互事件是实现沉浸式3D体验的关键技术。

射线投射基础：

1. 基本射线投射设置

// 创建射线投射器和鼠标坐标
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// 更新鼠标坐标（标准化到 -1 到 1）
function updateMousePosition(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

// 射线检测
function raycast() {
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children, true);
    
    if (intersects.length > 0) {
        const object = intersects[0].object;
        console.log('Hit object:', object);
        return intersects[0];
    }
    return null;
}

2. 鼠标事件处理

// 鼠标移动事件
renderer.domElement.addEventListener('mousemove', (event) => {
    updateMousePosition(event);
    
    const intersect = raycast();
    if (intersect) {
        // 悬停效果
        document.body.style.cursor = 'pointer';
        
        // 触发对象的悬停事件
        if (intersect.object.userData.onMouseEnter && !intersect.object.userData.isHovered) {
            intersect.object.userData.onMouseEnter();
            intersect.object.userData.isHovered = true;
        }
    } else {
        // 取消悬停效果
        document.body.style.cursor = 'default';
        
        // 清除所有对象的悬停状态
        scene.traverse((child) => {
            if (child.userData.isHovered) {
                if (child.userData.onMouseLeave) {
                    child.userData.onMouseLeave();
                }
                child.userData.isHovered = false;
            }
        });
    }
});

// 鼠标点击事件
renderer.domElement.addEventListener('click', (event) => {
    updateMousePosition(event);
    
    const intersect = raycast();
    if (intersect) {
        // 触发点击事件
        if (intersect.object.userData.onClick) {
            intersect.object.userData.onClick(intersect);
        }
    }
});

交互事件类型：

1. 对象选择和高亮

let selectedObject = null;
const originalMaterials = new Map();

function setupSelection() {
    renderer.domElement.addEventListener('click', (event) => {
        updateMousePosition(event);
        const intersect = raycast();
        
        if (intersect) {
            // 取消之前选择
            if (selectedObject) {
                selectedObject.material = originalMaterials.get(selectedObject);
            }
            
            // 选择新对象
            selectedObject = intersect.object;
            if (!originalMaterials.has(selectedObject)) {
                originalMaterials.set(selectedObject, selectedObject.material);
            }
            
            // 应用高亮材质
            selectedObject.material = new THREE.MeshBasicMaterial({
                color: 0xff6600,
                wireframe: true
            });
        }
    });
}

2. 拖拽功能

class DragControls {
    constructor(objects, camera, domElement) {
        this.objects = objects;
        this.camera = camera;
        this.domElement = domElement;
        this.raycaster = new THREE.Raycaster();
        this.mouse = new THREE.Vector2();
        this.isDragging = false;
        this.dragObject = null;
        this.dragPlane = new THREE.Plane();
        this.intersection = new THREE.Vector3();
        
        this.setupEvents();
    }
    
    setupEvents() {
        this.domElement.addEventListener('mousedown', this.onMouseDown.bind(this));
        this.domElement.addEventListener('mousemove', this.onMouseMove.bind(this));
        this.domElement.addEventListener('mouseup', this.onMouseUp.bind(this));
    }
    
    onMouseDown(event) {
        this.updateMouse(event);
        this.raycaster.setFromCamera(this.mouse, this.camera);
        
        const intersects = this.raycaster.intersectObjects(this.objects);
        if (intersects.length > 0) {
            this.isDragging = true;
            this.dragObject = intersects[0].object;
            
            // 设置拖拽平面
            this.dragPlane.setFromNormalAndCoplanarPoint(
                this.camera.getWorldDirection(new THREE.Vector3()),
                intersects[0].point
            );
        }
    }
    
    onMouseMove(event) {
        this.updateMouse(event);
        
        if (this.isDragging && this.dragObject) {
            this.raycaster.setFromCamera(this.mouse, this.camera);
            
            if (this.raycaster.ray.intersectPlane(this.dragPlane, this.intersection)) {
                this.dragObject.position.copy(this.intersection);
            }
        }
    }
    
    onMouseUp() {
        this.isDragging = false;
        this.dragObject = null;
    }
    
    updateMouse(event) {
        this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    }
}

// 使用拖拽控制器
const dragControls = new DragControls([cube, sphere], camera, renderer.domElement);

3. 对象信息显示

// 创建信息提示框
function createTooltip() {
    const tooltip = document.createElement('div');
    tooltip.style.position = 'absolute';
    tooltip.style.background = 'rgba(0,0,0,0.8)';
    tooltip.style.color = 'white';
    tooltip.style.padding = '5px 10px';
    tooltip.style.borderRadius = '3px';
    tooltip.style.pointerEvents = 'none';
    tooltip.style.display = 'none';
    document.body.appendChild(tooltip);
    return tooltip;
}

const tooltip = createTooltip();

renderer.domElement.addEventListener('mousemove', (event) => {
    updateMousePosition(event);
    const intersect = raycast();
    
    if (intersect && intersect.object.userData.info) {
        // 显示提示信息
        tooltip.style.display = 'block';
        tooltip.style.left = event.clientX + 10 + 'px';
        tooltip.style.top = event.clientY - 30 + 'px';
        tooltip.textContent = intersect.object.userData.info;
    } else {
        tooltip.style.display = 'none';
    }
});

高级交互技术：

1. 多点触控支持

// 触摸事件处理
renderer.domElement.addEventListener('touchstart', handleTouchStart);
renderer.domElement.addEventListener('touchmove', handleTouchMove);
renderer.domElement.addEventListener('touchend', handleTouchEnd);

function handleTouchStart(event) {
    if (event.touches.length === 1) {
        // 单点触摸，类似鼠标点击
        const touch = event.touches[0];
        updateMousePosition(touch);
        raycast();
    }
}

2. 性能优化

// 事件节流
function throttle(func, delay) {
    let timeoutId;
    let lastExecTime = 0;
    
    return function(...args) {
        const currentTime = Date.now();
        
        if (currentTime - lastExecTime > delay) {
            func.apply(this, args);
            lastExecTime = currentTime;
        } else {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                func.apply(this, args);
                lastExecTime = Date.now();
            }, delay - (currentTime - lastExecTime));
        }
    };
}

// 使用节流的鼠标移动事件
const throttledMouseMove = throttle((event) => {
    updateMousePosition(event);
    raycast();
}, 16); // 60 FPS

renderer.domElement.addEventListener('mousemove', throttledMouseMove);

对象交互状态管理：

// 为对象添加交互行为
function makeInteractive(object, options = {}) {
    object.userData.interactive = true;
    object.userData.onClick = options.onClick || (() => {});
    object.userData.onMouseEnter = options.onMouseEnter || (() => {});
    object.userData.onMouseLeave = options.onMouseLeave || (() => {});
    object.userData.info = options.info || '';
}

// 使用示例
makeInteractive(cube, {
    onClick: () => console.log('Cube clicked!'),
    onMouseEnter: () => cube.material.color.setHex(0xff0000),
    onMouseLeave: () => cube.material.color.setHex(0x00ff00),
    info: 'This is a cube'
});

实际应用：

• 产品配置器：点击选择配件、拖拽调整位置
• 3D地图：点击查看建筑信息、缩放导航
• 在线展厅：点击展品查看详情、虚拟漫游
• 教育应用：交互式3D模型解剖、组装演示

What is the rendering principle of Three.js? How does the rendering loop work?

考察点：渲染机制理解。

答案：

Three.js渲染原理基于现代图形渲染管线，通过WebGL与GPU通信，将3D场景转换为2D屏幕像素。渲染循环是实时3D应用的核心，负责连续更新和绘制场景内容。

渲染管线流程：

1. 几何处理阶段

// 顶点着色器处理
// 1. 模型变换（Model Transform）
object.matrixWorld.multiplyMatrices(parent.matrixWorld, object.matrix);

// 2. 视图变换（View Transform）  
camera.matrixWorldInverse.getInverse(camera.matrixWorld);

// 3. 投影变换（Projection Transform）
camera.projectionMatrix.makePerspective(fov, aspect, near, far);

// 4. 视口变换（Viewport Transform）
renderer.setViewport(x, y, width, height);

2. 光栅化和片元处理

// 片元着色器处理
// 1. 纹理采样
const texture = textureLoader.load('image.jpg');
material.map = texture;

// 2. 光照计算
const light = new THREE.DirectionalLight(0xffffff, 1);
material.needsUpdate = true; // 触发着色器重编译

// 3. 最终颜色输出
gl_FragColor = vec4(finalColor, opacity);

渲染循环架构：

1. 基础渲染循环

function renderLoop() {
    // 1. 请求下一帧
    requestAnimationFrame(renderLoop);
    
    // 2. 更新时间
    const deltaTime = clock.getDelta();
    const elapsedTime = clock.getElapsedTime();
    
    // 3. 更新场景对象
    updateScene(deltaTime);
    
    // 4. 更新动画
    if (mixer) {
        mixer.update(deltaTime);
    }
    
    // 5. 更新控制器
    if (controls) {
        controls.update();
    }
    
    // 6. 执行渲染
    renderer.render(scene, camera);
    
    // 7. 性能监控
    stats.update();
}

2. 多阶段渲染循环

class RenderManager {
    constructor(renderer, scene, camera) {
        this.renderer = renderer;
        this.scene = scene;
        this.camera = camera;
        this.renderTargets = [];
        this.postProcessing = [];
    }
    
    render() {
        // 阴影贴图渲染
        this.renderShadowMaps();
        
        // 主场景渲染
        this.renderMainScene();
        
        // 后期处理
        this.applyPostProcessing();
        
        // UI渲染
        this.renderUI();
    }
    
    renderShadowMaps() {
        // 渲染深度贴图用于阴影
        this.scene.traverse((child) => {
            if (child.isLight && child.castShadow) {
                this.renderer.setRenderTarget(child.shadow.map);
                this.renderer.render(this.scene, child.shadow.camera);
            }
        });
        this.renderer.setRenderTarget(null);
    }
    
    renderMainScene() {
        this.renderer.render(this.scene, this.camera);
    }
}

渲染优化技术：

1. 视锥剔除（Frustum Culling）

// Three.js自动进行视锥剔除
const frustum = new THREE.Frustum();
const cameraMatrix = new THREE.Matrix4();

function updateFrustum() {
    cameraMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
    frustum.setFromProjectionMatrix(cameraMatrix);
}

function isObjectVisible(object) {
    return frustum.containsPoint(object.position) || 
           frustum.intersectsBox(object.geometry.boundingBox);
}

2. 批量渲染

// 实例化渲染优化
const instancedGeometry = new THREE.InstancedBufferGeometry();
instancedGeometry.copy(baseGeometry);

// 设置实例属性
const instanceCount = 1000;
const instanceMatrix = new THREE.InstancedBufferAttribute(
    new Float32Array(instanceCount * 16), 16
);
instancedGeometry.setAttribute('instanceMatrix', instanceMatrix);

// 批量更新实例矩阵
for (let i = 0; i < instanceCount; i++) {
    const matrix = new THREE.Matrix4();
    matrix.setPosition(x, y, z);
    matrix.toArray(instanceMatrix.array, i * 16);
}
instanceMatrix.needsUpdate = true;

3. LOD（Level of Detail）系统

// 距离基础LOD
const lod = new THREE.LOD();
lod.addLevel(highDetailMesh, 0);    // 0-50 单位距离
lod.addLevel(mediumDetailMesh, 50); // 50-100 单位距离  
lod.addLevel(lowDetailMesh, 100);   // 100+ 单位距离

scene.add(lod);

// 在渲染循环中更新LOD
function updateLOD() {
    scene.traverse((child) => {
        if (child.isLOD) {
            child.update(camera);
        }
    });
}

渲染状态管理：

1. 渲染器状态

class RenderState {
    constructor() {
        this.currentProgram = null;
        this.currentGeometry = null;
        this.currentMaterial = null;
        this.drawCalls = 0;
        this.triangles = 0;
    }
    
    reset() {
        this.drawCalls = 0;
        this.triangles = 0;
    }
    
    update(info) {
        this.drawCalls = info.render.calls;
        this.triangles = info.render.triangles;
    }
}

const renderState = new RenderState();

// 渲染信息监控
function logRenderInfo() {
    const info = renderer.info;
    console.log({
        drawCalls: info.render.calls,
        triangles: info.render.triangles,
        geometries: info.memory.geometries,
        textures: info.memory.textures
    });
}

2. 渲染队列管理

// 自定义渲染顺序
scene.traverse((child) => {
    if (child.isMesh) {
        // 透明物体后渲染
        if (child.material.transparent) {
            child.renderOrder = 1000;
        }
        // 不透明物体先渲染
        else {
            child.renderOrder = 0;
        }
    }
});

多相机渲染：

function renderMultiCamera() {
    // 主视角渲染
    renderer.setViewport(0, 0, window.innerWidth * 0.7, window.innerHeight);
    renderer.render(scene, mainCamera);
    
    // 小地图渲染
    renderer.setViewport(
        window.innerWidth * 0.7, 
        window.innerHeight * 0.7, 
        window.innerWidth * 0.3, 
        window.innerHeight * 0.3
    );
    renderer.render(scene, miniMapCamera);
    
    // 重置视口
    renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
}

性能监控和调试：

// 渲染性能分析
class PerformanceMonitor {
    constructor() {
        this.frameTime = 0;
        this.fps = 0;
        this.lastTime = performance.now();
    }
    
    update() {
        const now = performance.now();
        this.frameTime = now - this.lastTime;
        this.fps = 1000 / this.frameTime;
        this.lastTime = now;
        
        // 性能警告
        if (this.fps < 30) {
            console.warn('Low FPS detected:', this.fps.toFixed(1));
        }
    }
}

实际应用：

• 游戏引擎：复杂场景的高效渲染管理
• 建筑可视化：大规模模型的分层渲染
• 数据可视化：实时数据的动态渲染更新
• VR应用：双眼分屏渲染和高帧率要求

How to implement complex material effects in Three.js? What is the role of shaders?

考察点：着色器应用。

答案：

着色器（Shader）是运行在GPU上的程序，负责控制3D对象的渲染效果。Three.js的内置材质实际上是预写好的着色器程序，而自定义着色器则可以实现各种复杂的视觉效果，是高级3D图形编程的核心技术。

着色器基础概念：

1. 着色器类型

• 顶点着色器（Vertex Shader）：处理顶点位置变换、法向量计算
• 片元着色器（Fragment Shader）：处理像素颜色、纹理采样、光照计算

2. GLSL语法基础

// 顶点着色器示例
attribute vec3 position;
attribute vec2 uv;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
varying vec2 vUv;

void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// 片元着色器示例  
uniform float time;
uniform vec3 color;
varying vec2 vUv;

void main() {
    float wave = sin(vUv.x * 10.0 + time) * 0.1;
    vec3 finalColor = color + vec3(wave);
    gl_FragColor = vec4(finalColor, 1.0);
}

Three.js中的自定义着色器：

1. ShaderMaterial基础用法

const shaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0.0 },
        color: { value: new THREE.Color(0xff6600) },
        texture1: { value: textureLoader.load('texture.jpg') }
    },
    vertexShader: `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        uniform float time;
        uniform vec3 color;
        uniform sampler2D texture1;
        varying vec2 vUv;
        
        void main() {
            vec4 texColor = texture2D(texture1, vUv);
            float wave = sin(vUv.y * 20.0 + time * 5.0) * 0.1 + 0.9;
            gl_FragColor = texColor * vec4(color * wave, 1.0);
        }
    `,
    transparent: true
});

// 在渲染循环中更新uniform
function animate() {
    shaderMaterial.uniforms.time.value = clock.getElapsedTime();
    renderer.render(scene, camera);
}

复杂材质效果实现：

1. 水面效果着色器

const waterMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 },
        waterColor: { value: new THREE.Color(0x0077be) },
        foamColor: { value: new THREE.Color(0xffffff) },
        normalMap: { value: normalTexture },
        envMap: { value: cubeTexture }
    },
    vertexShader: `
        varying vec2 vUv;
        varying vec3 vNormal;
        varying vec3 vPosition;
        uniform float time;
        
        void main() {
            vUv = uv;
            vNormal = normalize(normalMatrix * normal);
            
            // 顶点波浪动画
            vec3 pos = position;
            pos.z += sin(pos.x * 0.5 + time) * 0.1;
            pos.z += cos(pos.y * 0.3 + time * 0.7) * 0.05;
            
            vPosition = (modelViewMatrix * vec4(pos, 1.0)).xyz;
            gl_Position = projectionMatrix * vec4(vPosition, 1.0);
        }
    `,
    fragmentShader: `
        uniform float time;
        uniform vec3 waterColor;
        uniform vec3 foamColor;
        uniform sampler2D normalMap;
        uniform samplerCube envMap;
        
        varying vec2 vUv;
        varying vec3 vNormal;
        varying vec3 vPosition;
        
        void main() {
            // 动态法向贴图
            vec2 animUv = vUv + vec2(time * 0.01, time * 0.02);
            vec3 normalColor = texture2D(normalMap, animUv).rgb;
            vec3 normal = normalize(vNormal + (normalColor - 0.5) * 0.3);
            
            // 环境反射
            vec3 viewDir = normalize(-vPosition);
            vec3 reflectDir = reflect(-viewDir, normal);
            vec3 envColor = textureCube(envMap, reflectDir).rgb;
            
            // 菲涅尔效应
            float fresnel = pow(1.0 - dot(viewDir, normal), 3.0);
            
            // 泡沫效果
            float foam = sin(vUv.x * 50.0 + time * 3.0) * sin(vUv.y * 30.0 + time * 2.0);
            foam = smoothstep(0.7, 1.0, foam);
            
            vec3 finalColor = mix(waterColor, envColor, fresnel * 0.7);
            finalColor = mix(finalColor, foamColor, foam * 0.3);
            
            gl_FragColor = vec4(finalColor, 0.9);
        }
    `,
    transparent: true
});

2. 全息效果材质

const hologramMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 },
        glitchIntensity: { value: 0.1 },
        scanlineSpeed: { value: 2.0 },
        hologramColor: { value: new THREE.Color(0x00ffff) }
    },
    vertexShader: `
        varying vec2 vUv;
        varying vec3 vPosition;
        uniform float time;
        uniform float glitchIntensity;
        
        void main() {
            vUv = uv;
            
            // 顶点扰动产生全息不稳定效果
            vec3 pos = position;
            float glitch = sin(pos.y * 50.0 + time * 10.0) * glitchIntensity;
            pos.x += glitch * (sin(time * 7.0) * 0.5 + 0.5);
            
            vPosition = pos;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
        }
    `,
    fragmentShader: `
        uniform float time;
        uniform float scanlineSpeed;
        uniform vec3 hologramColor;
        
        varying vec2 vUv;
        varying vec3 vPosition;
        
        void main() {
            // 扫描线效果
            float scanline = sin(vUv.y * 100.0 + time * scanlineSpeed);
            scanline = smoothstep(0.0, 1.0, scanline);
            
            // 边缘光效
            float edge = 1.0 - smoothstep(0.0, 0.1, 
                min(min(vUv.x, 1.0 - vUv.x), min(vUv.y, 1.0 - vUv.y)));
            
            // 噪点效果
            float noise = fract(sin(dot(vUv + time, vec2(12.9898, 78.233))) * 43758.5453);
            
            // 组合效果
            float intensity = scanline * 0.5 + edge * 2.0 + noise * 0.1;
            vec3 finalColor = hologramColor * intensity;
            
            // 透明度基于强度
            float alpha = intensity * 0.8;
            
            gl_FragColor = vec4(finalColor, alpha);
        }
    `,
    transparent: true,
    side: THREE.DoubleSide,
    blending: THREE.AdditiveBlending
});

着色器优化技术：

1. Uniform缓存和批处理

class ShaderManager {
    constructor() {
        this.uniformCache = new Map();
        this.shaderPrograms = new Map();
    }
    
    updateUniforms(material, uniforms) {
        // 只更新变化的uniform
        Object.keys(uniforms).forEach(key => {
            const newValue = uniforms[key];
            const cachedValue = this.uniformCache.get(material.uuid + key);
            
            if (!this.isEqual(cachedValue, newValue)) {
                material.uniforms[key].value = newValue;
                this.uniformCache.set(material.uuid + key, newValue);
            }
        });
    }
    
    isEqual(a, b) {
        if (a instanceof THREE.Color && b instanceof THREE.Color) {
            return a.equals(b);
        }
        return a === b;
    }
}

2. 条件编译优化

function createShaderMaterial(options = {}) {
    let defines = '';
    
    if (options.useNormalMap) defines += '#define USE_NORMALMAP\n';
    if (options.useSpecularMap) defines += '#define USE_SPECULARMAP\n';
    if (options.useEnvironmentMap) defines += '#define USE_ENVMAP\n';
    
    const fragmentShader = `
        ${defines}
        
        uniform vec3 diffuse;
        
        #ifdef USE_NORMALMAP
        uniform sampler2D normalMap;
        #endif
        
        #ifdef USE_SPECULARMAP  
        uniform sampler2D specularMap;
        #endif
        
        void main() {
            vec3 color = diffuse;
            
            #ifdef USE_NORMALMAP
            // 法向贴图处理
            #endif
            
            gl_FragColor = vec4(color, 1.0);
        }
    `;
    
    return new THREE.ShaderMaterial({
        fragmentShader,
        // ... 其他配置
    });
}

后期处理着色器：

// 自定义后期处理Pass
class CustomPass extends THREE.Pass {
    constructor(uniforms = {}) {
        super();
        
        this.material = new THREE.ShaderMaterial({
            uniforms: {
                tDiffuse: { value: null },
                time: { value: 0 },
                ...uniforms
            },
            vertexShader: `
                varying vec2 vUv;
                void main() {
                    vUv = uv;
                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                }
            `,
            fragmentShader: `
                uniform sampler2D tDiffuse;
                uniform float time;
                varying vec2 vUv;
                
                void main() {
                    vec4 texel = texture2D(tDiffuse, vUv);
                    
                    // 色彩偏移效果
                    float offset = sin(time) * 0.01;
                    vec4 cr = texture2D(tDiffuse, vUv + vec2(offset, 0));
                    vec4 cga = texture2D(tDiffuse, vUv);
                    vec4 cb = texture2D(tDiffuse, vUv - vec2(offset, 0));
                    
                    gl_FragColor = vec4(cr.r, cga.ga, cb.b, 1.0);
                }
            `
        });
    }
    
    render(renderer, writeBuffer, readBuffer) {
        this.material.uniforms.tDiffuse.value = readBuffer.texture;
        this.material.uniforms.time.value = performance.now() * 0.001;
        
        renderer.setRenderTarget(writeBuffer);
        renderer.render(this.scene, this.camera);
    }
}

实际应用：

• 游戏开发：角色皮肤、武器特效、环境材质
• 产品可视化：金属、玻璃、布料等真实材质模拟
• 艺术创作：抽象效果、动态纹理、交互材质
• 科学可视化：数据映射到材质属性的可视化

How does the Scene Graph work in Three.js?

考察点：场景图机制。

答案：

场景图是一个树形的层次结构，用于组织和管理3D场景中的所有对象。每个节点代表一个3D对象，节点间的父子关系决定了变换的继承和对象的渲染顺序。场景图是现代3D引擎的核心架构模式。

场景图结构：

1. 基础层次结构

// 场景图示例
scene (Scene)
├── car (Group)
│   ├── body (Mesh)
│   ├── wheels (Group)  
│   │   ├── frontLeft (Mesh)
│   │   ├── frontRight (Mesh)
│   │   ├── rearLeft (Mesh)
│   │   └── rearRight (Mesh)
│   └── lights (Group)
│       ├── headlight1 (PointLight)
│       └── headlight2 (PointLight)
└── environment (Group)
    ├── ground (Mesh)
    └── skybox (Mesh)

2. 创建层次结构

// 创建汽车场景图
const car = new THREE.Group();
car.name = 'car';

// 车身
const bodyGeometry = new THREE.BoxGeometry(2, 0.5, 4);
const bodyMaterial = new THREE.MeshStandardMaterial({color: 0xff0000});
const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
body.name = 'body';

// 车轮组
const wheels = new THREE.Group();
wheels.name = 'wheels';

// 创建单个车轮
function createWheel() {
    const wheelGeometry = new THREE.CylinderGeometry(0.3, 0.3, 0.2, 12);
    const wheelMaterial = new THREE.MeshStandardMaterial({color: 0x333333});
    return new THREE.Mesh(wheelGeometry, wheelMaterial);
}

const frontLeft = createWheel();
frontLeft.position.set(-0.8, -0.5, 1.2);
frontLeft.rotation.z = Math.PI / 2;

const frontRight = createWheel();
frontRight.position.set(0.8, -0.5, 1.2);  
frontRight.rotation.z = Math.PI / 2;

// 构建层次关系
wheels.add(frontLeft, frontRight);
car.add(body, wheels);
scene.add(car);

变换继承机制：

1. 本地变换和世界变换

// 本地变换（相对于父对象）
car.position.set(5, 0, 0);      // 汽车位置
car.rotation.y = Math.PI / 4;   // 汽车旋转

wheels.rotation.x = 0.1;        // 车轮组旋转（相对于汽车）
frontLeft.rotation.y += 0.05;   // 前左轮旋转（相对于车轮组）

// 获取世界变换
car.updateMatrixWorld();
const worldPosition = new THREE.Vector3();
const worldRotation = new THREE.Quaternion();
const worldScale = new THREE.Vector3();

frontLeft.matrixWorld.decompose(worldPosition, worldRotation, worldScale);
console.log('前左轮世界坐标:', worldPosition);

2. 矩阵链式变换

// Three.js内部变换计算
function updateMatrixWorld(parent) {
    // 更新本地矩阵
    this.matrix.compose(this.position, this.quaternion, this.scale);
    
    // 计算世界矩阵
    if (parent) {
        this.matrixWorld.multiplyMatrices(parent.matrixWorld, this.matrix);
    } else {
        this.matrixWorld.copy(this.matrix);
    }
    
    // 递归更新子对象
    this.children.forEach(child => {
        child.updateMatrixWorld(this);
    });
}

场景图遍历：

1. 深度优先遍历

// 遍历场景图中的所有对象
function traverseScene(object, callback) {
    callback(object);
    
    object.children.forEach(child => {
        traverseScene(child, callback);
    });
}

// 使用Three.js内置traverse方法
scene.traverse((object) => {
    if (object.isMesh) {
        console.log('发现网格对象:', object.name);
        object.castShadow = true;
        object.receiveShadow = true;
    }
    
    if (object.isLight) {
        console.log('发现光源:', object.type);
    }
});

2. 条件遍历和过滤

// 按类型查找对象
function findObjectsByType(root, type) {
    const results = [];
    
    root.traverse((object) => {
        if (object.type === type || object.constructor.name === type) {
            results.push(object);
        }
    });
    
    return results;
}

// 按名称查找对象
function findObjectByName(root, name) {
    let result = null;
    
    root.traverse((object) => {
        if (object.name === name && !result) {
            result = object;
        }
    });
    
    return result;
}

// 使用示例
const allMeshes = findObjectsByType(scene, 'Mesh');
const carBody = findObjectByName(scene, 'body');

场景图管理：

1. 动态添加和移除

class SceneManager {
    constructor(scene) {
        this.scene = scene;
        this.objects = new Map();
    }
    
    addObject(id, object) {
        this.objects.set(id, object);
        this.scene.add(object);
        
        // 设置对象引用以便查找
        object.userData.id = id;
    }
    
    removeObject(id) {
        const object = this.objects.get(id);
        if (object) {
            this.scene.remove(object);
            this.objects.delete(id);
            
            // 清理资源
            this.disposeObject(object);
        }
    }
    
    disposeObject(object) {
        object.traverse((child) => {
            if (child.geometry) {
                child.geometry.dispose();
            }
            if (child.material) {
                if (Array.isArray(child.material)) {
                    child.material.forEach(mat => mat.dispose());
                } else {
                    child.material.dispose();
                }
            }
        });
    }
}

2. 层级管理

// 创建分层管理系统
class LayerManager {
    constructor() {
        this.layers = {
            background: new THREE.Group(),
            objects: new THREE.Group(), 
            ui: new THREE.Group(),
            effects: new THREE.Group()
        };
        
        // 设置渲染顺序
        this.layers.background.renderOrder = 0;
        this.layers.objects.renderOrder = 100;
        this.layers.ui.renderOrder = 200;
        this.layers.effects.renderOrder = 300;
    }
    
    addToLayer(layerName, object) {
        if (this.layers[layerName]) {
            this.layers[layerName].add(object);
        }
    }
    
    setLayerVisible(layerName, visible) {
        if (this.layers[layerName]) {
            this.layers[layerName].visible = visible;
        }
    }
}

性能优化：

1. 批量更新

// 批量更新对象变换
class BatchUpdater {
    constructor() {
        this.updateQueue = [];
    }
    
    addUpdate(object, transform) {
        this.updateQueue.push({ object, transform });
    }
    
    processUpdates() {
        this.updateQueue.forEach(({ object, transform }) => {
            if (transform.position) {
                object.position.copy(transform.position);
            }
            if (transform.rotation) {
                object.rotation.copy(transform.rotation);
            }
            if (transform.scale) {
                object.scale.copy(transform.scale);
            }
        });
        
        this.updateQueue.length = 0;
        
        // 批量更新世界矩阵
        scene.updateMatrixWorld();
    }
}

2. 视锥剔除优化

// 基于场景图的视锥剔除
function cullSceneGraph(camera, root) {
    const frustum = new THREE.Frustum();
    const matrix = new THREE.Matrix4();
    
    matrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
    frustum.setFromProjectionMatrix(matrix);
    
    root.traverse((object) => {
        if (object.isMesh) {
            // 计算包围盒
            if (!object.geometry.boundingBox) {
                object.geometry.computeBoundingBox();
            }
            
            const box = object.geometry.boundingBox.clone();
            box.applyMatrix4(object.matrixWorld);
            
            // 视锥剔除
            object.visible = frustum.intersectsBox(box);
        }
    });
}

实际应用：

• 游戏开发：角色骨骼结构、场景层次管理
• CAD软件：装配体层次结构、组件关系管理
• 建筑可视化：建筑层级结构、房间分组管理
• 动画系统：关键帧动画的层次传播

How to optimize the performance of Three.js applications? What are the common optimization strategies?

考察点：性能优化策略。

答案：

Three.js性能优化是构建高质量3D Web应用的关键技术，涉及渲染管线的各个环节。优化策略需要从几何体、材质、光照、动画等多个维度综合考虑，平衡视觉效果和运行性能。

渲染性能优化：

1. 减少Draw Call

// 使用InstancedMesh批量渲染相同对象
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});

const count = 1000;
const instancedMesh = new THREE.InstancedMesh(geometry, material, count);

const matrix = new THREE.Matrix4();
for (let i = 0; i < count; i++) {
    matrix.setPosition(
        Math.random() * 100 - 50,
        Math.random() * 100 - 50, 
        Math.random() * 100 - 50
    );
    instancedMesh.setMatrixAt(i, matrix);
}
instancedMesh.instanceMatrix.needsUpdate = true;
scene.add(instancedMesh);

2. 几何体优化

// LOD系统实现
const lod = new THREE.LOD();

// 不同精度的几何体
const highDetail = new THREE.SphereGeometry(1, 32, 32);
const mediumDetail = new THREE.SphereGeometry(1, 16, 16);  
const lowDetail = new THREE.SphereGeometry(1, 8, 8);

lod.addLevel(new THREE.Mesh(highDetail, material), 0);
lod.addLevel(new THREE.Mesh(mediumDetail, material), 50);
lod.addLevel(new THREE.Mesh(lowDetail, material), 100);

// 几何体合并减少对象数量
const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries([geo1, geo2, geo3]);
const mergedMesh = new THREE.Mesh(mergedGeometry, material);

3. 材质和纹理优化

// 纹理压缩和复用
class TextureManager {
    constructor() {
        this.cache = new Map();
        this.loader = new THREE.TextureLoader();
    }
    
    load(url, options = {}) {
        if (this.cache.has(url)) {
            return this.cache.get(url);
        }
        
        const texture = this.loader.load(url);
        
        // 纹理优化设置
        texture.generateMipmaps = options.mipmap !== false;
        texture.minFilter = options.minFilter || THREE.LinearMipmapLinearFilter;
        texture.magFilter = options.magFilter || THREE.LinearFilter;
        
        // 压缩格式支持
        if (renderer.capabilities.isWebGL2) {
            texture.format = THREE.RGBFormat;
            texture.type = THREE.UnsignedByteType;
        }
        
        this.cache.set(url, texture);
        return texture;
    }
}

// 材质复用
const materialCache = new Map();
function getMaterial(params) {
    const key = JSON.stringify(params);
    if (!materialCache.has(key)) {
        materialCache.set(key, new THREE.MeshStandardMaterial(params));
    }
    return materialCache.get(key);
}

内存管理优化：

1. 资源释放

class ResourceManager {
    constructor() {
        this.geometries = new Set();
        this.materials = new Set();
        this.textures = new Set();
    }
    
    track(resource) {
        if (resource.isGeometry || resource.isBufferGeometry) {
            this.geometries.add(resource);
        } else if (resource.isMaterial) {
            this.materials.add(resource);
        } else if (resource.isTexture) {
            this.textures.add(resource);
        }
    }
    
    dispose() {
        this.geometries.forEach(geo => geo.dispose());
        this.materials.forEach(mat => mat.dispose());
        this.textures.forEach(tex => tex.dispose());
        
        this.geometries.clear();
        this.materials.clear();
        this.textures.clear();
    }
}

// 对象池模式
class ObjectPool {
    constructor(createFn, resetFn) {
        this.createFn = createFn;
        this.resetFn = resetFn;
        this.pool = [];
    }
    
    get() {
        return this.pool.pop() || this.createFn();
    }
    
    release(obj) {
        this.resetFn(obj);
        this.pool.push(obj);
    }
}

2. 视锥剔除

// 自定义视锥剔除
function performFrustumCulling(camera, objects) {
    const frustum = new THREE.Frustum();
    const matrix = new THREE.Matrix4();
    
    matrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
    frustum.setFromProjectionMatrix(matrix);
    
    objects.forEach(object => {
        if (object.geometry && object.geometry.boundingSphere) {
            object.visible = frustum.intersectsSphere(object.geometry.boundingSphere);
        }
    });
}

How to implement physics effects in Three.js? How to integrate with physics engines?

考察点：物理系统集成。

答案：

物理效果为3D场景增加真实性和交互性，Three.js本身不包含物理引擎，需要与第三方物理库集成。常用的物理引擎包括Cannon.js、Ammo.js（Bullet物理引擎的JavaScript版本）等。

Cannon.js集成：

1. 基础物理世界设置

import * as CANNON from 'cannon-es';

// 创建物理世界
const world = new CANNON.World({
    gravity: new CANNON.Vec3(0, -9.82, 0), // 重力
});
world.broadphase = new CANNON.NaiveBroadphase(); // 碰撞检测算法

// 物理材质
const physicsMaterial = new CANNON.Material('physics');
const physicsContactMaterial = new CANNON.ContactMaterial(
    physicsMaterial,
    physicsMaterial,
    {
        friction: 0.4,      // 摩擦力
        restitution: 0.3,   // 弹性恢复系数
    }
);
world.addContactMaterial(physicsContactMaterial);

// 地面物理体
const groundShape = new CANNON.Plane();
const groundBody = new CANNON.Body({
    mass: 0, // 质量为0表示静态物体
    shape: groundShape,
    material: physicsMaterial
});
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(-1, 0, 0), Math.PI * 0.5);
world.addBody(groundBody);

2. 刚体创建和同步

class PhysicsObject {
    constructor(mesh, shape, mass = 1) {
        this.mesh = mesh;
        
        // 创建物理体
        this.body = new CANNON.Body({
            mass: mass,
            shape: shape,
            material: physicsMaterial
        });
        
        // 同步初始位置
        this.body.position.copy(mesh.position);
        this.body.quaternion.copy(mesh.quaternion);
        
        world.addBody(this.body);
    }
    
    update() {
        // 将物理体状态同步到渲染网格
        this.mesh.position.copy(this.body.position);
        this.mesh.quaternion.copy(this.body.quaternion);
    }
}

// 创建掉落的立方体
function createFallingBox(position) {
    const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
    const boxMaterial = new THREE.MeshStandardMaterial({color: Math.random() * 0xffffff});
    const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
    
    const boxShape = new CANNON.Sphere(0.5);
    const physicsBox = new PhysicsObject(boxMesh, boxShape, 1);
    
    boxMesh.position.copy(position);
    physicsBox.body.position.copy(position);
    
    scene.add(boxMesh);
    return physicsBox;
}

3. 物理更新循环

const physicsObjects = [];
const timeStep = 1 / 60; // 60 FPS

function updatePhysics() {
    // 更新物理世界
    world.step(timeStep);
    
    // 同步所有物理对象
    physicsObjects.forEach(obj => {
        obj.update();
    });
}

function animate() {
    requestAnimationFrame(animate);
    
    updatePhysics();
    renderer.render(scene, camera);
}

How to implement particle systems in Three.js?

考察点：粒子系统开发。

答案：

粒子系统用于模拟火焰、烟雾、雨雪、爆炸等自然现象。Three.js中可以通过Points对象、Sprite或自定义着色器实现高效的粒子效果。

基础粒子系统：

1. Points粒子系统

class ParticleSystem {
    constructor(count = 1000) {
        this.count = count;
        this.particles = [];
        
        // 创建几何体
        this.geometry = new THREE.BufferGeometry();
        this.positions = new Float32Array(count * 3);
        this.colors = new Float32Array(count * 3);
        this.sizes = new Float32Array(count);
        this.velocities = [];
        
        this.initParticles();
        this.createMaterial();
        this.createPoints();
    }
    
    initParticles() {
        for (let i = 0; i < this.count; i++) {
            // 位置
            this.positions[i * 3] = (Math.random() - 0.5) * 20;
            this.positions[i * 3 + 1] = Math.random() * 10;
            this.positions[i * 3 + 2] = (Math.random() - 0.5) * 20;
            
            // 颜色
            this.colors[i * 3] = Math.random();
            this.colors[i * 3 + 1] = Math.random();
            this.colors[i * 3 + 2] = Math.random();
            
            // 大小
            this.sizes[i] = Math.random() * 3 + 1;
            
            // 速度
            this.velocities[i] = {
                x: (Math.random() - 0.5) * 0.1,
                y: Math.random() * 0.1 + 0.02,
                z: (Math.random() - 0.5) * 0.1
            };
        }
        
        this.geometry.setAttribute('position', new THREE.BufferAttribute(this.positions, 3));
        this.geometry.setAttribute('color', new THREE.BufferAttribute(this.colors, 3));
        this.geometry.setAttribute('size', new THREE.BufferAttribute(this.sizes, 1));
    }
    
    createMaterial() {
        this.material = new THREE.PointsMaterial({
            size: 2,
            sizeAttenuation: true,
            vertexColors: true,
            transparent: true,
            opacity: 0.8,
            blending: THREE.AdditiveBlending
        });
    }
    
    createPoints() {
        this.points = new THREE.Points(this.geometry, this.material);
    }
    
    update(deltaTime) {
        const positions = this.geometry.attributes.position.array;
        
        for (let i = 0; i < this.count; i++) {
            const i3 = i * 3;
            
            // 更新位置
            positions[i3] += this.velocities[i].x;
            positions[i3 + 1] += this.velocities[i].y;
            positions[i3 + 2] += this.velocities[i].z;
            
            // 重置超出范围的粒子
            if (positions[i3 + 1] > 10) {
                positions[i3 + 1] = 0;
                positions[i3] = (Math.random() - 0.5) * 20;
                positions[i3 + 2] = (Math.random() - 0.5) * 20;
            }
        }
        
        this.geometry.attributes.position.needsUpdate = true;
    }
}

2. 高级粒子着色器

const particleShaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 },
        pointTexture: { value: textureLoader.load('particle.png') }
    },
    vertexShader: `
        attribute float size;
        attribute vec3 customColor;
        varying vec3 vColor;
        uniform float time;
        
        void main() {
            vColor = customColor;
            
            vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
            
            // 动态大小变化
            float dynamicSize = size * (sin(time + position.x) * 0.3 + 1.0);
            gl_PointSize = dynamicSize * (300.0 / -mvPosition.z);
            
            gl_Position = projectionMatrix * mvPosition;
        }
    `,
    fragmentShader: `
        uniform sampler2D pointTexture;
        varying vec3 vColor;
        
        void main() {
            gl_FragColor = vec4(vColor, 1.0);
            gl_FragColor = gl_FragColor * texture2D(pointTexture, gl_PointCoord);
            
            // 软粒子效果
            float alpha = 1.0 - length(gl_PointCoord - 0.5) * 2.0;
            gl_FragColor.a *= alpha;
        }
    `,
    blending: THREE.AdditiveBlending,
    depthTest: false,
    transparent: true,
    vertexColors: true
});

What is post-processing in Three.js? How to implement it?

考察点：后期处理技术。

答案：

后期处理是在场景渲染完成后对整个画面进行的图像处理效果，如景深、辉光、色彩校正等。Three.js通过EffectComposer和各种Pass实现后期处理管线。

后期处理管线：

1. EffectComposer设置

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';

// 创建后期处理组合器
const composer = new EffectComposer(renderer);

// 渲染通道
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// 辉光效果
const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.5,  // 强度
    0.4,  // 半径  
    0.85  // 阈值
);
composer.addPass(bloomPass);

// 渲染循环中使用composer
function animate() {
    composer.render();
}

How to implement shadow effects in Three.js? What are the differences between shadow types?

考察点：阴影渲染技术。

答案：

阴影为3D场景提供深度感和真实感。Three.js支持多种阴影算法，每种都有不同的质量和性能特征。

阴影系统配置：

1. 基础阴影设置

// 启用阴影渲染
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影类型

// 光源阴影设置
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;

// 对象阴影属性
mesh.castShadow = true;    // 投射阴影
ground.receiveShadow = true; // 接收阴影

2. 阴影类型对比

// PCF阴影 - 平滑边缘
renderer.shadowMap.type = THREE.PCFShadowMap;

// PCF软阴影 - 更平滑的边缘
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

// VSM阴影 - 方差阴影贴图
renderer.shadowMap.type = THREE.VSMShadowMap;

// 基础阴影 - 硬边缘，性能最好
renderer.shadowMap.type = THREE.BasicShadowMap;

How to handle rendering of large-scale scenes in Three.js?

考察点：大场景渲染策略。

答案：

大规模场景渲染是3D应用性能的关键挑战，需要采用多种优化策略来处理大量几何体、复杂光照和海量数据。核心思路是减少不必要的渲染计算和内存占用。

空间分割和剔除：

1. 八叉树空间分割

class Octree {
    constructor(center, size, maxObjects = 10, maxLevels = 5) {
        this.center = center;
        this.size = size;
        this.maxObjects = maxObjects;
        this.maxLevels = maxLevels;
        this.level = 0;
        this.objects = [];
        this.nodes = [];
    }
    
    split() {
        const subSize = this.size / 2;
        const x = this.center.x;
        const y = this.center.y; 
        const z = this.center.z;
        
        this.nodes[0] = new Octree(new THREE.Vector3(x - subSize, y + subSize, z - subSize), subSize);
        this.nodes[1] = new Octree(new THREE.Vector3(x + subSize, y + subSize, z - subSize), subSize);
        // ... 创建8个子节点
        
        // 将对象分配到子节点
        this.objects.forEach(obj => {
            const index = this.getIndex(obj);
            if (index !== -1) {
                this.nodes[index].insert(obj);
            }
        });
        this.objects = [];
    }
    
    insert(object) {
        if (this.nodes.length > 0) {
            const index = this.getIndex(object);
            if (index !== -1) {
                this.nodes[index].insert(object);
                return;
            }
        }
        
        this.objects.push(object);
        
        if (this.objects.length > this.maxObjects && this.level < this.maxLevels) {
            if (this.nodes.length === 0) {
                this.split();
            }
        }
    }
    
    retrieve(frustum, returnObjects = []) {
        if (this.intersectsFrustum(frustum)) {
            returnObjects.push(...this.objects);
            
            this.nodes.forEach(node => {
                node.retrieve(frustum, returnObjects);
            });
        }
        return returnObjects;
    }
}

2. 层次LOD系统

class LODManager {
    constructor(camera) {
        this.camera = camera;
        this.lodLevels = new Map();
    }
    
    registerLOD(object, levels) {
        // levels: [{distance: 0, mesh: highDetailMesh}, {distance: 50, mesh: lowDetailMesh}]
        this.lodLevels.set(object.uuid, levels);
    }
    
    update() {
        this.lodLevels.forEach((levels, objectId) => {
            const object = scene.getObjectByProperty('uuid', objectId);
            if (!object) return;
            
            const distance = this.camera.position.distanceTo(object.position);
            
            // 选择合适的LOD级别
            let selectedLevel = levels[levels.length - 1];
            for (const level of levels) {
                if (distance <= level.distance) {
                    selectedLevel = level;
                    break;
                }
            }
            
            // 切换模型
            if (object.visible && object.geometry !== selectedLevel.mesh.geometry) {
                object.geometry = selectedLevel.mesh.geometry;
                object.material = selectedLevel.mesh.material;
            }
        });
    }
}

流式加载系统：

1. 分块加载

class ChunkManager {
    constructor(chunkSize = 100) {
        this.chunkSize = chunkSize;
        this.loadedChunks = new Map();
        this.loadingPromises = new Map();
    }
    
    getChunkKey(position) {
        const x = Math.floor(position.x / this.chunkSize);
        const z = Math.floor(position.z / this.chunkSize);
        return `${x}_${z}`;
    }
    
    async loadChunk(chunkKey) {
        if (this.loadedChunks.has(chunkKey)) {
            return this.loadedChunks.get(chunkKey);
        }
        
        if (this.loadingPromises.has(chunkKey)) {
            return this.loadingPromises.get(chunkKey);
        }
        
        const promise = this.fetchChunkData(chunkKey);
        this.loadingPromises.set(chunkKey, promise);
        
        try {
            const chunkData = await promise;
            this.loadedChunks.set(chunkKey, chunkData);
            this.loadingPromises.delete(chunkKey);
            return chunkData;
        } catch (error) {
            this.loadingPromises.delete(chunkKey);
            throw error;
        }
    }
    
    updateVisibleChunks(cameraPosition, viewDistance) {
        const requiredChunks = new Set();
        
        // 计算视野范围内的块
        for (let x = -viewDistance; x <= viewDistance; x++) {
            for (let z = -viewDistance; z <= viewDistance; z++) {
                const chunkPos = {
                    x: cameraPosition.x + x * this.chunkSize,
                    z: cameraPosition.z + z * this.chunkSize
                };
                requiredChunks.add(this.getChunkKey(chunkPos));
            }
        }
        
        // 加载需要的块
        requiredChunks.forEach(chunkKey => {
            this.loadChunk(chunkKey);
        });
        
        // 卸载远离的块
        this.loadedChunks.forEach((chunk, chunkKey) => {
            if (!requiredChunks.has(chunkKey)) {
                this.unloadChunk(chunkKey);
            }
        });
    }
}

How to implement VR/AR applications in Three.js?

考察点：VR/AR开发。

答案：

Three.js通过WebXR API支持VR和AR应用开发，提供沉浸式的3D体验。VR应用需要处理双眼渲染、头部追踪和手柄交互，而AR应用则需要现实世界的相机融合。

VR应用实现：

1. WebXR VR设置

import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';

// 启用XR支持
renderer.xr.enabled = true;
document.body.appendChild(VRButton.createButton(renderer));

// VR控制器设置
const controller1 = renderer.xr.getController(0);
const controller2 = renderer.xr.getController(1);

controller1.addEventListener('selectstart', onSelectStart);
controller1.addEventListener('selectend', onSelectEnd);

scene.add(controller1);
scene.add(controller2);

// 控制器射线
const geometry = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(0, 0, -1)
]);
const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0xffffff}));
controller1.add(line.clone());
controller2.add(line.clone());

2. VR交互实现

class VRInteractionManager {
    constructor(scene, controllers) {
        this.scene = scene;
        this.controllers = controllers;
        this.raycaster = new THREE.Raycaster();
        this.interactables = [];
    }
    
    addInteractable(object, callbacks = {}) {
        object.userData.isInteractable = true;
        object.userData.onHover = callbacks.onHover;
        object.userData.onSelect = callbacks.onSelect;
        this.interactables.push(object);
    }
    
    update() {
        this.controllers.forEach(controller => {
            // 获取控制器射线
            this.raycaster.setFromXRController(controller);
            const intersects = this.raycaster.intersectObjects(this.interactables);
            
            if (intersects.length > 0) {
                const intersect = intersects[0];
                
                // 触发悬停事件
                if (intersect.object.userData.onHover) {
                    intersect.object.userData.onHover(intersect);
                }
                
                // 更新射线长度到交点
                const line = controller.getObjectByName('line');
                if (line) {
                    line.scale.z = intersect.distance;
                }
            }
        });
    }
    
    onSelectStart(controller) {
        const intersects = this.raycaster.intersectObjects(this.interactables);
        if (intersects.length > 0) {
            const intersect = intersects[0];
            if (intersect.object.userData.onSelect) {
                intersect.object.userData.onSelect(intersect);
            }
        }
    }
}

AR应用实现：

1. WebXR AR设置

import { ARButton } from 'three/examples/jsm/webxr/ARButton.js';

// AR环境设置
renderer.xr.enabled = true;
document.body.appendChild(ARButton.createButton(renderer, {
    requiredFeatures: ['hit-test']
}));

// AR命中测试
let hitTestSource = null;
let hitTestSourceRequested = false;

function onSelect() {
    if (reticle.visible) {
        // 在命中点放置对象
        const object = new THREE.Mesh(geometry, material);
        object.position.copy(reticle.position);
        object.quaternion.copy(reticle.quaternion);
        scene.add(object);
    }
}

controller.addEventListener('select', onSelect);

2. AR平面检测

class ARPlaneDetection {
    constructor(renderer) {
        this.renderer = renderer;
        this.hitTestSource = null;
        this.reticle = this.createReticle();
    }
    
    createReticle() {
        const geometry = new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2);
        const material = new THREE.MeshBasicMaterial();
        const reticle = new THREE.Mesh(geometry, material);
        reticle.matrixAutoUpdate = false;
        reticle.visible = false;
        return reticle;
    }
    
    async initHitTest(session) {
        const referenceSpace = this.renderer.xr.getReferenceSpace();
        const hitTestSourceRequested = await session.requestHitTestSource({
            space: await session.requestReferenceSpace('viewer')
        });
        this.hitTestSource = hitTestSourceRequested;
    }
    
    update(frame) {
        if (this.hitTestSource) {
            const hitTestResults = frame.getHitTestResults(this.hitTestSource);
            
            if (hitTestResults.length > 0) {
                const hit = hitTestResults[0];
                const referenceSpace = this.renderer.xr.getReferenceSpace();
                const hitPose = hit.getPose(referenceSpace);
                
                if (hitPose) {
                    this.reticle.visible = true;
                    this.reticle.matrix.fromArray(hitPose.transform.matrix);
                }
            } else {
                this.reticle.visible = false;
            }
        }
    }
}

How to design a high-performance Three.js application architecture?

考察点：架构设计能力。

答案：

高性能Three.js应用架构需要考虑模块化设计、资源管理、渲染优化、状态管理等多个层面。良好的架构能够支撑复杂应用的开发和维护，同时保证运行性能。

核心架构设计：

1. 分层架构模式

// 应用架构分层
class ThreeApp {
    constructor(container) {
        this.container = container;
        
        // 核心层
        this.core = new CoreEngine();
        
        // 渲染层
        this.renderer = new RenderManager(this.core);
        
        // 场景层
        this.sceneManager = new SceneManager(this.core);
        
        // 资源层
        this.resourceManager = new ResourceManager();
        
        // 输入层
        this.inputManager = new InputManager(this.container);
        
        // 系统层
        this.systems = new SystemManager();
        
        this.init();
    }
    
    init() {
        this.setupCore();
        this.setupSystems();
        this.setupEventListeners();
        this.startRenderLoop();
    }
}

// 核心引擎
class CoreEngine {
    constructor() {
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.clock = new THREE.Clock();
        
        this.setupRenderer();
    }
    
    setupRenderer() {
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.renderer.outputEncoding = THREE.sRGBEncoding;
        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
    }
}

2. 组件化系统设计

// 实体组件系统 (ECS)
class Entity {
    constructor(id) {
        this.id = id;
        this.components = new Map();
        this.active = true;
    }
    
    addComponent(component) {
        this.components.set(component.constructor.name, component);
        component.entity = this;
        return this;
    }
    
    getComponent(componentType) {
        return this.components.get(componentType.name);
    }
    
    hasComponent(componentType) {
        return this.components.has(componentType.name);
    }
}

// 组件基类
class Component {
    constructor() {
        this.entity = null;
        this.enabled = true;
    }
}

// 变换组件
class TransformComponent extends Component {
    constructor(position = new THREE.Vector3(), rotation = new THREE.Euler(), scale = new THREE.Vector3(1, 1, 1)) {
        super();
        this.position = position;
        this.rotation = rotation;
        this.scale = scale;
        this.object3D = new THREE.Object3D();
    }
    
    updateMatrix() {
        this.object3D.position.copy(this.position);
        this.object3D.rotation.copy(this.rotation);
        this.object3D.scale.copy(this.scale);
        this.object3D.updateMatrix();
    }
}

// 渲染组件
class MeshComponent extends Component {
    constructor(geometry, material) {
        super();
        this.geometry = geometry;
        this.material = material;
        this.mesh = new THREE.Mesh(geometry, material);
    }
}

// 系统管理器
class SystemManager {
    constructor() {
        this.systems = [];
        this.entities = new Map();
    }
    
    addSystem(system) {
        this.systems.push(system);
        system.init();
    }
    
    addEntity(entity) {
        this.entities.set(entity.id, entity);
        
        // 通知所有系统有新实体
        this.systems.forEach(system => {
            if (system.matchesEntity(entity)) {
                system.addEntity(entity);
            }
        });
    }
    
    update(deltaTime) {
        this.systems.forEach(system => {
            if (system.enabled) {
                system.update(deltaTime);
            }
        });
    }
}

性能优化架构：

1. 渲染管理器

class RenderManager {
    constructor(core) {
        this.core = core;
        this.renderQueue = new RenderQueue();
        this.postProcessing = new PostProcessingManager();
        this.cullingManager = new CullingManager();
        
        this.stats = {
            drawCalls: 0,
            triangles: 0,
            frameTime: 0
        };
    }
    
    render() {
        const startTime = performance.now();
        
        // 视锥剔除
        const visibleObjects = this.cullingManager.cull(this.core.camera, this.core.scene);
        
        // 排序渲染队列
        this.renderQueue.sort(visibleObjects, this.core.camera);
        
        // 批量渲染
        this.batchRender(this.renderQueue.opaque);
        this.batchRender(this.renderQueue.transparent);
        
        // 后期处理
        this.postProcessing.render(this.core.renderer, this.core.scene, this.core.camera);
        
        // 性能统计
        this.stats.frameTime = performance.now() - startTime;
        this.updateStats();
    }
    
    batchRender(objects) {
        // 按材质分组减少状态切换
        const materialGroups = this.groupByMaterial(objects);
        
        materialGroups.forEach(group => {
            this.core.renderer.setMaterial(group.material);
            group.objects.forEach(obj => {
                this.core.renderer.renderObject(obj);
            });
        });
    }
}

// 渲染队列
class RenderQueue {
    constructor() {
        this.opaque = [];
        this.transparent = [];
    }
    
    sort(objects, camera) {
        this.opaque.length = 0;
        this.transparent.length = 0;
        
        objects.forEach(obj => {
            if (obj.material.transparent) {
                this.transparent.push(obj);
            } else {
                this.opaque.push(obj);
            }
        });
        
        // 不透明物体从前到后排序（早期Z测试剔除）
        this.opaque.sort((a, b) => {
            return a.distanceToCamera - b.distanceToCamera;
        });
        
        // 透明物体从后到前排序（正确的alpha混合）
        this.transparent.sort((a, b) => {
            return b.distanceToCamera - a.distanceToCamera;
        });
    }
}

2. 资源管理系统

class ResourceManager {
    constructor() {
        this.cache = new Map();
        this.loadingQueue = [];
        this.loadedResources = new Set();
        this.refCounts = new Map();
        
        this.loaders = {
            texture: new THREE.TextureLoader(),
            gltf: new GLTFLoader(),
            audio: new THREE.AudioLoader()
        };
    }
    
    async load(url, type = 'auto') {
        if (this.cache.has(url)) {
            this.addRef(url);
            return this.cache.get(url);
        }
        
        const resourceType = type === 'auto' ? this.detectType(url) : type;
        const loader = this.loaders[resourceType];
        
        if (!loader) {
            throw new Error(`Unsupported resource type: ${resourceType}`);
        }
        
        try {
            const resource = await this.loadWithLoader(loader, url);
            this.cache.set(url, resource);
            this.addRef(url);
            return resource;
        } catch (error) {
            console.error(`Failed to load resource: ${url}`, error);
            throw error;
        }
    }
    
    unload(url) {
        this.removeRef(url);
        
        if (this.getRefCount(url) <= 0) {
            const resource = this.cache.get(url);
            if (resource && resource.dispose) {
                resource.dispose();
            }
            this.cache.delete(url);
        }
    }
    
    addRef(url) {
        this.refCounts.set(url, (this.refCounts.get(url) || 0) + 1);
    }
    
    removeRef(url) {
        const count = this.refCounts.get(url) || 0;
        this.refCounts.set(url, Math.max(0, count - 1));
    }
}

实际应用架构：

• 游戏引擎：ECS系统管理游戏对象和逻辑
• 可视化平台：数据驱动的场景构建和渲染
• 设计工具：插件化架构支持功能扩展
• 教育应用：模块化课件系统和交互管理

How to implement custom shaders in Three.js? What are the key points of GLSL programming?

考察点：着色器编程。

答案：

自定义着色器是实现高级视觉效果的核心技术，通过GLSL（OpenGL Shading Language）直接控制GPU渲染管线。掌握GLSL编程能够创造出Three.js内置材质无法实现的复杂效果。

GLSL基础语法：

1. 数据类型和变量

// 基础数据类型
float value = 1.0;          // 浮点数
int count = 10;             // 整数
bool isVisible = true;      // 布尔值

// 向量类型
vec2 position = vec2(1.0, 2.0);       // 2D向量
vec3 color = vec3(1.0, 0.5, 0.0);     // 3D向量/颜色
vec4 vertex = vec4(0.0, 0.0, 0.0, 1.0); // 4D向量/位置

// 矩阵类型
mat3 rotation = mat3(1.0);   // 3x3矩阵
mat4 transform = mat4(1.0);  // 4x4矩阵

// 纹理采样器
sampler2D diffuseMap;        // 2D纹理
samplerCube envMap;          // 立方体纹理

2. 变量修饰符

// 顶点着色器
attribute vec3 position;     // 顶点属性（只读）
uniform mat4 modelMatrix;    // 全局变量
varying vec2 vUv;           // 传递给片元着色器

// 片元着色器
uniform float time;          // 全局变量
varying vec2 vUv;           // 从顶点着色器接收

高级着色器实现：

1. 程序化纹理着色器

const proceduralMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 },
        resolution: { value: new THREE.Vector2(1024, 1024) },
        noiseScale: { value: 5.0 },
        colorA: { value: new THREE.Color(0xff6b35) },
        colorB: { value: new THREE.Color(0x004e89) }
    },
    vertexShader: `
        varying vec2 vUv;
        varying vec3 vPosition;
        
        void main() {
            vUv = uv;
            vPosition = position;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        uniform float time;
        uniform vec2 resolution;
        uniform float noiseScale;
        uniform vec3 colorA;
        uniform vec3 colorB;
        
        varying vec2 vUv;
        varying vec3 vPosition;
        
        // 噪声函数
        float random(vec2 st) {
            return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
        }
        
        float noise(vec2 st) {
            vec2 i = floor(st);
            vec2 f = fract(st);
            
            float a = random(i);
            float b = random(i + vec2(1.0, 0.0));
            float c = random(i + vec2(0.0, 1.0));
            float d = random(i + vec2(1.0, 1.0));
            
            vec2 u = f * f * (3.0 - 2.0 * f);
            
            return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
        }
        
        float fbm(vec2 st) {
            float value = 0.0;
            float amplitude = 0.5;
            float frequency = 0.0;
            
            for (int i = 0; i < 6; i++) {
                value += amplitude * noise(st);
                st *= 2.0;
                amplitude *= 0.5;
            }
            return value;
        }
        
        void main() {
            vec2 st = vUv * noiseScale;
            st += time * 0.1;
            
            // 分形布朗运动噪声
            float n = fbm(st);
            
            // 动态图案
            float pattern = sin(vUv.x * 10.0 + time) * cos(vUv.y * 10.0 + time * 0.5);
            pattern = (pattern + 1.0) * 0.5;
            
            // 混合颜色
            vec3 color = mix(colorA, colorB, n * pattern);
            
            gl_FragColor = vec4(color, 1.0);
        }
    `
});

2. 变形动画着色器

const morphMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 },
        morphIntensity: { value: 1.0 },
        waveFrequency: { value: 2.0 }
    },
    vertexShader: `
        uniform float time;
        uniform float morphIntensity;
        uniform float waveFrequency;
        
        varying vec2 vUv;
        varying vec3 vNormal;
        varying vec3 vPosition;
        
        // 3D噪声函数
        vec3 mod289(vec3 x) {
            return x - floor(x * (1.0 / 289.0)) * 289.0;
        }
        
        vec4 mod289(vec4 x) {
            return x - floor(x * (1.0 / 289.0)) * 289.0;
        }
        
        vec4 permute(vec4 x) {
            return mod289(((x*34.0)+1.0)*x);
        }
        
        vec4 taylorInvSqrt(vec4 r) {
            return 1.79284291400159 - 0.85373472095314 * r;
        }
        
        float snoise(vec3 v) {
            const vec2 C = vec2(1.0/6.0, 1.0/3.0);
            const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
            
            vec3 i = floor(v + dot(v, C.yyy));
            vec3 x0 = v - i + dot(i, C.xxx);
            
            vec3 g = step(x0.yzx, x0.xyz);
            vec3 l = 1.0 - g;
            vec3 i1 = min(g.xyz, l.zxy);
            vec3 i2 = max(g.xyz, l.zxy);
            
            vec3 x1 = x0 - i1 + C.xxx;
            vec3 x2 = x0 - i2 + C.yyy;
            vec3 x3 = x0 - D.yyy;
            
            i = mod289(i);
            vec4 p = permute(permute(permute(
                i.z + vec4(0.0, i1.z, i2.z, 1.0))
                + i.y + vec4(0.0, i1.y, i2.y, 1.0))
                + i.x + vec4(0.0, i1.x, i2.x, 1.0));
            
            float n_ = 0.142857142857;
            vec3 ns = n_ * D.wyz - D.xzx;
            
            vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
            
            vec4 x_ = floor(j * ns.z);
            vec4 y_ = floor(j - 7.0 * x_);
            
            vec4 x = x_ *ns.x + ns.yyyy;
            vec4 y = y_ *ns.x + ns.yyyy;
            vec4 h = 1.0 - abs(x) - abs(y);
            
            vec4 b0 = vec4(x.xy, y.xy);
            vec4 b1 = vec4(x.zw, y.zw);
            
            vec4 s0 = floor(b0)*2.0 + 1.0;
            vec4 s1 = floor(b1)*2.0 + 1.0;
            vec4 sh = -step(h, vec4(0.0));
            
            vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
            vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
            
            vec3 p0 = vec3(a0.xy,h.x);
            vec3 p1 = vec3(a0.zw,h.y);
            vec3 p2 = vec3(a1.xy,h.z);
            vec3 p3 = vec3(a1.zw,h.w);
            
            vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
            p0 *= norm.x;
            p1 *= norm.y;
            p2 *= norm.z;
            p3 *= norm.w;
            
            vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
            m = m * m;
            return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
        }
        
        void main() {
            vUv = uv;
            vNormal = normalize(normalMatrix * normal);
            
            // 变形计算
            vec3 pos = position;
            float noiseValue = snoise(pos * waveFrequency + time);
            pos += normal * noiseValue * morphIntensity;
            
            vPosition = (modelViewMatrix * vec4(pos, 1.0)).xyz;
            gl_Position = projectionMatrix * vec4(vPosition, 1.0);
        }
    `,
    fragmentShader: `
        varying vec2 vUv;
        varying vec3 vNormal;
        varying vec3 vPosition;
        
        void main() {
            // 基于法向量的颜色
            vec3 color = normalize(vNormal) * 0.5 + 0.5;
            
            // 边缘光效
            vec3 viewDirection = normalize(-vPosition);
            float fresnel = 1.0 - dot(vNormal, viewDirection);
            fresnel = pow(fresnel, 2.0);
            
            color += vec3(0.2, 0.6, 1.0) * fresnel;
            
            gl_FragColor = vec4(color, 1.0);
        }
    `
});

How to implement complex 3D data visualization in Three.js?

考察点：数据可视化设计。

答案：

3D数据可视化将抽象数据转换为直观的三维表现形式，通过位置、颜色、大小、动画等维度映射数据属性。设计有效的3D数据可视化需要考虑数据结构、视觉编码、交互设计和性能优化。

数据映射策略：

1. 多维数据映射

class DataVisualization {
    constructor(data) {
        this.data = data;
        this.scales = this.createScales();
        this.colorScale = this.createColorScale();
        this.scene = new THREE.Scene();
    }
    
    createScales() {
        // 创建数据尺度映射
        return {
            x: d3.scaleLinear()
                .domain(d3.extent(this.data, d => d.x))
                .range([-10, 10]),
            y: d3.scaleLinear()
                .domain(d3.extent(this.data, d => d.y))
                .range([0, 20]),
            z: d3.scaleLinear()
                .domain(d3.extent(this.data, d => d.z))
                .range([-10, 10]),
            size: d3.scaleSqrt()
                .domain(d3.extent(this.data, d => d.value))
                .range([0.1, 2])
        };
    }
    
    createColorScale() {
        return d3.scaleSequential(d3.interpolateViridis)
            .domain(d3.extent(this.data, d => d.category));
    }
    
    createVisualization() {
        this.data.forEach((dataPoint, index) => {
            const geometry = new THREE.SphereGeometry(this.scales.size(dataPoint.value), 16, 16);
            const material = new THREE.MeshStandardMaterial({
                color: new THREE.Color(this.colorScale(dataPoint.category)),
                transparent: true,
                opacity: 0.8
            });
            
            const sphere = new THREE.Mesh(geometry, material);
            sphere.position.set(
                this.scales.x(dataPoint.x),
                this.scales.y(dataPoint.y),
                this.scales.z(dataPoint.z)
            );
            
            // 存储原始数据用于交互
            sphere.userData = dataPoint;
            
            this.scene.add(sphere);
        });
    }
}

2. 时间序列数据可视化

class TimeSeriesVisualization {
    constructor(timeSeriesData) {
        this.data = timeSeriesData;
        this.currentTime = 0;
        this.animationSpeed = 0.02;
        this.trails = new Map(); // 轨迹记录
    }
    
    createAnimatedVisualization() {
        // 为每个数据系列创建轨迹
        this.data.series.forEach((series, seriesIndex) => {
            const trailGeometry = new THREE.BufferGeometry();
            const trailMaterial = new THREE.LineBasicMaterial({
                color: this.getSeriesColor(seriesIndex),
                transparent: true,
                opacity: 0.6
            });
            
            const trailLine = new THREE.Line(trailGeometry, trailMaterial);
            this.scene.add(trailLine);
            
            this.trails.set(series.id, {
                line: trailLine,
                points: [],
                maxPoints: 100
            });
        });
    }
    
    updateVisualization() {
        this.data.series.forEach(series => {
            const currentDataPoint = this.interpolateDataAtTime(series, this.currentTime);
            
            if (currentDataPoint) {
                const position = new THREE.Vector3(
                    currentDataPoint.x,
                    currentDataPoint.y,
                    currentDataPoint.z
                );
                
                // 更新轨迹
                const trail = this.trails.get(series.id);
                trail.points.push(position);
                
                if (trail.points.length > trail.maxPoints) {
                    trail.points.shift();
                }
                
                // 更新几何体
                const positions = new Float32Array(trail.points.length * 3);
                trail.points.forEach((point, index) => {
                    positions[index * 3] = point.x;
                    positions[index * 3 + 1] = point.y;
                    positions[index * 3 + 2] = point.z;
                });
                
                trail.line.geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
                trail.line.geometry.setDrawRange(0, trail.points.length);
            }
        });
        
        this.currentTime += this.animationSpeed;
    }
}

What is the memory management strategy for Three.js applications? How to avoid memory leaks?

考察点：内存管理能力。

答案：

Three.js应用的内存管理涉及几何体、材质、纹理、渲染器等多个层面的资源释放。不当的内存管理会导致内存泄漏，影响应用性能甚至造成浏览器崩溃。

资源释放策略：

1. 自动资源管理系统

class ResourceTracker {
    constructor() {
        this.resources = new Set();
    }
    
    track(resource) {
        if (!resource) return resource;
        
        // 追踪各种类型的资源
        if (resource.dispose || resource.isTexture || resource.isGeometry || resource.isMaterial) {
            this.resources.add(resource);
        }
        return resource;
    }
    
    untrack(resource) {
        this.resources.delete(resource);
    }
    
    dispose() {
        for (const resource of this.resources) {
            if (resource.dispose) {
                resource.dispose();
            }
        }
        this.resources.clear();
    }
}

// 使用示例
const resourceTracker = new ResourceTracker();

// 自动追踪创建的资源
const geometry = resourceTracker.track(new THREE.BoxGeometry());
const material = resourceTracker.track(new THREE.MeshBasicMaterial());
const texture = resourceTracker.track(textureLoader.load('image.jpg'));

// 统一释放
resourceTracker.dispose();

2. 对象池管理

class ObjectPool {
    constructor(createFn, resetFn, initialSize = 10) {
        this.createFn = createFn;
        this.resetFn = resetFn;
        this.pool = [];
        this.active = new Set();
        
        // 预创建对象
        for (let i = 0; i < initialSize; i++) {
            this.pool.push(this.createFn());
        }
    }
    
    get() {
        let obj = this.pool.pop();
        if (!obj) {
            obj = this.createFn();
        }
        
        this.active.add(obj);
        return obj;
    }
    
    release(obj) {
        if (this.active.has(obj)) {
            this.active.delete(obj);
            this.resetFn(obj);
            this.pool.push(obj);
        }
    }
    
    releaseAll() {
        this.active.forEach(obj => {
            this.resetFn(obj);
            this.pool.push(obj);
        });
        this.active.clear();
    }
    
    dispose() {
        this.pool.forEach(obj => {
            if (obj.dispose) obj.dispose();
        });
        this.active.forEach(obj => {
            if (obj.dispose) obj.dispose();
        });
        this.pool.length = 0;
        this.active.clear();
    }
}

// 粒子对象池
const particlePool = new ObjectPool(
    () => new THREE.Mesh(
        new THREE.SphereGeometry(0.1, 8, 8),
        new THREE.MeshBasicMaterial()
    ),
    (particle) => {
        particle.position.set(0, 0, 0);
        particle.visible = false;
        scene.remove(particle);
    }
);

How to implement real-time collaboration features in Three.js applications?

考察点：实时协作设计。

答案：

实时协作功能允许多用户同时操作3D场景，需要解决状态同步、冲突处理、网络通信等技术挑战。核心是建立可靠的实时通信机制和状态管理系统。

实时同步架构：

1. WebSocket通信层

class CollaborationManager {
    constructor(scene, userId) {
        this.scene = scene;
        this.userId = userId;
        this.socket = null;
        this.collaborators = new Map();
        this.operationQueue = [];
        this.lastSyncTime = 0;
        
        this.setupWebSocket();
    }
    
    setupWebSocket() {
        this.socket = new WebSocket('ws://localhost:8080');
        
        this.socket.onmessage = (event) => {
            const message = JSON.parse(event.data);
            this.handleMessage(message);
        };
        
        this.socket.onopen = () => {
            this.sendMessage({
                type: 'join',
                userId: this.userId,
                timestamp: Date.now()
            });
        };
    }
    
    handleMessage(message) {
        switch (message.type) {
            case 'object_update':
                this.applyObjectUpdate(message.data);
                break;
            case 'user_joined':
                this.addCollaborator(message.data);
                break;
            case 'user_left':
                this.removeCollaborator(message.data.userId);
                break;
            case 'operation_sync':
                this.applyOperation(message.data);
                break;
        }
    }
    
    sendObjectUpdate(objectId, transform) {
        const message = {
            type: 'object_update',
            data: {
                objectId: objectId,
                transform: {
                    position: transform.position.toArray(),
                    rotation: transform.rotation.toArray(),
                    scale: transform.scale.toArray()
                },
                timestamp: Date.now(),
                userId: this.userId
            }
        };
        
        this.socket.send(JSON.stringify(message));
    }
}

2. 操作冲突解决

class OperationalTransform {
    constructor() {
        this.operations = [];
        this.appliedOperations = new Set();
    }
    
    // 操作变换算法
    transform(op1, op2) {
        // 根据操作类型进行变换
        if (op1.type === 'move' && op2.type === 'move') {
            return this.transformMoveOperations(op1, op2);
        } else if (op1.type === 'delete' && op2.type === 'move') {
            return this.transformDeleteMoveOperations(op1, op2);
        }
        // ... 其他操作组合
        
        return [op1, op2];
    }
    
    transformMoveOperations(op1, op2) {
        if (op1.objectId === op2.objectId) {
            // 相同对象的移动操作，应用相对变换
            const deltaPosition = new THREE.Vector3().subVectors(
                op2.newPosition, op2.oldPosition
            );
            
            return [
                {
                    ...op1,
                    oldPosition: new THREE.Vector3().addVectors(op1.oldPosition, deltaPosition),
                    newPosition: new THREE.Vector3().addVectors(op1.newPosition, deltaPosition)
                },
                op2
            ];
        }
        
        return [op1, op2];
    }
    
    applyOperation(operation) {
        if (this.appliedOperations.has(operation.id)) {
            return; // 操作已应用
        }
        
        // 应用变换到之前的操作
        const transformedOps = this.operations.map(existingOp => 
            this.transform(existingOp, operation)[0]
        );
        
        this.operations = transformedOps;
        this.operations.push(operation);
        this.appliedOperations.add(operation.id);
        
        // 应用到场景
        this.executeOperation(operation);
    }
}

How to implement procedurally generated complex geometries in Three.js?

考察点：程序化生成技术。

答案：

程序化生成通过算法创建复杂的3D几何体，常用于地形生成、建筑建模、自然现象模拟等场景。核心技术包括噪声函数、L-系统、细分算法等。

地形生成系统：

1. 基于噪声的地形

class TerrainGenerator {
    constructor(width = 100, height = 100, segments = 50) {
        this.width = width;
        this.height = height;
        this.segments = segments;
        this.heightMap = [];
        
        this.generateHeightMap();
    }
    
    // Perlin噪声实现
    perlinNoise(x, y, octaves = 4, persistence = 0.5, scale = 0.1) {
        let value = 0;
        let amplitude = 1;
        let frequency = scale;
        let maxValue = 0;
        
        for (let i = 0; i < octaves; i++) {
            value += this.noise(x * frequency, y * frequency) * amplitude;
            maxValue += amplitude;
            amplitude *= persistence;
            frequency *= 2;
        }
        
        return value / maxValue;
    }
    
    // 简单噪声函数
    noise(x, y) {
        const n = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
        return 2 * (n - Math.floor(n)) - 1;
    }
    
    generateHeightMap() {
        for (let y = 0; y <= this.segments; y++) {
            this.heightMap[y] = [];
            for (let x = 0; x <= this.segments; x++) {
                const worldX = (x / this.segments - 0.5) * this.width;
                const worldY = (y / this.segments - 0.5) * this.height;
                
                // 多层噪声叠加
                let height = this.perlinNoise(worldX, worldY, 4, 0.5, 0.02) * 20;
                height += this.perlinNoise(worldX, worldY, 8, 0.3, 0.05) * 5;
                height += this.perlinNoise(worldX, worldY, 16, 0.1, 0.1) * 1;
                
                this.heightMap[y][x] = height;
            }
        }
    }
    
    generateMesh() {
        const geometry = new THREE.PlaneGeometry(
            this.width, 
            this.height, 
            this.segments, 
            this.segments
        );
        
        const positions = geometry.attributes.position.array;
        
        // 应用高度贴图
        for (let i = 0; i < positions.length; i += 3) {
            const x = Math.floor((i / 3) % (this.segments + 1));
            const y = Math.floor((i / 3) / (this.segments + 1));
            
            positions[i + 2] = this.heightMap[y][x]; // Z坐标
        }
        
        geometry.attributes.position.needsUpdate = true;
        geometry.computeVertexNormals();
        
        // 生成纹理UV基于高度
        this.generateTextureCoordinates(geometry);
        
        return geometry;
    }
    
    generateTextureCoordinates(geometry) {
        const positions = geometry.attributes.position.array;
        const colors = new Float32Array(positions.length);
        
        for (let i = 0; i < positions.length; i += 3) {
            const height = positions[i + 2];
            
            // 基于高度的颜色映射
            if (height < 2) {
                // 水面 - 蓝色
                colors[i] = 0.2;
                colors[i + 1] = 0.4;
                colors[i + 2] = 0.8;
            } else if (height < 8) {
                // 沙滩 - 黄色
                colors[i] = 0.9;
                colors[i + 1] = 0.8;
                colors[i + 2] = 0.4;
            } else if (height < 15) {
                // 草地 - 绿色
                colors[i] = 0.3;
                colors[i + 1] = 0.7;
                colors[i + 2] = 0.2;
            } else {
                // 山峰 - 灰白色
                colors[i] = 0.8;
                colors[i + 1] = 0.8;
                colors[i + 2] = 0.9;
            }
        }
        
        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
    }
}

2. L-系统植物生成

class LSystemGenerator {
    constructor(axiom, rules, iterations) {
        this.axiom = axiom;
        this.rules = rules;
        this.iterations = iterations;
        this.current = axiom;
    }
    
    generate() {
        for (let i = 0; i < this.iterations; i++) {
            let next = '';
            
            for (const char of this.current) {
                next += this.rules[char] || char;
            }
            
            this.current = next;
        }
        
        return this.current;
    }
    
    createTreeGeometry(lString) {
        const segments = [];
        const stack = [];
        const turtle = {
            position: new THREE.Vector3(0, 0, 0),
            direction: new THREE.Vector3(0, 1, 0),
            up: new THREE.Vector3(0, 0, 1),
            angle: Math.PI / 6, // 30度
            length: 1,
            radius: 0.1
        };
        
        for (const char of lString) {
            switch (char) {
                case 'F': // 前进并绘制
                    const endPos = turtle.position.clone().add(
                        turtle.direction.clone().multiplyScalar(turtle.length)
                    );
                    
                    segments.push({
                        start: turtle.position.clone(),
                        end: endPos,
                        radius: turtle.radius
                    });
                    
                    turtle.position = endPos;
                    turtle.radius *= 0.95; // 逐渐变细
                    break;
                    
                case '+': // 左转
                    turtle.direction.applyAxisAngle(turtle.up, turtle.angle);
                    break;
                    
                case '-': // 右转
                    turtle.direction.applyAxisAngle(turtle.up, -turtle.angle);
                    break;
                    
                case '[': // 保存状态
                    stack.push({
                        position: turtle.position.clone(),
                        direction: turtle.direction.clone(),
                        up: turtle.up.clone(),
                        radius: turtle.radius
                    });
                    break;
                    
                case ']': // 恢复状态
                    const state = stack.pop();
                    turtle.position = state.position;
                    turtle.direction = state.direction;
                    turtle.up = state.up;
                    turtle.radius = state.radius;
                    break;
            }
        }
        
        return this.createMeshFromSegments(segments);
    }
}

// 使用示例：生成分形树
const treeRules = {
    'F': 'F[+F]F[-F]F'
};
const lSystem = new LSystemGenerator('F', treeRules, 4);
const treeString = lSystem.generate();
const treeGeometry = lSystem.createTreeGeometry(treeString);

How to implement Physically Based Rendering (PBR) in Three.js?

考察点：PBR渲染技术。

答案：

基于物理的渲染（PBR）模拟真实世界的光照和材质行为，通过物理准确的着色模型实现逼真的视觉效果。Three.js提供了完整的PBR材质系统和光照环境支持。

PBR材质系统：

1. MeshStandardMaterial配置

class PBRMaterialManager {
    constructor() {
        this.textureLoader = new THREE.TextureLoader();
        this.envMapLoader = new THREE.CubeTextureLoader();
    }
    
    createPBRMaterial(materialConfig) {
        const material = new THREE.MeshStandardMaterial();
        
        // 基础属性
        material.color = new THREE.Color(materialConfig.baseColor || 0xffffff);
        material.metalness = materialConfig.metalness || 0.0;
        material.roughness = materialConfig.roughness || 1.0;
        
        // 纹理贴图
        if (materialConfig.albedoMap) {
            material.map = this.textureLoader.load(materialConfig.albedoMap);
            material.map.encoding = THREE.sRGBEncoding;
        }
        
        if (materialConfig.normalMap) {
            material.normalMap = this.textureLoader.load(materialConfig.normalMap);
            material.normalScale = new THREE.Vector2(1, 1);
        }
        
        if (materialConfig.metalnessMap) {
            material.metalnessMap = this.textureLoader.load(materialConfig.metalnessMap);
        }
        
        if (materialConfig.roughnessMap) {
            material.roughnessMap = this.textureLoader.load(materialConfig.roughnessMap);
        }
        
        if (materialConfig.aoMap) {
            material.aoMap = this.textureLoader.load(materialConfig.aoMap);
            material.aoMapIntensity = materialConfig.aoIntensity || 1.0;
        }
        
        return material;
    }
    
    setupEnvironmentMapping(material, envMapPath) {
        // HDR环境贴图
        const pmremGenerator = new THREE.PMREMGenerator(renderer);
        
        new RGBELoader()
            .load(envMapPath, (texture) => {
                const envMap = pmremGenerator.fromEquirectangular(texture).texture;
                
                material.envMap = envMap;
                material.envMapIntensity = 1.0;
                
                // 场景环境
                scene.environment = envMap;
                scene.background = envMap;
                
                texture.dispose();
                pmremGenerator.dispose();
            });
    }
}

// 使用示例
const materialManager = new PBRMaterialManager();

const goldMaterial = materialManager.createPBRMaterial({
    baseColor: 0xffd700,
    metalness: 1.0,
    roughness: 0.1,
    normalMap: 'textures/gold_normal.jpg',
    roughnessMap: 'textures/gold_roughness.jpg'
});

materialManager.setupEnvironmentMapping(goldMaterial, 'hdri/studio.hdr');

2. 高级PBR着色器

const advancedPBRMaterial = new THREE.ShaderMaterial({
    uniforms: {
        // 基础属性
        albedo: { value: new THREE.Color(0.5, 0.5, 0.5) },
        metallic: { value: 0.0 },
        roughness: { value: 1.0 },
        ao: { value: 1.0 },
        
        // 纹理贴图
        albedoMap: { value: null },
        normalMap: { value: null },
        metallicMap: { value: null },
        roughnessMap: { value: null },
        aoMap: { value: null },
        
        // 环境光照
        envMap: { value: null },
        envMapIntensity: { value: 1.0 },
        
        // 光照参数
        lightPositions: { value: [] },
        lightColors: { value: [] },
        lightIntensities: { value: [] }
    },
    
    vertexShader: `
        varying vec2 vUv;
        varying vec3 vPosition;
        varying vec3 vNormal;
        varying vec3 vWorldPosition;
        
        void main() {
            vUv = uv;
            vNormal = normalize(normalMatrix * normal);
            vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
            vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;
            
            gl_Position = projectionMatrix * vec4(vPosition, 1.0);
        }
    `,
    
    fragmentShader: `
        uniform vec3 albedo;
        uniform float metallic;
        uniform float roughness;
        uniform float ao;
        
        uniform sampler2D albedoMap;
        uniform sampler2D normalMap;
        uniform sampler2D metallicMap;
        uniform sampler2D roughnessMap;
        uniform sampler2D aoMap;
        uniform samplerCube envMap;
        uniform float envMapIntensity;
        
        varying vec2 vUv;
        varying vec3 vPosition;
        varying vec3 vNormal;
        varying vec3 vWorldPosition;
        
        const float PI = 3.14159265359;
        
        // 法向分布函数 (GGX)
        float DistributionGGX(vec3 N, vec3 H, float roughness) {
            float a = roughness * roughness;
            float a2 = a * a;
            float NdotH = max(dot(N, H), 0.0);
            float NdotH2 = NdotH * NdotH;
            
            float num = a2;
            float denom = (NdotH2 * (a2 - 1.0) + 1.0);
            denom = PI * denom * denom;
            
            return num / denom;
        }
        
        // 几何函数
        float GeometrySchlickGGX(float NdotV, float roughness) {
            float r = (roughness + 1.0);
            float k = (r * r) / 8.0;
            
            float num = NdotV;
            float denom = NdotV * (1.0 - k) + k;
            
            return num / denom;
        }
        
        float GeometrySmith(vec3 N, vec3 V, vec3 L, float roughness) {
            float NdotV = max(dot(N, V), 0.0);
            float NdotL = max(dot(N, L), 0.0);
            float ggx2 = GeometrySchlickGGX(NdotV, roughness);
            float ggx1 = GeometrySchlickGGX(NdotL, roughness);
            
            return ggx1 * ggx2;
        }
        
        // 菲涅尔反射
        vec3 fresnelSchlick(float cosTheta, vec3 F0) {
            return F0 + (1.0 - F0) * pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
        }
        
        void main() {
            // 采样纹理
            vec3 albedoColor = texture2D(albedoMap, vUv).rgb * albedo;
            float metallicValue = texture2D(metallicMap, vUv).r * metallic;
            float roughnessValue = texture2D(roughnessMap, vUv).r * roughness;
            float aoValue = texture2D(aoMap, vUv).r * ao;
            
            vec3 N = normalize(vNormal);
            vec3 V = normalize(cameraPosition - vWorldPosition);
            
            // 基础反射率
            vec3 F0 = vec3(0.04);
            F0 = mix(F0, albedoColor, metallicValue);
            
            // 环境光照
            vec3 F = fresnelSchlick(max(dot(N, V), 0.0), F0);
            vec3 kS = F;
            vec3 kD = vec3(1.0) - kS;
            kD *= 1.0 - metallicValue;
            
            vec3 irradiance = textureCube(envMap, N).rgb;
            vec3 diffuse = irradiance * albedoColor;
            
            vec3 ambient = (kD * diffuse) * aoValue;
            
            gl_FragColor = vec4(ambient * envMapIntensity, 1.0);
        }
    `
});

What are the performance monitoring and debugging strategies for Three.js applications?

考察点：性能监控能力。

答案：

Three.js应用的性能监控需要从渲染性能、内存使用、GPU利用率等多个维度进行分析。建立完善的监控和调试体系有助于及时发现性能瓶颈并进行优化。

性能监控系统：

1. 实时性能监控

class PerformanceMonitor {
    constructor() {
        this.stats = {
            fps: 0,
            frameTime: 0,
            drawCalls: 0,
            triangles: 0,
            geometries: 0,
            textures: 0,
            memoryUsage: 0
        };
        
        this.frameCount = 0;
        this.lastTime = performance.now();
        this.fpsHistory = [];
        this.frameTimeHistory = [];
        
        this.setupGUI();
    }
    
    update(renderer) {
        const currentTime = performance.now();
        const deltaTime = currentTime - this.lastTime;
        
        this.frameCount++;
        this.stats.frameTime = deltaTime;
        this.frameTimeHistory.push(deltaTime);
        
        // 每秒更新一次FPS
        if (this.frameCount % 60 === 0) {
            this.stats.fps = 1000 / (this.frameTimeHistory.reduce((a, b) => a + b) / this.frameTimeHistory.length);
            this.fpsHistory.push(this.stats.fps);
            
            // 保持历史记录长度
            if (this.fpsHistory.length > 120) {
                this.fpsHistory.shift();
            }
            if (this.frameTimeHistory.length > 60) {
                this.frameTimeHistory.length = 0;
            }
        }
        
        // 渲染统计
        const info = renderer.info;
        this.stats.drawCalls = info.render.calls;
        this.stats.triangles = info.render.triangles;
        this.stats.geometries = info.memory.geometries;
        this.stats.textures = info.memory.textures;
        
        // 内存使用估算
        this.estimateMemoryUsage(renderer);
        
        this.lastTime = currentTime;
        this.updateDisplay();
    }
    
    estimateMemoryUsage(renderer) {
        const info = renderer.info;
        
        // 估算GPU内存使用
        let textureMemory = 0;
        let geometryMemory = 0;
        
        // 简化的内存计算
        textureMemory = info.memory.textures * 4 * 1024 * 1024; // 假设每个纹理4MB
        geometryMemory = info.memory.geometries * 1024 * 1024; // 假设每个几何体1MB
        
        this.stats.memoryUsage = (textureMemory + geometryMemory) / (1024 * 1024); // MB
    }
    
    setupGUI() {
        // 创建性能显示面板
        this.panel = document.createElement('div');
        this.panel.style.position = 'fixed';
        this.panel.style.top = '10px';
        this.panel.style.left = '10px';
        this.panel.style.backgroundColor = 'rgba(0,0,0,0.8)';
        this.panel.style.color = 'white';
        this.panel.style.padding = '10px';
        this.panel.style.fontSize = '12px';
        this.panel.style.fontFamily = 'monospace';
        document.body.appendChild(this.panel);
    }
    
    updateDisplay() {
        this.panel.innerHTML = `
            FPS: ${this.stats.fps.toFixed(1)}
            Frame Time: ${this.stats.frameTime.toFixed(2)}ms
            Draw Calls: ${this.stats.drawCalls}
            Triangles: ${this.stats.triangles.toLocaleString()}
            Geometries: ${this.stats.geometries}
            Textures: ${this.stats.textures}
            GPU Memory: ${this.stats.memoryUsage.toFixed(1)}MB
        `;
        
        // 性能警告
        if (this.stats.fps < 30) {
            this.panel.style.backgroundColor = 'rgba(255,0,0,0.8)';
        } else if (this.stats.fps < 50) {
            this.panel.style.backgroundColor = 'rgba(255,165,0,0.8)';
        } else {
            this.panel.style.backgroundColor = 'rgba(0,0,0,0.8)';
        }
    }
    
    getPerformanceReport() {
        return {
            averageFPS: this.fpsHistory.reduce((a, b) => a + b, 0) / this.fpsHistory.length,
            minFPS: Math.min(...this.fpsHistory),
            maxFPS: Math.max(...this.fpsHistory),
            currentStats: { ...this.stats }
        };
    }
}