乐趣区

关于前端:浅说threejs三维坐标系

jiezi

本节的目标就是为了增强对 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 的基类是 LineSegments
axesHelper.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
退出移动版