Question

我是threejs的新手。

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

当我使用鼠标单击并在任何轴（即X，Y，Z）上拖动来翻译/移动场景内的对象时。我想在场景中获得该特定对象的更新的X，Y，Z位置坐标。

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

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

任何指针都会非常有用。

谢谢

Answer 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

Answer 2

我可能为时已晚，但您可以使用 TransformControls 的 objectChange 事件获取更新后的值。

示例代码：

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

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

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

2 个答案: