标签坐标问题—局部、世界坐标

最新推荐文章于 2024-04-08 21:45:06 发布

原创最新推荐文章于 2024-04-08 21:45:06 发布 · 406 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #webgl #笔记

THREE 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在three.js中如何处理模型的世界坐标问题，特别是在多层级模型中，通过实例展示了如何通过`.position`和`.getWorldPosition()`方法获取网格模型的局部和世界坐标，以及父对象对其的影响。

郭隆邦老师threejs教程学习笔记

关于模型标签问题中模型世界坐标的获取问题，如果你想给一个网格模型Mesh添加一个标签，无论是通过精灵模型Sprite方式，还是平面网格模型方式，还是HTML元素方式。你首先要做到的就是先准确获得需要添加标签网格模型在threejs三维空间中的世界坐标。

层级模型

复杂的项目，一个three.js场景往往包含包含多个模型对象，模型对象也会有一些父对象，这样就会形成一个层级模型，从数据结构的角度来看就是树结构。一个模型相对世界坐标系原点的位置是世界坐标，相对父对象的位置是局部坐标。

局部坐标`.position`

.position属性是一个模型的局部位置坐标或者说本地坐标，相对父对象的位置，如果一个网格模型Mesh直接属于场景Scene，没有除了Scene以外的父对象，.position表示的局部位置坐标就是世界坐标。

世界坐标`.getWorldPosition()`

实际项目中一个模型对象可以有多个父对象，这个时候想获得该模型对象的世界坐标，就不能通过.position属性，应该通过.getWorldPosition()方法实现，该方法的使用参考基类Object3D。

mesh.getWorldPosition(Vector3)读取一个模型的世界坐标，并把读取结果存储到参数Vector3中。

mesh.position.set(60, 0, 0);

const group = new THREE.Group();
group.add(mesh);
group.position.set(50, 0, 0);
scene.add(group);

// 声明一个三维向量用来表示某个坐标
const worldPosition = new THREE.Vector3();
// 获取mesh的世界坐标，你会发现mesh的世界坐标受到父对象group的.position影响
mesh.getWorldPosition(worldPosition);
console.log('世界坐标',worldPosition);   //_Vector3 {x: 110, y: 0, z: 0}
console.log('本地坐标',mesh.position);   //_Vector3 {x: 60, y: 0, z: 0}