本节的目标就是为了增强对 threejs三维空间的意识。
三维坐标系
三维笛卡尔坐标系是在 二维笛卡尔坐标系 的根底上依据右手定则减少 第三维坐标（即Z轴） 而造成的。
三维坐标系分类
Three.js 三维坐标系 -- 辅助察看坐标系(AxesHelper)
Three.js提供了一个 AxesHelper 类，能够用来创立一个可视化的三维坐标系，能够用来辅助编写Three.js程序。
threejs中坐标体系是右手坐标系
THREE.AxesHelper()的参数示意坐标系坐标轴线段尺寸大小，你能够依据须要扭转尺寸。
https://threejs.org/docs/index.html?q=axesHelper#api/zh/helpe...
构造函数
AxesHelper( size : Number )
size -- (可选的) 示意代表轴的线段长度. 默认为 1. size尽量比场景大
能够在创立的3维度场景前面增加坐标系
// 扭转AxesHelper构造函数的参数，能够扭转三维坐标轴的大小，// 参数设置坐标轴大小,150，编写程序的时候，能够依据相机参数调整为适合的值，如果太小能够无奈显示进去var axesHelper = new THREE.AxesHelper( 150 );// 和网格模型Mesh一样，AxesHelper你也能够了解为一个模型对象，须要插入到场景中scene.add( axesHelper );// 三维坐标系模型对象axesHelper和一般网格模型对象一样能够通过position属性设置地位// axesHelper的基类是LineSegmentsaxesHelper.position.y = -54如上图，咱们增加了坐标系。然而有个问题：看不到坐标原点。
所以，咱们还须要优化一下。这就用到了 材质半透明设置
材质半透明设置
设置材质半透明,这样能够看到坐标系的坐标原点。
批改网格材质 transparent:true,//开启通明 opacity:0.5,//设置透明度
全副代码
// 定义一个根底网格材质(MeshBasicMaterial)，设置为红色const material = new THREE.MeshBasicMaterial({ color: 0xff0ff0, // 红色材质 transparent:true,//开启通明 opacity:0.5,//设置透明度})XYZ轴
通过Three.js类AxesHelper创立一个三维坐标系三个坐标轴的色彩别离为红绿蓝(RGB)，R、G、B.
三种色彩坐标轴是别离示意X、Y、Z轴，也就是 红色轴是X轴，绿色轴是Y轴，蓝色轴是Z轴.
three.js的3D坐标系默认y轴朝上
你能够通过设置一个网格模型的.position属性去验证。
坐标轴批改实际
设置模型在坐标系中的地位或尺寸
通过模型的地位、尺寸设置，加深3D坐标系的概念。
测试：设置长方体xyz不同方向尺寸
// 设置几何体长宽高，也就是x、y、z三个方向的尺寸//比照三个参数别离对应xyz轴哪个方向new THREE.BoxGeometry(100, 60, 20);测试：扭转地位
// 设置模型mesh的xyz坐标mesh.position.set(100,0,0);扭转相机参数——预览新的渲染成果
相机放在x轴负半轴，指标观察点是坐标原点，这样相当于相机的眼帘是沿着x轴正方向，只能看到长方体的一个矩形立体。
camera.position.set(-1000, 0, 0);camera.lookAt(0, 0, 0);// 相机眼帘沿着x轴负半轴，mesh位于相机前面，天然看不到camera.position.set(-1000, 0, 0);camera.lookAt(-2000, 0, 0);相机far偏小，mesh位于far之外，物体不会显示在画布上。
// const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);// 你能够进行上面测试，扭转相机参数，把mesh放在视锥体之外，看看是否显示// 3000改为300，使mesh位于far之外，mesh不在视锥体内，被剪裁掉const camera = new THREE.PerspectiveCamera(30, width / height, 1, 300);参考文档
- http://www.yanhuangxueyuan.com/doc/Three.js/AxesHelper.html