共计 1102 个字符,预计需要花费 3 分钟才能阅读完成。
举荐:将 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 建模学习工作室整顿翻译
正文完