Get object position in a three.js scene dynamically

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