关于编辑器:ThreeJS教程三维坐标系加强三维空间认识

举荐：将NSDT场景编辑器退出你的3D工具链
3D工具集：NSDT简石数字

https://www.mvrlink.com/threejs-understanding-three-dimension...

孪生三维坐标系-增强三维空间意识本节课的目标就是为了增强大家对threejs三维空间的意识。辅助察看坐标系THREE.AxesHelper()的参数示意坐标系坐标轴线段尺寸大小，你能够依据须要扭转尺寸。// AxesHelper：辅助察看的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
材质半透明设置设置材质半透明,这样能够看到坐标系的坐标原点。const material = new THREE.MeshBasicMaterial({

color: 0x0000ff, //设置材质色彩transparent:true,//开启通明opacity:0.5,//设置透明度

});
AxesHelper的xyz轴three.js坐标轴色彩红R、绿G、蓝B别离对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。设置模型在坐标系中的地位或尺寸通过模型的地位、尺寸设置，加深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);