Three.js 教程，3D 网页开发入门与实战

Three.js是一款流行的JavaScript库，用于在网页上创建和显示3D图形，本教程将引导你通过3D网页开发的的基础知识，包括Three.js的基本概念、场景设置、坐标系理解以及光照与材质的使用，旨在帮助你快速掌握Three.js并应用于实际项目，通过理论与实践相结合的方式，我们将一步步解析如何使用Three.js构建出引人入胜的3D视觉体验，无论你是初学者还是希望提升技能的开发者，都将从中获益良多。

随着 Web 技术的不断进步，用户在网络上的交互体验越来越受到重视，3D 交互式网页逐渐成为一种趋势，为用户提供了沉浸式的浏览体验，本文将为大家带来一篇关于 Three.js 教程，帮助您从零基础开始学习 Three.js 进行 3D 网页开发。

前言

在许多 Web 开发场景中，2D 图形已经不能满足用户的需求，3D 交互式图形为网站赋予了新的生命力，而 Three.js 是一款基于 WebGL 的 3D 图形库，让开发者无需编写复杂的 WebGL 代码即可轻松创建出精彩的 3D 场景，本文将为您详细介绍 Three.js 的使用方法和开发流程。

环境准备

在学习 Three.js 之前，首先需要确保您的计算机满足以下要求：

显卡：支持 WebGL 的兼容显卡；
浏览器：主流现代浏览器（如 Chrome、Firefox）；
开发工具：Visual Studio Code、Sublime Text 或其他适合 Web 开发的编辑器。

安装 Three.js

最简单的方法是通过 CDN 链接引入 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';

基础场景搭建

创建场景（Scene）：
```
const scene = new THREE.Scene();
```

创建相机（Camera）：

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

创建渲染器（Renderer）：

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

添加一个简单的立方体（Cube）到场景中：

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

设置动画循环：

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

调整窗口大小时自适应：

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

进阶实战案例

灯光设置：

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

材质设置：

const material = new THREE.MeshPhysicalMaterial({ color: 0xff0000, metalness: 1, roughness: 0.5 });
const sphere = new THREE.SphereGeometry(1, 32, 32);
const sphereMesh = new THREE.Mesh(material, sphere);
scene.add(sphereMesh);