Three.js 若干核心基类 #

三维物体 Object3D #

这是Three.js中大部分对象的基类，提供了一系列的属性和方法来对三维空间中的物体进行操纵。

大多数模型（Mesh、Line等）的父类，其中包含大量通用方法及属性，如：

• position

• scale

• rotation

• clone

• remove

• rotateX、rotateY、rotateZ

• translateX、translateY、translateZ

以及各种回调、静态属性等

详见官方文档Object3D

此处列举几个最常用的方法：

traverse 遍历递归子对象 #

一般用于加载模型后递归其子节点，也用于在Group实例中进行递归遍历

gltf.scene.traverse(function(obj) {
    if (obj.isMesh) { //判断是否是网格模型)
    }
})

getObjectByName 根据Name属性查找对象 #

group.getObjectByName("name-01")

在当前对象及其子对象中递归遍历，返回第一个名称与提供的字符串匹配的对象，如果找不到匹配项，则返回 null

注意，此方法只会返回第一个匹配项，因此，当有多个同名子对象时，可能需要用其他方法来访问特定对象（例如.traverse、.getObjectsByProperty）

getObjectByProperty、getObjectsByProperty 根据属性查找对象 #

同样是在当前对象及其子对象中递归遍历，getObjectByProperty方法的返回值与getObjectByName相同，getObjectsByProperty方法则返回一个数组，其中包含所有属性匹配的对象

// getObjectByProperty(name: String, value: Any)

const cubeVisible = scene.getObjectByProperty("visible", true)

const cubes = scene.getObjectsByProperty("type", 'cube')

translateX 沿X轴平移 #

const cube = new THREE.Mesh(geometry, material)

// 平移立方体
cube.translateX(2)

translateY、translateZ 方法同理

translateOnAxis 沿指定方向平移 #

const box = new THREE.Mesh(boxGeometry, boxMaterial)
scene.add(box)

const axis = new THREE.Vector3(1, 0, 0)
const distance = 1

// 沿axis方向移动distance单位
box.translateOnAxis(axis, distance) // translateOnAxis(axis : Vector3, distance : Float)

rotateX、rotateY、rotateZ 及 rotateOnWorldAxis #

在世界空间中绕着某物体的轴来旋转一个物体，用法与translate系列相似

组 Group #

它几乎和Object3D是相同的，其目的是使得组中对象在语法上的结构更加清晰

组对象用于将多个模型对象收纳为一组，便于管理

const group = new THREE.Group()

group.name = '组'

// 使用add方法将对象移入组中
group.add(box1)
group.add(box2)

注意：在three.js中，一个对象只能拥有一个父级，所以在将对象移入某个组后，此对象原本的父级关系将被移除

三位向量 Vector3 #

该类表示的是一个三维向量（3D vector）。 一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标记为x、y和z）， 可被用来表示很多事物，例如：

• 一个位于三维空间中的点。
• 一个在三维空间中的方向与长度的定义。在three.js中，长度总是从(0, 0, 0)到(x, y, z)的 Euclidean distance（欧几里德距离，即直线距离）， 方向也是从(0, 0, 0)到(x, y, z)的方向。
• 任意的、有顺序的、三个为一组的数字组合。

三维向量在Three.js中最常用于模型的position、scale等属性（实现于Object3D对象中），也用于定义某个方向或某个点坐标，其内部有x、y 和 z 属性，对应三维坐标系中的xyz坐标

set方法是Vector对象实例最常用的方法，用于设置该向量的x、y 和 z 分量

欧拉角 Euler #

欧拉角描述一个旋转变换，通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。

用于描述角度的对象，常用于设置某一模型的rotation值，其单位为弧度，缩写是rad。根据定义，一周的弧度数为2πr/r=2π，360°=2π rad，因此，1rad约为57.3°

Euler类同样实现了set方法，用法与Vector3类近似

颜色 Color #

//empty constructor - will default white
const color1 = new THREE.Color()

//Hexadecimal color (recommended)
const color2 = new THREE.Color(0xff0000)

//RGB string
const color3 = new THREE.Color("rgb(255, 0, 0)")
const color4 = new THREE.Color("rgb(100%, 0%, 0%)")

//X11 color name - all 140 color names are supported.
//Note the lack of CamelCase in the name
const color5 = new THREE.Color('skyblue')

//HSL string
const color6 = new THREE.Color("hsl(0, 100%, 50%)")

//Separate RGB values between 0 and 1
const color7 = new THREE.Color(1, 0, 0)

其内部同样实现了set方法，同时也提供setHSL、setRGB等方法

材质 Material #

材质描述了对象objects的外观。它们的定义方式与渲染器无关， 因此，如果您决定使用不同的渲染器，不必重写材质。

Material类包含许多关键的属性，比如透明度属性.opacity、面属性.side、是否透明属性.transparent等