第三章：Three.js 基本概念

本章将介绍 Three.js 中的核心概念，包括场景（Scene）、相机（Camera）、渲染器（Renderer）、几何体（Geometry）、材质（Material）和网格（Mesh）。这些概念是理解和使用 Three.js 的基础。

3.1 场景 (Scene)

场景是 Three.js 中所有对象的容器。你可以将几何体、灯光、相机等对象添加到场景中。

3.1.1 创建场景

创建一个场景非常简单，只需要实例化 THREE.Scene 类。

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

3.1.2 向场景添加对象

你可以向场景中添加几何体、灯光、相机等对象。以下是添加一个立方体和一个光源的示例。

// 创建几何体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// 将立方体添加到场景
scene.add(cube);

// 创建光源
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);

// 将光源添加到场景
scene.add(light);

3.2 相机 (Camera)

相机决定了我们从哪个角度观察场景。在 Three.js 中，常用的相机有透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。

3.2.1 透视相机 (PerspectiveCamera)

透视相机模拟人眼的视觉效果，近大远小。以下是创建透视相机的示例。

// 创建透视相机
const camera = new THREE.PerspectiveCamera(
    75, // 视野角度
    window.innerWidth / window.innerHeight, // 长宽比
    0.1, // 近剪切面
    1000 // 远剪切面
);

// 设置相机位置
camera.position.z = 5;

3.2.2 正交相机 (OrthographicCamera)

正交相机没有透视效果，物体的大小不会随着距离变化。以下是创建正交相机的示例。

// 创建正交相机
const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(
    -aspect * 5, // 左剪切面
    aspect * 5, // 右剪切面
    5, // 上剪切面
    -5, // 下剪切面
    0.1, // 近剪切面
    1000 // 远剪切面
);

// 设置相机位置
camera.position.z = 5;

3.3 渲染器 (Renderer)

渲染器负责将场景和相机的内容绘制到屏幕上。Three.js 提供了 WebGLRenderer 来利用 WebGL 进行高效的渲染。

3.3.1 创建渲染器

创建 WebGLRenderer 并设置渲染器的大小，然后将其添加到 HTML 文档中。

// 创建渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的 DOM 元素添加到 HTML 文档
document.body.appendChild(renderer.domElement);

3.3.2 渲染场景

使用 renderer.render 方法将场景和相机的内容渲染到屏幕上。

// 渲染场景
renderer.render(scene, camera);

3.4 几何体 (Geometry)

几何体是 3D 对象的形状。Three.js 提供了多种内置的几何体，如立方体、球体、平面等。

3.4.1 创建基本几何体

以下是创建不同几何体的示例。

// 创建立方体几何体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);

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

// 创建平面几何体
const planeGeometry = new THREE.PlaneGeometry(5, 5);

3.5 材质 (Material)

材质决定了几何体的外观。Three.js 提供了多种材质，如基本材质、Lambert 材质、Phong 材质等。

3.5.1 常用材质

以下是创建不同材质的示例。

// 创建基本材质
const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建 Lambert 材质
const lambertMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

// 创建 Phong 材质
const phongMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 });

3.6 网格 (Mesh)

网格是几何体和材质的结合体，是可以添加到场景中的 3D 对象。

3.6.1 创建网格

以下是创建一个立方体网格的示例。

// 创建立方体几何体
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);

总结

在本章中，我们介绍了 Three.js 的核心概念，包括场景、相机、渲染器、几何体、材质和网格。这些概念是理解和使用 Three.js 的基础。在接下来的章节中，我们将基于这些基础概念，深入探讨 Three.js 的各项功能和应用。