开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第6天，点击查看活动详情
前言
在three中，通过场景、相机、渲染器我们可以创建成一个3D图形，这个3D图形是静止的，利用requestAnimationFrame动画帧去render，我们就能转动3D图形查看，查看一会可能我们就分不清x、y、z轴啦，这时候我们就需要添加坐标轴帮助我们观察。
坐标轴
AxesHelper构造函数用于创建坐标轴，该方法接受一个参数size，表示每个轴的长度，默认为1。创建好以后需要添加到场景当中：
const axesHelper = new THREE.AxesHelper(3);
scene.add(axesHelper);
打开页面我们只会看到两条轴，这是因为z轴正对着前方，转动一下物体就能看到z轴啦。
从图上很明显看出红、绿、蓝三条轴，其中红色代表x轴、绿色代表y轴、蓝色代表z轴。
属性方法
AxesHelper有相关的属性与方法，继承于Line的，接下来我们来了解一下几种属性方法：
- geometry:用于设置线的顶点，默认值是BufferGeometry()。
- material:用于设置线的材质，可以设置颜色的。
- isLine:是否是只读的，属性值为布尔值。
- clone():克隆方法，相当于复制一条线。
- computeLineDistances():用于计算出当前点到起始点的累计长度。
- raycase():与射线产生交互。
转换
有了坐标轴，我们移动位置就能直观地观察到，下面我们来看一下操作物体的几种方式：
- position(x,y,z):用于移动物体位置。
cube.position.set(3, 0, 0);
- scale():用于物体的缩放。
cube.scale.set(2, 1, 1);
- rotation():用于旋转物体。
cube.rotation.set(2, 1, 1);
总结
以上就是three的坐标轴与转换，我们要记清楚每个坐标轴对应的颜色，物体的转换也跟CSS中的差不多，就是位移用pisition去操作。
