Three.js 三维坐标系 AxesHelper

Question

Three.js 提供了一个 AxesHelper 类，可以用来创建一个可视化的三维坐标系，可以用来辅助编写 Three.js 程序。

// 改变AxesHelper构造函数的参数，可以改变三维坐标轴的大小，
// 参数设置坐标轴大小,150，编写程序的时候，可以根据相机参数调整为合适的值，如果太小可以无法显示出来
var axesHelper = new THREE.AxesHelper( 150 );
// 和网格模型Mesh一样，AxesHelper你也可以理解为一个模型对象，需要插入到场景中
scene.add( axesHelper );

// 三维坐标系模型对象axesHelper和普通网格模型对象一样可以通过position属性设置位置
// axesHelper的基类是LineSegments
axesHelper.position.y = -54

三维坐标系对象AxesHelper本质上就是用线模型LineSegments表示的三段直线，可以查看src目录下AxesHelper.js的源码，你可以把AxesHelper类比为网格模型、线模型一样的模型对象来理解。如果你有兴趣，可以自己重新封装一个新的三维坐标系构造函数，比如给坐标轴加上箭头。

XYZ 轴

通过Three.js类AxesHelper创建一个三维坐标系三个坐标轴的颜色分别为红绿蓝(RGB)，R、G、B三种颜色坐标轴是分别表示X、Y、Z轴，也就是红色轴是X轴，绿色轴是Y轴，蓝色轴是Z轴，你可以通过设置一个网格模型的.position属性去验证。

AxisHelper

老版本Three.js三维坐标系的类名是AxisHelper，新版本已更改为AxesHelper。如果使用老版本的API，浏览器控制会有警告提示THREE.AxisHelper has been renamed to THREE.AxesHelper.,表达的意思就是THREE.AxisHelper已经被替换为THREE.AxesHelper。

其它 helpers 类

除了三维坐标系对象AxesHelper，Three.js还提供了箭头ArrowHelper、网格GridHelper、相机CameraHelper、点光源PointLightHelper等类，通过PointLightHelper可以可视化表示点光源的信息，通过CameraHelper可以可视化表示相机对象的信息，更多helpers类可以查看Three.js官方文档helpers分类。