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

【问题标题】：Get object position in a three.js scene dynamically动态获取three.js场景中的对象位置
【发布时间】：2017-07-29 04:04:13
【问题描述】：

我是threejs 的新手。

我的场景中有一个对象，我们可以使用TransformControls.js 在所有 XYZ 轴上移动场景。

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

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

最终，我想在转换操作后保存更新的位置坐标，并在用户返回页面或刷新页面时重新渲染具有更新位置坐标处的对象的场景。

任何指针都会很有帮助。

谢谢

【问题讨论】：

mesh.position 是一个Vector3，它是网格的本地位置。看起来 TransformControls 更新了这个向量，所以你应该能够在转换完成后从mesh.position 获得新的位置。这是你想做的事情，还是mesh.position在转换后没有更新？
是的，这正是我想要做的。当我在调用THREE.TransformControls(camera, renderer.domElement); 之后执行console.log(mesh.position.x + ',' + mesh.position.y + ',' + mesh.position.z) 时，我得到的输出为0,0,0 所以是的，当我在场景中移动对象后，mesh.position 没有得到更新。
还有一个问题：您使用的是哪个版本的three.js？
我正在使用three.js R73
记录下来，r73 已经很老了。当前版本是 r84。我了解您是否有限制升级到最新版本，但强烈建议您这样做。

标签： javascript three.js

【解决方案1】：

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

创建您的 THREE.TransformControls 对象
将其添加到您的场景中
将其附加到您要操作的对象上

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”移动对象之前，对象的位置不会更新。示例：

您的对象在 (10, 10, 10) 处的场景中
xformControl.attach(yourObject)
“gizmo”在 (10, 10, 10) 创建
您的对象仍位于 (10, 10, 10)
使用“gizmo”沿 +Y 方向平移对象
您的对象现在将有一个更新的位置
console.log(yourObject.position.y > 10); // true

【讨论】：

尝试读取 xformcontrols 的位置并使用 three.js 检查器。它可以让您直观地检查所有对象、层次结构和变换，并防止无休止的搜索。
感谢@TheJim01 提供使用Three.TransformControls 的详细说明。我有相同的代码。你很准！调试后我发现mesh.position 确实有更新的位置。但只是在xformControl.attach(myObj); 之后执行console.log(mesh.position.x) 并不能让我获得更新的位置。
感谢 @Hacky 推荐酷炫的 chrome 扩展 three.js inspector 。是的，即使xformcontrols 的位置在我使用检查器检查时也会更新，但console.log(xformcontrols.position.x) 仍然不起作用。
@TaherJodhpurwala xformCtonrol.attach(myObj) 将不会为您提供最新职位。 “gizmo”创建在与对象相同的位置，并且对象保持在场景中的位置。在您使用“gizmo”转换对象之前，它不会更新。
你能提供一个小提琴@TheJim01

【解决方案2】：

我可能来不及了，但您可以使用 TransformControls 的 objectChange 事件获取更新后的值。

示例代码：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：