一、3D场景初始化：从空白到立方体

1.1 HTML模板搭建与依赖引入

创建Three.js应用的首要步骤是构建基础HTML结构。推荐使用CDN方式引入核心库文件，示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Three.js基础场景</title>
    <style>body { margin: 0; }</style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <script src="main.js"></script>
</body>
</html>

关键点说明：

必须引入three.min.js核心库
后续章节的交互功能需额外加载OrbitControls.js
建议将业务逻辑分离至独立JS文件

1.2 核心渲染组件创建

在main.js中初始化三大核心组件：

// 场景设置
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x333333);
// 相机配置（透视相机）
const camera = new THREE.PerspectiveCamera(
    75, // 视野角度
    window.innerWidth / window.innerHeight, // 宽高比
    0.1, // 近裁剪面
    1000 // 远裁剪面
);
camera.position.z = 5;
// 渲染器初始化
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

1.3 基础几何体生成

创建旋转立方体的完整流程：

// 几何体与材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ 
    color: 0x00ff00,
    wireframe: false
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

关键参数说明：

BoxGeometry参数依次为长宽高
MeshBasicMaterial的wireframe属性控制线框模式
旋转动画通过修改rotation属性实现

二、进阶交互控制：轨道控制器详解

2.1 时间驱动与补间动画对比

动画类型	实现原理	适用场景
时间驱动动画	requestAnimationFrame循环	持续旋转/缩放效果
补间动画	插值计算关键帧	路径动画/状态过渡

补间动画实现示例：

import { Tween } from '@tweenjs/tween.js';
// 创建补间动画
new Tween(cube.position)
    .to({ x: 2 }, 1000) // 1秒内移动到x=2
    .easing(TWEEN.Easing.Quadratic.Out)
    .start();
// 动画循环中更新
function animate(time) {
    TWEEN.update(time);
    // ...原有渲染代码
}

2.2 轨道控制器配置指南

OrbitControls核心参数配置表：

参数	默认值	功能说明
enableDamping	false	启用惯性阻尼效果
dampingFactor	0.05	阻尼系数（值越小惯性越强）
rotateSpeed	1.0	旋转灵敏度
zoomSpeed	1.0	缩放灵敏度

完整配置示例：

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.8;
// 需要在animate函数中调用update
function animate() {
    controls.update();
    // ...其他代码
}

2.3 多设备交互实现

触摸事件检测代码框架：

renderer.domElement.addEventListener('touchstart', (e) => {
    if (e.touches.length === 2) {
        // 双指缩放处理
    } else if (e.touches.length === 1) {
        // 单指旋转处理
    }
});
// 鼠标点击检测
renderer.domElement.addEventListener('click', (e) => {
    const mouse = new THREE.Vector2(
        (e.clientX / window.innerWidth) * 2 - 1,
        -(e.clientY / window.innerHeight) * 2 + 1
    );
    // 射线检测实现对象拾取
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
        console.log('点击对象:', intersects[0].object);
    }
});

三、着色器编程：从基础到特效实现

3.1 GLSL着色器结构解析

顶点着色器标准模板：

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
attribute vec3 position;
attribute vec3 normal;
varying vec3 vNormal;
void main() {
    vNormal = normal;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

片元着色器标准模板：

varying vec3 vNormal;
uniform vec3 color;
void main() {
    vec3 light = normalize(vec3(1.0, 1.0, 1.0));
    float diffuse = max(dot(vNormal, light), 0.0);
    gl_FragColor = vec4(color * diffuse, 1.0);
}

3.2 动态水面波纹实现

噪声函数生成波纹：

// 顶点着色器修改
uniform float time;
varying vec2 vUv;
float noise(vec2 p) {
    return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}
void main() {
    vUv = uv;
    float wave = sin(position.x * 5.0 + time) * 0.1;
    vec3 newPos = position + vec3(0.0, wave, 0.0);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
}

3.3 JS与着色器数据交互

通过uniform变量传递数据：

// 创建着色器材质
const shaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 },
        color: { value: new THREE.Color(0x1e90ff) }
    },
    vertexShader: vertexShaderSource,
    fragmentShader: fragmentShaderSource
});
// 动画循环中更新uniform
function animate(time) {
    shaderMaterial.uniforms.time.value = time * 0.001;
    // ...渲染代码
}

四、性能优化与最佳实践

4.1 渲染性能监控

关键指标检测代码：

const stats = new Stats();
document.body.appendChild(stats.dom);
function animate() {
    stats.begin();
    // ...渲染代码
    stats.end();
    requestAnimationFrame(animate);
}

4.2 资源管理策略

几何体复用：使用THREE.InstancedMesh批量渲染
纹理压缩：采用KTX2或BASIS格式
内存释放：及时调用dispose()方法

4.3 跨平台适配方案

响应式设计实现：

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

本指南完整覆盖了Three.js开发的核心技术点，从基础场景搭建到高级着色器编程均有详细说明。通过提供的代码示例和参数配置表，开发者可以快速构建出具有专业水准的3D交互应用。建议结合官方文档进行深入学习，并积极参与开源社区讨论以获取最新技术动态。

Three.js实战指南：从基础场景到高级着色器开发