第三章:Three.js 基本概念

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

3.1 场景 (Scene)

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

3.1.1 创建场景

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

javascript 复制代码
import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();
3.1.2 向场景添加对象

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

javascript 复制代码
// 创建几何体
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)

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

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

// 设置相机位置
camera.position.z = 5;
3.2.2 正交相机 (OrthographicCamera)

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

javascript 复制代码
// 创建正交相机
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 文档中。

javascript 复制代码
// 创建渲染器
const renderer = new THREE.WebGLRenderer();

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

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

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

javascript 复制代码
// 渲染场景
renderer.render(scene, camera);

3.4 几何体 (Geometry)

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

3.4.1 创建基本几何体

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

javascript 复制代码
// 创建立方体几何体
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 常用材质

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

javascript 复制代码
// 创建基本材质
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 创建网格

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

javascript 复制代码
// 创建立方体几何体
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 的各项功能和应用。

相关推荐
神仙别闹7 分钟前
基于C#和Sql Server 2008实现的(WinForm)订单生成系统
开发语言·c#
XINGTECODE8 分钟前
海盗王集成网关和商城服务端功能golang版
开发语言·后端·golang
前端百草阁22 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜23 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish24 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple24 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five26 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
临枫54126 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普27 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端每日三省27 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript