第三章 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 的各项功能和应用。
————————————————
 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                        
原文链接：https://blog.csdn.net/imdeity/article/details/139561282