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

Question

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