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

I am new to threejs.

我是trijs的新手。

I have scene with an object in it which we can move around the scene on all the XYZ Axis using TransformControls.js.

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

When I translate/move the object inside the scene using mouse click and drag on any of the axis (i.e X,Y,Z). I want to get the updated X,Y,Z position co-ordinates of that particular object inside the scene.

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

I use mesh.position.set( 0, 0, 0 ); to set position of the object prior rendering the scene, But I am not able to find how to get the dynamic position of an object inside a scene.

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

Eventually I want to save the updated position co-ordinates after the transform operation and re-render the scene with the object at the updated position co-ordinates when the user comes back to the page or does a page refresh.

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

Any pointers would be very helpful.

任何指针都会非常有用。

Thank you

1 个解决方案

#1

THREE.TransformControls requires a few steps to use.

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

Create your THREE.TransformControls object

创建您的THREE.TransformControls对象

Add it to your scene

将其添加到您的场景中

Attach it to the object you wish to manipulate

将其附加到您想要操作的对象

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();

Attaching the control to an object will insert a manipulation "gizmo" into the scene. Dragging the various parts of the gizmo will perform different kinds of transformations. After you are done transforming the part with the gizmo, checking mesh.position should reflect the new position.

将控件附加到对象将在场景中插入操作“Gizmo”。拖动Gizmo的各个部分将执行不同类型的转换。完成使用Gizmo转换零件后,检查mesh.position应该反映新位置。

Additional information for clarity:

其他信息为清晰起见:

The position of the object will not be updated until you use the "gizmo" to move it. Example:

在使用“Gizmo”移动对象之前,不会更新对象的位置。例:

Your object is in the scene at (10, 10, 10)

你的对象在场景中(10,10,10)

xformControl.attach(yourObject)
The "gizmo" is created at (10, 10, 10)

“Gizmo”创建于(10,10,10)

Your object remains at (10, 10, 10)

你的对象仍然是(10,10,10)

Use the "gizmo" to translate the object in +Y direction

使用“Gizmo”在+ Y方向上平移对象

Your object will now have an updated position

您的对象现在将具有更新的位置

console.log(yourObject.position.y > 10); // true

console.log(yourObject.position.y> 10); //真的

#1