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

Three.js 是一款强大的3D图形库，简化了WebGL编程，本文详细介绍了使用Three.js进行3D网页开发的步骤，包括基本设置、场景创建、坐标系、相机视角调整及材质灯光使用，并通过简单项目实战展示了实现效果，为初学者提供指导。

随着互联网的快速发展,人们对网页交互性和视觉效果的要求越来越高，3D网页开发作为一种新兴的技术手段，逐渐成为了网页设计领域的新宠，Three.js 是一款基于 WebGL 的 3D 图形库，它使得浏览器端的 3D 图形渲染变得更加简单和高效，本文将从入门到项目实战，带领大家走进 Three.js 3D 网页开发的奇妙世界。

Three.js 入门

1 引入 Three.js

需要在 HTML 文件中引入 Three.js 库，你可以从官方网站下载最新版本的 Three.js，或者使用 CDN 链接直接引入，以下是 CDN 链接示例：

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

2 创建场景、相机和渲染器

在 Three.js 中，场景（Scene）、相机（Camera）和渲染器（Renderer）是构建 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);

3 添加几何体和材质

为了在场景中显示 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);

进阶功能

1 添加灯光

灯光对于 3D 场景的立体感和氛围至关重要，Three.js 提供了多种类型的灯光，如方向光（DirectionalLight）、点光源（PointLight）和环境光（AmbientLight）。

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

2 创建动画

为了让 3D 对象具有动画效果，可以使用 requestAnimationFrame 函数创建动画循环，并更新对象的位置或属性。

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