I am new to threejs.

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

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.

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.

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 es back to the page or does a page refresh.

Any pointers would be very helpful.

Thank you

I am new to threejs.

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

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.

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.

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 es back to the page or does a page refresh.

Any pointers would be very helpful.

Thank you

• javascript
• three.js

• mesh.position is a Vector3 which is the local position of the mesh. It looks like TransformControls updates this vector, so you should be able to get the new position from mesh.position after the transform is plete. Is this what you're tying to do, or is mesh.position not being updated after the transformation? – TheJim01 Commented Mar 8, 2017 at 14:46
• Yes that is exactly what I am trying to do. When I do console.log(mesh.position.x + ',' + mesh.position.y + ',' + mesh.position.z) after calling THREE.TransformControls(camera, renderer.domElement); I get the output as 0,0,0 So yes mesh.position is not getting updated after I move the object inside the scene. – Taher Commented Mar 8, 2017 at 17:59
• One more question: Which version of three.js are you using? – TheJim01 Commented Mar 8, 2017 at 18:16
• I am using three.js R73 – Taher Commented Mar 9, 2017 at 6:10
• For the record, r73 is quite old. The current version is r84. I understand if you have limitations which prevent you from upgrading to the latest version, but it is highly remended. – TheJim01 Commented Mar 9, 2017 at 14:10

3 Answers 3

THREE.TransformControls requires a few steps to use.

1. Create your THREE.TransformControls object
2. Add it to your scene
3. 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.

Additional information for clarity:

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

1. Your object is in the scene at (10, 10, 10)
2. xformControl.attach(yourObject)
3. The "gizmo" is created at (10, 10, 10)
4. Your object remains at (10, 10, 10)
5. Use the "gizmo" to translate the object in +Y direction
6. Your object will now have an updated position
7. console.log(yourObject.position.y > 10); // true

I might be too late, but you can get the updated value by using TransformControls' objectChange event.

Example code:

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

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

first answer is not correct, it should be:

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

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