Three.js 基础概念：构建3D世界的核心要素

前言

在数字化时代的浪潮中，Three.js 作为一款强大的 JavaScript 库，使得开发者能够轻松地将逼真的三维图形带入网页。对于初学者来说，理解 Three.js 的核心概念是掌握这个库的关键第一步。本文将深入探讨这些基础概念，帮助你为创建自己的3D项目打下坚实的基础。

一、场景（Scene）

场景就像是一个舞台，所有3D元素都在这里共存。它是容纳几何体、光源、相机等所有对象的容器。在 Three.js 中，场景通过 THREE.Scene() 构造函数创建：

const scene = new THREE.Scene();

一旦有了场景，我们就可以开始向其中添加各种元素，从而构建出想要展示的世界。

二、相机（Camera）

为了看到场景中的内容，我们需要一个“眼睛”，这就是相机的作用。Three.js 提供了两种主要类型的相机：透视相机 (THREE.PerspectiveCamera) 和正交相机 (THREE.OrthographicCamera)。透视相机模仿了人眼观察世界的自然方式，而正交相机则提供了平行投影，常用于 CAD 软件和某些类型的游戏。

创建一个透视相机时，你需要指定视场角（FOV）、宽高比（aspect ratio）、近裁剪面（near clipping plane）和远裁剪面（far clipping plane）。这些参数决定了相机如何捕捉场景以及哪些部分会被渲染到屏幕上。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5); // 设置相机位置

三、渲染器（Renderer）

渲染器的任务是把场景和相机的信息转化为可以显示在屏幕上的图像。Three.js 支持多种渲染技术，但最常用的是 WebGL 渲染器 (THREE.WebGLRenderer)，因为它利用了现代 GPU 的强大性能，可以高效地处理复杂的图形。

要使用 WebGL 渲染器，首先要创建一个实例，并设置其尺寸以匹配浏览器窗口大小。然后，需要将渲染器的 DOM 元素添加到页面上，以便它能够正确显示输出。

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

四、物体（Object）

物体是 Three.js 场景中最基本的组成部分之一。它们可以是几何形状、光源、甚至是其他更复杂的实体。每个物体都继承自 THREE.Object3D 类，这意味着它们共享相同的基本属性和方法，如位置、旋转和缩放。

要创建一个物体，通常需要先定义它的几何形状和材质，然后通过 THREE.Mesh 将两者组合起来形成一个网格。最后，将网格添加到场景中即可。

const geometry = new THREE.BoxGeometry(); // 创建几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建材质
const cube = new THREE.Mesh(geometry, material); // 创建网格
scene.add(cube); // 添加到场景

五、材质（Material）

材质定义了物体表面的外观，包括颜色、纹理、反射特性等。Three.js 提供了多种预定义的材质类型，每种都有不同的视觉效果。例如，MeshBasicMaterial 不考虑光照条件，总是以指定的颜色显示；而 MeshStandardMaterial 则能与光源互动，产生更加真实的阴影和高光效果。

// 使用 MeshStandardMaterial 可以实现更真实的光照效果
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });

六、几何体（Geometry）

几何体决定了物体的形状。Three.js 内置了许多常用的几何体构造函数，如球体、平面、立方体等，同时也支持自定义几何体的创建。几何体可以通过顶点和面来描述，这使得开发者可以根据需求灵活地设计物体形态。

const geometry = new THREE.SphereGeometry(1, 32, 32); // 创建球体几何体

七、光源（Light）

没有光源，即使是使用了光照敏感型材质的物体也无法被照亮。Three.js 提供了不同类型的光源来模拟现实世界的光照环境。方向光（THREE.DirectionalLight）、点光源（THREE.PointLight）、聚光灯（THREE.SpotLight）等都能用来营造丰富的光影效果。

const light = new THREE.DirectionalLight(0xffffff, 1); // 创建方向光
light.position.set(5, 5, 5).normalize(); // 设置光源位置
scene.add(light); // 添加到场景

结语

上述六大基础概念——场景、相机、渲染器、物体、材质和光源，构成了 Three.js 的核心框架。了解并熟练运用这些概念，不仅能帮助你快速入门 Three.js，还能为未来探索更高级的主题铺平道路。无论是制作交互式网站还是开发复杂的游戏，掌握好这些基础知识都是至关重要的。希望这篇文章能够成为你学习 Three.js 的良好起点，激发你对3D编程的热情和创造力。