简述

现在探索Three.js功能。

在为场景制作动画之前，我们需要知道如何变换场景中的对象。

我们已经使用相机完成了此操作，方法是使用

camera.position.z = 3

有 4 个属性可用于变换对象

    position（移动对象）

    scale（调整对象大小）

    rotation（旋转对象）

    quaternion（也可以旋转对象;稍后会详细介绍）

从Object类继承的透视相机类、网格体类以及我们尚未介绍的类都具有这样的属性。

您可以在 Three.js 文档看到哪些类继承了这个类。

这些属性将被编译为我们所谓的矩阵。矩阵 在Three.js、WebGL 和 GPU 内部使用，用于变换对象坐标。幸运的是，不必自己处理矩阵，只需修改前面提到的属性即可。

设置

在一开始，画布中只有之前几节创建的立方体，立方体处在视角中心。

移动对象

position位置具有 3 个基本属性x、y、z。

每个轴的方向都是自己定义的。在 Three.js 中，我们通常认为y轴向上，z轴向后，x轴向右。

至于数量1的单位也可以是任意的，这根据自己的需要来决定。

尝试调整mesh网格体的position位置属性，推测下立方体会去哪里。

请确保在执行渲染操作render()前完成移动操作，否则网格体会在移动前被渲染。

mesh.position.x = 0.7

mesh.position.y = - 0.6

mesh.position.z = 1

position位置不是对象。它是Vector3类的一个实例，不光有x、y、z属性，还有许多拥有的方法。

可以得到向量的模

console.log(mesh.position.length())

两个Vector3类之间的距离，但以下代码先要确保创建相机后运行

console.log(mesh.position.distanceTo(camera.position))

您可以规范化其值（这意味着您将向量的长度减少到单位1，但保留其方向）：

console.log(mesh.position.normalize())

若要更改值，而不是单独更改 x、y、z，还可以使用以下方法：

mesh.position.set(0.7, - 0.6, 1)

辅助轴

在空间中盲目定位很困难，尤其是在移动相机之后就更加困难。此时就需要调用Three.js的AxesHelper辅助轴。

AxesHelper辅助轴会从场景中心向x、y、z方向放射出与轴同向的线。

要创建AxesHelper辅助轴，首先需要实例化并在实例化场景后，将其添加到场景，可以通过一个参数修改线的长度。

/**

    * AxesHelper辅助轴

    */

const axesHelper = new THREE.AxesHelper(2)

scene.add(axesHelper)

此时应该看到

您应该看到一条绿线和一条红线。

绿线对应于y轴。红线对应于x轴，有一条蓝线对应于z轴，但看不到它，因为它与相机完全同向。

如果需要视觉参考，请随时添加它。

缩放对象

scale缩放也是Vector3。默认情况下，x、y、z都是1。这就意味着对象没有被缩放。如果设置成0.5，对象将在该轴方向上的尺寸缩小一半；如果设置成2，对象将在该轴方向上的尺寸放大一倍。

如果更改了这些值，对象将会相应缩放。注释掉之前的position位置，然后添加缩放

mesh.scale.x = 2

mesh.scale.y = 0.25

mesh.scale.z = 0.5

很明显，无法直观的看到z轴的缩放，因为网格体是正对相机的。

缩放可以使用负值，但是会出现BUG，尽量避免这样做。

旋转对象

旋转有两个不同的属性，rotation旋转和quaternion四元数两种，当修改一个，另一个也会有相应变化。

旋转

rotation旋转也有x、y、z，但是它不是Vector3，而是欧拉数。当更改欧拉数的x、y、z时，你可以想象是绕对应轴旋转对象的操作。

旋转的值以弧度表示，如果想要实现旋转半圈，就需要写Π。在JavaScript的原生环境中，可以使用Math.PI，来表示这个数。

注释掉之前的scale缩放，然后添加绕x、y轴八分之一圈的旋转。

mesh.rotation.x = Math.PI * 0.25

mesh.rotation.y = Math.PI * 0.25

容易吧？但是当把这些旋转混合在一起，反而会出现不同的结果。其原因就在于当绕x旋转时，同时也影响了其他两个轴的方向。这就导致了旋转的结果和预期的不同。

我们可以使用reorder()方法来更正旋转的顺序，object.rotation.reorder('yxz')

虽然欧拉数易于理解，但是旋转的顺序会导致这些问题。这就是为什么大多数引擎和3D软件使用quaternion四元数方案

四元数

Quaternion四元数属性同样表达了旋转，但是使用了更数学化的方式，从而解决了顺序的问题。

这里不会讲解四元数如何运作，但是要记得Quaternion四元数随rotation旋转的变化而更新。这意味着可以随意使用两者中的任何一个。

大突破

Object3D实例有一个很棒的方法，名字是lookAt()，这个方法可以控制对象直接面向某个东西。对象会自动将-z轴旋转到提供的目标，而无需复杂的数学。

这可以被用在将相机看向物体的操作上，或是将大炮定向以面对敌人，或将角色的眼睛移动到物体上。

该参数是目标，必须是 Vector3。可以尝试创建一个：

camera.lookAt(new THREE.Vector3(0, - 1, 0))

立方体似乎变高了，但实际上，相机正在观察立方体下方。

我们也可以使用任何现有的 Vector3，例如前面的网格体的位置，但这将导致相机指向默认的位置，因为我们位于场景的中心。

camera.lookAt(mesh.position)

组合变换

可以将position（移动对象）、scale（调整对象大小）、rotation（旋转对象 也可以用quaternion）以任意顺序组合。运行的结果将是相同的。因为它就是对象的状态。

尝试把之前的所有变换组合在一起

mesh.position.x = 0.7

mesh.position.y = - 0.6

mesh.position.z = 1

mesh.scale.x = 2

mesh.scale.y = 0.25

mesh.scale.z = 0.5

mesh.rotation.x = Math.PI * 0.25

mesh.rotation.y = Math.PI * 0.25

场景分组

在某些时候，可能希望对事物进行分组。假设正在建造一座有墙壁，门，窗户，屋顶，灌木丛等的房子。

当认为已经完成了时，可能就会意识到房子太小了，那么必须重新缩放每个对象并更新它们的位置。

一个好的替代方法是将所有这些对象分组到一个容器中，并缩放该容器。

可以使用Group组类执行此操作。

实例化Group组，并把它添加到场景。现在，当要创建一个新的对象的时候，只需使用add()方法把他添加到组中，而非直接添加到场景中。

由于Group组类继承了Object3D类，所以它也具备前述的所有属性和方法。

注释掉之前的lookAt()调用，创建三个立方体并添加到一个组中，来替代之前的立方体。然后向组应用变换。

/**

* 创建对象

*/

const group = new THREE.Group()

group.scale.y = 2

group.rotation.y = 0.2

scene.add(group)

const cube1 = new THREE.Mesh(

    new THREE.BoxGeometry(1, 1, 1),

    new THREE.MeshBasicMaterial({ color: 0xff0000 })

)

cube1.position.x = - 1.5

group.add(cube1)

const cube2 = new THREE.Mesh(

    new THREE.BoxGeometry(1, 1, 1),

    new THREE.MeshBasicMaterial({ color: 0xff0000 })

)

cube2.position.x = 0

group.add(cube2)

const cube3 = new THREE.Mesh(

    new THREE.BoxGeometry(1, 1, 1),

    new THREE.MeshBasicMaterial({ color: 0xff0000 })

)

cube3.position.x = 1.5

group.add(cube3)

顺序不重要，重要的是它是有效的JavaScript。