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

** ，本文系统介绍了Three.js 3D网页开发的完整流程，从基础入门到实战项目落地，首先讲解Three.js的核心概念，包括场景（Scene）、相机（Camera）、渲染器（Renderer）三大组件，以及几何体（Geometry）、材质（Material）和网格（Mesh）的构建方法，随后深入光照、纹理、动画等进阶功能，并通过代码示例演示基础3D模型的创建与交互控制，最后结合实际案例（如产品展示、数据可视化或游戏原型），指导读者完成从需求分析到性能优化的完整项目开发，帮助开发者快速掌握Three.js在Web端3D应用中的实战技能。

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

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

Three.js 简介

什么是Three.js？

Three.js 是一个基于 WebGL 的JavaScript 3D库，它封装了复杂的WebGL API，提供了一套简单易用的接口，使开发者能够快速构建3D场景、模型、动画和交互效果。

WebGL 是浏览器提供的底层3D图形API，直接操作GPU进行渲染，但学习曲线陡峭，而 Three.js 在WebGL之上构建了更高层次的抽象，让开发者可以专注于场景设计，而不必关心底层的着色器、缓冲区管理等细节。

Three.js 的核心概念

在开始编码之前,我们需要了解Three.js的几个核心组成部分：

场景（Scene）：3D世界的容器，所有对象（如模型、灯光、相机）都放在场景中。
相机（Camera）：定义观察视角，常见的有 透视相机（PerspectiveCamera） 和 正交相机（OrthographicCamera）。
渲染器（Renderer）：负责将3D场景渲染到HTML的 <canvas> 元素上，最常用的是 WebGLRenderer。
几何体（Geometry）：定义3D对象的形状，如立方体、球体、平面等。
材质（Material）：定义物体的表面属性，如颜色、纹理、光照反应等。
网格（Mesh）：由 几何体 + 材质 组成，是实际渲染的对象。
光源（Light）：影响物体的明暗和阴影，如环境光、方向光、点光源等。

Three.js 入门：第一个3D场景

环境搭建

要开始使用Three.js，首先需要引入它的库，可以通过 CDN 或 npm 安装：

方式1：CDN（直接引入）

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

方式2：npm 安装（适用于现代前端项目）

npm install three

然后在JavaScript中导入：

import * as THREE from 'three';

创建第一个3D场景

下面是一个完整的HTML文件,展示如何创建一个旋转的立方体：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Three.js 第一个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>
        // 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();
        // 6. 窗口大小调整
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

代码解析：

场景（Scene）：所有3D对象的容器。
相机（Camera）：定义观察视角，PerspectiveCamera 模拟人眼视角。
渲染器（Renderer）：将3D场景绘制到 <canvas> 上。
立方体（Mesh）：由 BoxGeometry（几何体）和 MeshBasicMaterial（材质）组成。
动画循环（animate）：通过 requestAnimationFrame 实现平滑动画。

运行这段代码,你将看到一个 旋转的绿色立方体！

Three.js 进阶：光照、纹理与交互

添加光照

默认情况下,MeshBasicMaterial 不受光照影响，如果要使用更真实的材质（如 MeshStandardMaterial），需要添加光源：

const ambientLight = new THREE.AmbientLight(0x404040); // 环境光
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 方向光
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

加载纹理

可以使用 TextureLoader 加载图片作为材质：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture });

鼠标交互

通过 Raycaster 可以实现鼠标点击检测：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
window.addEventListener('click', (event) => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects([cube]);
    if (intersects.length > 0) {
        console.log("点击了立方体！");
    }
});

项目实战：3D 产品展示页面

项目需求

构建一个 3D 产品展示页面，用户可以：

旋转、缩放产品模型
切换不同材质/颜色
查看产品详情

实现步骤

加载3D模型（GLTF/GLB格式）（使用 GLTFLoader）
添加控制（OrbitControls），允许用户拖拽旋转、缩放
UI交互：颜色选择器、产品信息面板

示例代码（使用 GLTFLoader 加载模型）：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const loader = new GLTFLoader();
loader.load('model.gltf', (gltf) => {
    const model = gltf.scene;
    scene.add(model);
    // 添加控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // 平滑阻尼
    controls.dampingFactor = 0.05;
});

Three.js 让 3D网页开发变得简单而强大，从基础的几何体渲染，到复杂的光照、动画和交互，开发者可以轻松构建各种3D应用。

本文涵盖了：
✅ Three.js 核心概念（场景、相机、渲染器等）
✅ 第一个3D场景（旋转立方体）
✅ 进阶功能（光照、纹理、交互）
✅ 项目实战（3D产品展示）

如果你想进一步深入学习,可以探索：
🔹 粒子系统（Particles）
🔹 后期处理（Post-Processing）（如模糊、辉光）
🔹 WebXR（VR/AR支持）

拿起代码，开始你的3D网页开发之旅吧！ 🚀