返回介绍

Three.js 获得世界坐标 .getWorldPosition()

发布于 2021-07-10 20:14:16 字数 2659 浏览 2055 评论 0 收藏 0

通过前两节课的学习,想必你已经对Threejs的层级模型有了一定认识,那么本节课就在层级模型概念的基础上,继续给家讲解两个新的概念,即本地坐标系和世界坐标系。

如果你对本地坐标系和世界坐标系已经有了一定概念,那么可以直接访问模型的位置属性.position获得模型在本地坐标系或者说模型坐标系下的三维坐标,通过模型的.getWorldPosition()方法获得该模型在世界坐标下的三维坐标。

.getWorldPosition()方法

模型对象的方法.getWorldPosition()方法和位置属性.position一样继承自基类Object3D。

// 声明一个三维向量用来保存世界坐标
var worldPosition = new THREE.Vector3();
// 执行getWorldPosition方法把模型的世界坐标保存到参数worldPosition中
mesh.getWorldPosition(worldPosition);

建立世界坐标系概念

如果你没有本地坐标系和世界坐标系的概念,可以通过下面的案例源码很快的建立两个坐标系的概念。

你首先在案例中测试下面源码,通过位置属性.position.getWorldPosition()分别返回模型的本地位置坐标和世界坐标,查看两个坐标x分量有什么不同。你可以看到网格模型mesh通过位置属性.position返回的坐标x分量是50,通过.getWorldPosition()返回的坐标x分量是100,也就是说mesh的世界坐标是mesh位置属性.position和mesh父对象group位置属性.position的累加。

var mesh = new THREE.Mesh(geometry, material);
// mesh的本地坐标设置为(50, 0, 0)
mesh.position.set(50, 0, 0);
var group = new THREE.Group();
// group本地坐标设置和mesh一样设置为(50, 0, 0)
// mesh父对象设置position会影响得到mesh的世界坐标
group.position.set(50, 0, 0);
group.add(mesh);
scene.add(group);
// .position属性获得本地坐标
console.log('本地坐标',mesh.position);
// getWorldPosition()方法获得世界坐标
//该语句默认在threejs渲染的过程中执行,如果渲染之前想获得世界矩阵属性、世界位置属性等属性,需要通过代码更新
scene.updateMatrixWorld(true);
var worldPosition = new THREE.Vector3();
mesh.getWorldPosition(worldPosition);
console.log('世界坐标',worldPosition);

总结

下面对上面的案例实验进行总结。

所谓本地坐标系或者说模型坐标系,就是模型对象相对模型的父对象而言,模型位置属性.position表示的坐标值就是以本地坐标系为参考,表示子对象相对本地坐标系原点(0,0,0)的偏移量。

前面两节课说过Threejs场景Scene是一个树结构,一个模型对象可能有多个父对象节点。世界坐标系默认就是对Threejs整个场景Scene建立一个坐标系,一个模型相对世界坐标系的坐标值就是该模型对象所有父对象以及模型本身位置属性.position的叠加。

本地缩放系数.scale

通过前面的论述,模型的位置属性.position可以称为本地坐标或者说局部坐标,对于属性.scale一样,可以称为模型的本地缩放系数或者局部的缩放系数,通过.getWorldScale()方法可以获得一个模型的世界缩放系数,就像执行.getWorldPosition()方法一样获得世界坐标,关于.getWorldScale()方法可以查看基类Object3D。

本地矩阵.materix和世界矩阵.matrixWorld

如果你对WebGL顶点的旋转、缩放、平移矩阵变换有一定的了解,可以继续阅读,如果没有概念也可以暂时跳过。

本地矩阵.materix是以本地坐标系为参考的模型矩阵,世界矩阵.matrixWorld自然就是以是世界坐标系为参照的模型矩阵。Three.js本地矩阵是

Three.js模型的位置属性.position、缩放系数属性.scale和角度属性.rotation记录了模型的所有平移、缩放和旋转变换,本地矩阵.materix是以线性代数矩阵的形式表示.position.scale.rotation。世界矩阵.matrixWorld自然是用矩阵的形式表示模型以及模型父对象的所有旋转缩放平移变换。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文