共计 1161 个字符，预计需要花费 3 分钟才能阅读完成。
举荐：将 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);