Three.js 教程，3D 网页开发初探

Three.js是一个流行的JavaScript库，用于在网页上创建3D图形和动画，它简化了复杂的三维图形的创建过程，使得开发者可以更快速地在网页上构建互动的3D体验，教程部分将指导你如何安装 Three.js，并通过基本的例子来了解它的基本特性和使用方法，我们将深入探讨如何使用Three.js进行3D场景设置、添加材质、光源，并最终展示如何将这些元素组合起来，创建出一个完整的3D网页应用。

随着Web技术的不断革新,3D图形渲染已经成为网页设计的重要组成部分，Three.js作为一款流行的JavaScript库，简化了在浏览器中创建和显示3D图形的过程，本文将为您详细介绍Three.js教程，带您入门3D网页开发。

Three.js简介

Three.js是一个功能强大的WebGL抽象库，它提供了一整套工具和接口，使得开发者能够轻松地在浏览器中创建复杂的3D场景，无需深入WebGL编程的复杂性，Three.js就能让开发者专注于创作的灵感，而不用纠缠于底层的图形渲染细节。

安装Three.js

要开始使用Three.js，首先需要在您的网页中引入它的JavaScript文件，您可以通过CDN链接直接引入，如下所示：

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

如果您的项目使用模块化构建工具,也可以通过npm安装Three.js。

基本场景设置

在Three.js中，创建一个基本的3D场景需要设置场景（Scene）、相机（Camera）和渲染器（Renderer），以下是创建这些基本组件的代码示例：

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

创建几何体和材质

为了让3D对象能够在场景中显示,需要创建相应的几何体（Geometry）和材质（Material），以下是一个简单的示例：

// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry();
// 创建一个基本材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建一个网格对象，并将几何体和材质应用到它上面
const cube = new THREE.Mesh(geometry, material);
// 将网格对象添加到场景中
scene.add(cube);

添加光照和阴影

为了让场景中的物体具有更真实的外观,需要添加光源（Light）并启用阴影，以下是一个简单的光照设置示例：

// 创建一个方向光
const light = new THREE.DirectionalLight(0xffffff, 1);
// 启用方向光的阴影
light.castShadow = true;
// 将方向光添加到场景中
scene.add(light);
// 在立方体上设置阴影接收器
cube.castShadow = true;
cube.receiveShadow = true;
// 创建一个平面作为地面，并启用阴影
const groundGeometry = new THREE.PlaneGeometry(10, 10);
const groundMaterial = new THREE.MeshPhongMaterial({ color: 0x222222 });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.receiveShadow = true;
// 将地面添加到场景中
scene.add(ground);
// 配置相机以正确显示阴影
camera.left = -5;
camera.right = 5;
camera.top = 5;
camera.bottom = -5;
camera.lookAt(scene.position);