Three.js初试——基础概念（二）

前言

姊妹篇：Three.js初试——基础概念 介绍了 Three.js 的一些核心要素概念，这篇文章会讲一下它的关键要素概念。

之前我们了解到展示一个3D图像，必须要有场景、相机、渲染器这些核心要素，仅仅这些还不够，我们还需要在场景中放置物体（拍摄对象）、光源，才能展示3D图像。

物体（拍摄对象）

绘制3D模型，常用的做法是用三角形组成的网格来模拟。

几何体模型（Geometry）

在 Three.js 中预设了一些二维和三维几何体模型。

其中，二维几何体模型：

• 平面几何体（PlaneGeometry）
• 圆形几何体（CircleGeometry）
• 圆环几何体（RingGeometry）
• …

三维几何体模型：

• 立方几何体（BoxGeometry）
• 球几何体（SphereGeometry）
• 圆柱几何体（CylinderGeometry）
• 圆锥几何体（ConeGeometry）
• 圆环几何体（TorusGeometry）
• …

在使用时，实例化相应几何体对象。

举例：

// 创建一个圆环几何体（环面半径为10，管道半径为3，管道横截面分段数为16，管道分段数为100，圆环圆心角为Math.PI * 2）
const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

说明：

// 构造器
TorusGeometry(radius: Float, tube: Float, radialSegments: Integer, tubularSegments: Integer, arc: Float)

• radius - 环面的半径，从环面的中心到管道横截面的中心。默认值是1。
• tube — 管道的半径，默认值为0.4。
• radialSegments — 管道横截面的分段数，默认值为8。
• tubularSegments — 管道的分段数，默认值为6。
• arc — 圆环的圆心角（单位是弧度），默认值为Math.PI * 2。

在线示例：TorusGeometry演示

Three.js Geometry

材质（Material）

在 Three.js 中预设了几种材质对象。

• 基础线条材质（LineBasicMaterial）
  • 一种用于绘制线框样式几何体的材质。
• 基础网格材质（MeshBasicMaterial）
  • 一个以简单着色（平面或线框）方式来绘制几何体的材质。
  • 这种材质不受光照的影响。
• Lambert网格材质（MeshLambertMaterial）
  • 一种非光泽表面的材质，没有镜面高光。
• 法线网格材质（MeshNormalMaterial）
  • 一种把法向量映射到RGB颜色的材质。
• 标准网格材质（MeshStandardMaterial）
  • 一种基于物理的标准材质，使用Metallic-Roughness工作流程。
• …

详细请查阅 材质文档

举例：

const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );

在线示例：MeshBasicMaterial演示

Three.js Material

网格（Mesh）

表示基于以三角形为polygon mesh（多边形网格）的物体的类。

当有了几何体模型和材质之后，我们需要通过一个网格（Mesh）将两者结合起来，创建正在的拍摄对象。

两种不同的拍摄对象构造方法：

import * as THREE from 'three'
import { createMultiMaterialObject } from 'three/examples/jsm/utils/SceneUtils'

// 第一个参数代表物体的形状，第二个参数代表物体的材质。
// 只能是一种材质
new THREE.Mesh(geometry, material)
// 可以使用多种材质（数组格式）
createMultiMaterialObject(geometry,[materials...])

举例：

// 创建基础网格材质
let materialBasic = new THREE.MeshBasicMaterial({
  color: 0xFF4500,
  wireframe: true   // 是否将几何体渲染为线框，默认值为false（即渲染为平面多边形）
});
// 创建法线网格材质
let materialNormal = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
// 创建多种网格（因为有多个材质）
const cube2 = createMultiMaterialObject(geometry, [
  materialBasic,
  materialNormal
]);

最后，把物体放在场景中，调用 add 方法。

scene.add(cube);

Three.js 圆环几何体模型

光源

在 Three.js 中预设了几种光源。

• 环境光（AmbientLight）
  • 环境光会均匀的照亮场景中的所有物体。
  • 环境光不能用来投射阴影，因为它没有方向。
• 平行光（DirectionalLight）
  • 平行光是沿着特定方向发射的光。这种光的表现像是无限远，从它发出的光线都是平行的。
  • 常常用平行光来模拟太阳光的效果。
  • 平行光可以投射阴影。
• 点光源（PointLight）
  • 从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。
  • 该光源可以投射阴影。
• 聚光灯（SpotLight）
  • 光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。
  • 该光源可以投射阴影。
• …

详细请查阅 灯光文档

示例：

// White directional light at half intensity shining from the top.
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add(directionalLight);

说明：

// 构造器
DirectionalLight(color: Integer, intensity: Float)

• color - (可选参数) 16进制表示光的颜色。 缺省值为 0xffffff (白色)。
• intensity - (可选参数) 光照的强度。缺省值为1。

这篇文章的主要内容就介绍到这里，继续学习中。一起加油！