WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 Three.js免费视频教程

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

使用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父对象的变换体现出来。

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号