第三章: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 的各项功能和应用。

相关推荐
励志成为嵌入式工程师37 分钟前
c语言简单编程练习9
c语言·开发语言·算法·vim
捕鲸叉1 小时前
创建线程时传递参数给线程
开发语言·c++·算法
A charmer1 小时前
【C++】vector 类深度解析:探索动态数组的奥秘
开发语言·c++·算法
Peter_chq1 小时前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
记录成长java3 小时前
ServletContext,Cookie,HttpSession的使用
java·开发语言·servlet
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
睡觉谁叫~~~3 小时前
一文解秘Rust如何与Java互操作
java·开发语言·后端·rust
音徽编程3 小时前
Rust异步运行时框架tokio保姆级教程
开发语言·网络·rust
观音山保我别报错3 小时前
C语言扫雷小游戏
c语言·开发语言·算法
小屁孩大帅-杨一凡4 小时前
java后端请求想接收多个对象入参的数据
java·开发语言