threejs添加坐标辅助器和物体移动

280 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的30天,点击查看活动详情

AxesHelper

用于简单模拟3个坐标轴的对象.
红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.

在控制器后面添加这两句代码, 意思是创建一个坐标辅助器实例,然后将他添加到场景里。

`const axesHelper = new THREE.AxesHelper( 5 ); 
scene.add( axesHelper );`

构造函数

AxesHelper( size : Number )

size -- (可选的) 表示代表轴的线段长度. 默认为 1.

image.png

物体的移动

物体是Object3D

三维物体(Object3D)

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

.position : Vector3

表示对象局部位置的Vector3。默认值为(0, 0, 0)。

三维向量(Vector3)

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

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

其他的一些事物也可以使用二维向量进行表示,比如说动量矢量等等; 但以上这些是它在three.js中的常用用途。

对 Vector3 实例进行遍历将按相应的顺序生成它的分量 (x, y, z)。 image.png

尝试一下

将物体移动到x轴5的位置,y轴不动,z轴不懂,效果如下。

cube.position.set(5,0,0)

image.png