获取three.js场景中对象的动态位置

Question

我对 threejs 比较陌生。

我有一个场景，其中有一个物体，我们可以使用 TransformControls.js 在所有 XYZ 轴上在场景中移动该物体。

当我使用鼠标单击并拖动任何轴（即 X、Y、Z）来平移/移动场景内的对象时，我希望获取该特定对象在场景内的更新后的 X、Y、Z 位置坐标。

我使用 mesh.position.set(0, 0, 0); 在渲染场景之前设置对象的位置，但我不知道如何获取场景内对象的动态位置。

最终，我想在用户返回页面或刷新页面时，保存更新后的位置坐标，并以更新后的位置坐标重新渲染场景中的对象。

请提供任何指引。

谢谢

- Taher

---

mesh.position是一个Vector3，表示网格的本地位置。看起来TransformControls会更新这个向量，所以在变换完成后应该能够从mesh.position中获取新的位置。这是您要做的吗？或者在变换后mesh.position没有被更新？ - TheJim01

是的，这正是我想要做的。在调用THREE.TransformControls(camera, renderer.domElement);后，当我执行console.log(mesh.position.x + ',' + mesh.position.y + ',' + mesh.position.z)时，输出结果为0,0,0。因此，在我移动场景中的物体之后，mesh.position并没有得到更新。 - Taher

另外一个问题：你使用的是哪个版本的three.js？ - TheJim01

我正在使用 three.js R73。 - Taher

仅供参考，r73版本相当老了。当前版本是r84。我理解如果您有限制无法升级到最新版本，但强烈建议您这样做。 - TheJim01

谢谢。我会考虑升级它。 - Taher

Answer 1

THREE.TransformControls 需要几个步骤才能使用。

1. 创建你的 THREE.TransformControls 对象
2. 将其添加到你的场景中
3. 将其附加到你想要操作的对象上

var xformControl = new THREE.TransformControls(camera, renderer.domElement);
scene.add(xformControls);
// assuming you add "myObj" to your scene...
xformControl.attach(myObj);
// and then later...
xformControl.detatch();

将控件附加到对象将在场景中插入一个操作“gizmo”。拖动gizmo的各个部分将执行不同类型的变换。 使用gizmo对部分进行变换后，检查`mesh.position`应反映新位置。

为了更清晰，以下是额外的信息：

直到使用"gizmo"移动对象之前，对象的位置不会更新。例如： 1.您的对象位于场景中的（10, 10, 10） 2.`xformControl.attach(yourObject)` 3.创建"gizmo"在(10,10,10) 4.您的对象仍保持在(10,10,10) 5.使用"gizmo"将对象向+Y方向平移 6.您的对象现在将具有更新的位置 7.`console.log(yourObject.position.y > 10); // true`

- TheJim01

---

尝试读取xformcontrols的位置并使用three.js检查器。它将允许您可视化地检查所有对象、层次结构和转换，并防止无休止的搜索。 - Hacky

感谢@TheJim01提供了如何使用Three.TransformControls的详细说明。我有同样的代码。你说得对！经过调试，我发现mesh.position确实有更新后的位置信息。但是，在xformControl.attach(myObj);之后仅仅执行console.log(mesh.position.x)并不能获取到更新后的位置。 - Taher

感谢@Hacky为我推荐这个很酷的Chrome扩展程序three.js inspector。是的，即使我使用检查器来检查，xformcontrols的位置也会更新，但是console.log(xformcontrols.position.x)仍然无法工作。 - Taher

@TaherJodhpurwala xformControl.attach(myObj) 不会给你一个更新后的位置。 "gizmo" 在与您的对象相同的位置创建，而对象仍然停留在场景中的原位。它不会更新，直到您使用 "gizmo" 来转换对象。 - TheJim01

你可以提供一个 JSFiddle 吗，@TheJim01？ - Aasha joney

@Aashajoney 这个three.js的例子应该可以达到同样的目的：https://threejs.org/examples/misc_controls_transform.html - TheJim01

Answer 2

我很可能太晚了，但是你可以使用TransformControls的objectChange事件获取更新后的值。

示例代码：

const transformControls = new TransformControls(camera, renderer.domElement);

transformControls.addEventListener('objectChange', (e) => {
  console.log(e.target.object.position.x);
})

- Kenny

Answer 3

第一个答案是不正确的，应该是：

onst transformControls = new TransformControls(camera, renderer.domElement);

transformControls.addEventListener('objectChange', (e) => {
  console.log(e.target.object.position.x);
})

- noshin kamal