Three.js 3D网页开发，从入门到项目实战

该文档围绕Three.js 3D网页开发展开，系统讲解从入门基础到项目实战的全流程，首先介绍Three.js的核心概念与基础环境搭建（如场景、相机、渲染器等组件的初始化），帮助初学者快速建立开发认知；随后深入解析关键知识点，包括几何体建模、材质与纹理应用、光照效果设置、动画实现及交互控制（如鼠标/键盘事件响应）；最后通过实际项目案例（如3D模型展示、交互式场景等），指导读者将理论知识转化为具体功能实现，涵盖代码编写、调试优化及性能提升技巧，助力开发者掌握Three.js在网页端构建沉浸式3D体验的完整能力。

随着Web技术的不断发展,3D网页应用逐渐成为用户体验的重要组成部分，无论是游戏、数据可视化、虚拟现实（VR），还是产品展示，3D技术都能带来更直观、更具沉浸感的交互体验，而 Three.js 作为JavaScript中最流行的3D图形库之一，让开发者能够轻松地在浏览器中构建复杂的3D场景，无需深入掌握底层的WebGL知识。

本文将从 Three.js的基础概念 开始，逐步介绍 核心API的使用，并通过 一个完整的项目实战，帮助读者从零开始掌握3D网页开发的核心技能。

Three.js 是什么？

Three.js 是一个基于 WebGL 的JavaScript 3D库，它封装了复杂的底层图形编程细节，提供了一套简单易用的API，使得开发者可以快速构建3D场景、模型、动画和交互效果。

为什么选择Three.js？

跨平台兼容性：基于Web标准，支持所有现代浏览器（Chrome、Firefox、Safari、Edge等）。
无需WebGL基础：即使不懂底层图形编程，也能快速上手。
丰富的功能：支持3D模型加载（如GLTF、OBJ）、光照、阴影、粒子系统、后期处理等。
活跃的社区：拥有大量的教程、示例和开源项目，便于学习和扩展。

Three.js 核心概念与基础入门

在开始编码之前,我们需要了解Three.js的几个核心概念：

场景（Scene）

场景是3D世界的“容器”，所有的3D对象（如几何体、灯光、相机）都必须添加到场景中才能被渲染。

相机（Camera）

相机决定了我们如何“观察”3D场景，Three.js 提供了几种相机类型：

PerspectiveCamera（透视相机）：模拟人眼视角，近大远小。
OrthographicCamera（正交相机）：无透视效果，常用于2D游戏或UI界面。

渲染器（Renderer）

渲染器负责将3D场景绘制到HTML的 <canvas> 元素上，Three.js 主要使用 WebGLRenderer 进行硬件加速渲染。

几何体（Geometry）与材质（Material）

几何体 定义3D对象的形状（如立方体、球体、平面）。
材质定义对象的外观（如颜色、纹理、金属度）。
网格（Mesh） = 几何体 + 材质，是最终渲染的3D对象。

光源（Light）

Three.js 支持多种光源，如：

环境光（AmbientLight）：提供全局照明。
方向光（DirectionalLight）：模拟太阳光，有方向性。
点光源（PointLight）：像灯泡一样向四周发光。

Three.js 基础代码示例

下面是一个最简单的Three.js程序，创建一个旋转的立方体：

<!DOCTYPE html>
<html>
<head>Three.js 入门示例</title>
    <style> canvas { display: block; } </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 1. 创建场景
        const scene = new THREE.Scene();
        // 2. 创建相机（透视相机）
        const camera = new THREE.PerspectiveCamera(
            75, // 视野角度
            window.innerWidth / window.innerHeight, // 宽高比
            0.1, // 近裁剪面
            1000 // 远裁剪面
        );
        camera.position.z = 5; // 相机后移，避免看到黑色背景
        // 3. 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        // 4. 创建一个立方体
        const geometry = new THREE.BoxGeometry(); // 立方体几何体
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色材质
        const cube = new THREE.Mesh(geometry, material); // 网格对象
        scene.add(cube); // 添加到场景
        // 5. 渲染循环
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01; // 绕X轴旋转
            cube.rotation.y += 0.01; // 绕Y轴旋转
            renderer.render(scene, camera); // 渲染场景
        }
        animate();
    </script>
</body>
</html>

运行效果：页面会显示一个旋转的绿色立方体。

Three.js 项目实战：3D 产品展示

我们通过一个 3D产品展示项目 来巩固所学知识，这个项目将实现：

加载一个3D模型（如汽车、手机）。
添加鼠标交互（旋转、缩放）。
实现光照和阴影效果。

项目结构

project/
├── index.html
├── main.js
└── models/ (存放3D模型文件，如.gltf或.obj)

HTML 结构

<!DOCTYPE html>
<html>
<head>3D 产品展示</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    <script src="main.js"></script>
</body>
</html>

JavaScript 代码（main.js）

// 1. 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0); // 浅灰色背景
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // 启用阴影
document.body.appendChild(renderer.domElement);
// 4. 添加轨道控制器（允许鼠标交互）
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 平滑控制
// 5. 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // 方向光
directionalLight.position.set(5, 5, 5);
directionalLight.castShadow = true; // 投射阴影
scene.add(directionalLight);
// 6. 加载3D模型（GLTF格式）
const loader = new THREE.GLTFLoader();
loader.load(
    'models/product.gltf', // 模型路径
    (gltf) => {
        const model = gltf.scene;
        model.traverse((child) => {
            if (child.isMesh) {
                child.castShadow = true; // 模型投射阴影
                child.receiveShadow = true; // 模型接收阴影
            }
        });
        scene.add(model);
    },
    (progress) => {
        console.log('加载进度:', (progress.loaded / progress.total * 100) + '%');
    },
    (error) => {
        console.error('模型加载失败:', error);
    }
);
// 7. 渲染循环
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 更新控制器
    renderer.render(scene, camera);
}
animate();
// 8. 窗口大小调整
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

项目效果：