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

Three.js 是一款强大的 3D 图形库，可简化 Web 页面上的 3D 图形开发，本文从基础开始，逐步深入，探讨 Three.js 的各项功能，包括场景设置、坐标系、几何体、材质与灯光，并通过一个实战项目，展示如何创建逼真的 3D 场景，适合初学者及有 web 开发经验的开发者，实践是掌握 Three.js 的关键，从入门到项目实战，帮助您快速掌握 Three.js 的开发技巧。

随着互联网的快速发展,人们对立体感和交互性的需求越来越高，这促使越来越多的开发者开始探索WebGL技术的应用，Three.js作为一个流行的WebGL库，简化了开发过程，让Web开发者能够更轻松地创建出引人入胜的三维网页，本文将从基础概念讲起，逐步深入，带领读者掌握Three.js 3D网页开发的技能，并通过实际项目示例，使读者真正理解如何将理论与实践相结合。

第一章：Three.js基础入门

Three.js是一个广泛使用的WebGL库，它提供了一种易于使用的方法来创建和显示3D图形，它抽象了WebGL的复杂性，使得开发者可以专注于艺术表达和交互逻辑，而不是底层的图形编程。

2 如何安装Three.js

需要在HTML文件中引入Three.js库：

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

或者通过npm安装：

npm install three

然后在JavaScript文件中引入：

import * as THREE from 'three';

3 基本组件：场景、相机和渲染器

在Three.js中，场景（Scene）是所有3D对象的容器，相机（Camera）用于观察场景中的对象，而渲染器（Renderer）则负责将场景和相机视图转换为像素级的RGB颜色。

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);

第二章：几何体、材质和灯光

1 几何体

Three.js提供了多种几何体，如立方体（BoxGeometry）、球体（SphereGeometry）等，几何体是构建三维场景的基本元素。

const geometry = new THREE.BoxGeometry();

2 材质

材质决定了物体的外观,Three.js提供了多种材质，包括基本的PhongMaterial和更复杂的MeshBasicMaterial。

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

3 灯光

灯光是模拟现实世界中光照效果的重要手段,Three.js提供了多种灯光类型，如环境光（AmbientLight）、方向光（DirectionalLight）和点光源（PointLight）。

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

第三章：创建一个简单的3D场景

现在我们可以将这些基本组件组合起来,创建一个简单的3D场景：

// 创建场景、相机和渲染器
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();

通过上述步骤,我们成功地创建了一个简单的3D场景，并且立方体可以在场景中旋转，这是一个非常基础的例子，但它展示了Three.js的基本用法。

第四章：进阶应用与实战项目

前面我们介绍了Three.js的基础知识，包括场景、相机、渲染器、几何体、材质和灯光，接下来我们将深入探讨一些进阶用法，并通过一个实战项目来巩固所学知识。

1 使用纹理

纹理可以显著提升模型的视觉效果,Three.js提供了多种纹理类型，如漫反射贴图（DiffuseTexture）、法线贴图（NormalMap）和环境光遮蔽贴图（AmbientOcclusionMap）。

const textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/texture.jpg', (tex) => {
    const material = new THREE.MeshBasicMaterial({ map: tex });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
});

2 添加阴影

阴影效果可以极大地增强交互体验,Three.js支持多种阴影类型，包括透视阴影（PerspectiveShadow）和环境光照阴影（AmbientLightShadow）。

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
directionalLight.castShadow = true;
scene.add(directionalLight);
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
planeMesh.rotation.x = -Math.PI / 2;
planeMesh.receiveShadow = true;
scene.add(planeMesh);
// 在其他对象上设置投影属性
cube.castShadow = true;
cube.position.y = 1;

通过上述章节的学习,读者已经掌握了Three.js 3D网页开发的基本技能，通过实际项目示例，读者可以将这些理论知识应用到实践中，创建出功能丰富、交互性强的3D网页应用。

在实际开发过程中,可能会遇到各种挑战和问题，这时，可以参考Three.js的官方文档、论坛和GitHub仓库，寻求帮助和分享经验，不断学习和实践，将使读者在Three.js 3D网页开发领域不断进步，创造出更多优秀的作品。