乐趣区

关于three.js:Threejs教程三维坐标系

jiezi

举荐：将 NSDT 场景编辑器退出你的 3D 工具链
其余系列工具：NSDT 简石数字孪生

三维坐标系

本节课的目标就是为了增强大家对 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);

3D 建模学习工作室整顿翻译

退出移动版