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

Question

我是 threejs 的新手.

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

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

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

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

任何指示都会非常有帮助。

谢谢

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 应该反射(reflect)新位置。

为清楚起见的附加信息:

在您使用“小工具”移动对象之前，对象的位置不会更新。示例:

1. 您的对象在 (10, 10, 10) 的场景中
2. xformControl.attach(你的对象)
3. “gizmo”创建于 (10, 10, 10)
4. 你的对象保持在 (10, 10, 10)
5. 使用“gizmo”在+Y 方向平移对象
6. 您的对象现在将有一个更新的位置
7. console.log(yourObject.position.y > 10);//真