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

Three.js 是一款强大的JavaScript库，用于创建和展示3D图形，本教程旨在帮助读者快速掌握Three.js的基本概念、技巧及实战应用，从3D场景的搭建、材质与灯光的设置到摄像机的使用，逐步深入，助力开发者构建出引人入胜的3D网页作品，不论你是初学者还是希望提升技能的资深工程师，都能在这里找到想要的答案，让我们一起探索Three.js的奇幻世界，开启沉浸式的3D体验之旅吧！

随着 Web 技术的不断发展，3D 交互式网页应用越来越受到用户的喜爱，Three.js 是一款强大的 JavaScript 3D 库，它使得在浏览器中创建和显示 3D 图形变得非常简单，本文将详细介绍 Three.js 的基础知识和实战应用，帮助开发者快速上手并构建出令人印象深刻的 3D 网页。

Three.js 基础入门

在开始使用 Three.js 之前，需要确保你的网页环境支持 JavaScript 和 WebGL，Three.js 本身就是一个基于 WebGL 的库,因此不需要额外的配置。

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

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

创建一个简单的场景（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);

几何体、材质和灯光

在 Three.js 中，我们可以使用多种几何体（Geometry）来创建 3D 对象,创建一个立方体：

const geometry = new THREE.BoxGeometry();

给几何体添加材质（Material）,决定了对象的表面颜色和纹理：

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

为了增强场景的真实感，我们需要添加灯光（Light），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);

实战案例

我们通过一个简单的实战案例来巩固所学知识,创建一个旋转的立方体：

function animate() {
  requestAnimationFrame(animate);
  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
// 创建立方体几何体、材质和网格
const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cubeMesh);
animate();

我们需要在窗口大小改变时更新渲染器的尺寸：

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

就是关于 Three.js 的基础教程和实战案例，通过学习和实践这些知识，你可以开始创建自己的 3D 网页应用，Three.js 的功能远不止于此，你还可以利用其丰富的 API 来实现更复杂的功能，如纹理贴图、阴影、粒子系统等。