Three.js 获得世界坐标 .getWorldPosition() - 文章教程

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

发布于 2021-09-27 字数 1966 浏览 910 评论 0

使用 Three.js 的开发的时候,如果你想获得一个网格模型 Mesh 或者一个模型对象 Group 的世界坐标,可以通过该模型的.getWorldPosition()方法实现,该方法的具体介绍可以参考Threejs文档核心Core分类下的基类 Object3D

通过网格模型Mesh的属性.position获得的是网格模型的本地坐标,你可以用下面代码去测试下,查看浏览器控制台的数据对比。如果执行.getWorldPosition()方法获得的坐标值,你可以发现网格模型x轴方向平移距离是100,也就是网格模型的本地坐标Mesh.position.x和网格模型父对象的本地坐标Group.position.x相加。如果网格模型有多个父对象,每个父对象的平移变换在网格模型上都会体现出来。

var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(50, 0, 0)
var group = new THREE.Group();
group.add(mesh); //网格模型添加到组中
group.position.set(50, 0, 0)
scene.add(group); //组添加到场景中
//该语句默认在threejs渲染的过程中执行  如果想获得世界矩阵属性、世界位置属性等属性,需要手动更新
scene.updateMatrixWorld(true);
// 声明一个三维向量用来保存网格模型的世界坐标
var worldPosition = new THREE.Vector3();
// 获得世界坐标,执行getWorldPosition方法,提取网格模型的世界坐标结果保存到参数worldPosition中
mesh.getWorldPosition(worldPosition)
console.log('查看网格模型世界坐标',worldPosition);
console.log('查看网格模型本地坐标',mesh.position);

如果你对层级模型已有一定概念,对本地矩阵和世界矩阵有一定的概念,那么你很容易理解什么是世界矩阵,如果你对层级模型没有概念,不是理解世界坐标概念,可以学习本站发布的文章 层级模型Group

注意获取一个模型的世界坐标之前,需要执行 scene.updateMatrixWorld(true); 更新模型的世界矩阵,如果不更新模型世界矩阵,通过.getWorldPosition()方法获得世界坐标和局部坐标是一样的,执行 scene.updateMatrixWorld(true); 可以把从根对象scene到网格模型Mesh中间所有网格模型Mesh父对象的变换体现出来。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

晚风撩人

这个人比较懒,什么都没有填写!

21 文章
1 评论
24136 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0