React Three Drei Pivot Controls

Questions
1

Am Using PivotControls From Drei, everything is working fine but suddenly i noticed that the mesh position and rotation are not changing, the mesh position and rotation remains at 0 on all the axes, what i need is to make the mesh position and rotation change each time am using the Pivot Controls

2

It worked straight away for me,

Maybe share your code, otherwise its guess work.

1 Like
3

Thanks for replying
I think you didn’t understood my question, it will work but the mesh position won’t be updated by using the pivot controls, create a ref for the mesh and check the mesh position after it has been moved you will notice that the position will remains at 0 for x y z

4

Not sure, but I’m guessing it’s directly updating the matrix instead of individually updating the position, rotation, scale, quaternion.

Try Object3D#applyMatrix4 then read the vectors:

object.applyMatrix4();
console.log(object.position, object.rotation);
5

It’s probably not so obvious that the mesh is being repositioned in the scene.
It is at [0,0,0] while it is a child of the pivot hierarchy.

If you attach the mesh to the scene, then it will leave the pivot hierarchy and its position will now be updated to world coordinates.

In the example below,

  1. move the box using the PivotControls,
  2. open the developer console view in your browser,
  3. and then press the detach button to see what happens

You will get something like this
image

1 Like
7

While your object is controlled by the pivotcontrols, it becomes part of the pivot controls hierarchy. So by default, it will always be at 0,0,0 relative the pivotcontrols, which is its parent.

[0,0,0] is your objects local coordinates.

image
image1769×360 44.3 KB

If you want to keep your object attached to the pivotcontrols, then instead you could calculate your objects world coordinates every time you needed it.

A little bit about scene graph hierarchy : Object3D Hierarchy - React Three Fiber Tutorials

9

also, i checked for the PivotControls position and the mesh position and guess what we have the same result but some how the position on the screen does not match
Thanks Mr.Seanwasere for your help

10

Get the world position of your object

View the console in this example,

You will see something like this when you drag
image

11

indeed, pivot is matrix driven, it sets matrixAutoUpdate={false}. but even if not, the children of pivot are inside a group so they have relative position anyway. it’s not the children that move it’s the outmost group, which imo makes sense since you could have multiple children and it wouldn’t really be efficient to move each single one.

what you can do though is make pivot itself drive a single matrix without any children, this matrix can then be decomposed and applied to anything you want. this example almost does that. almost because it uses the matrix as is without unpacking, but that would just be a detail.

edit:

found an example where the matrix is unpacked. this one doesn’t refer to a external matrix but just uses the onDrag event and picks up the local matrix.

const ref = useRef()
...
<PivotControls
  onDrag={(local) => {
    const position = new THREE.Vector3()
    const scale = new THREE.Vector3()
    const quaternion = new THREE.Quaternion()
    local.decompose(position, quaternion, scale)
    // apply these to anything you want
    ref.current.position.copy(position)
    ref.current.scale.copy(scale)
    ref.current.quaternion.copy(quaternion)
  } />
<mesh ref={ref} />
3 Likes
12

Infact if you want to see you getWorldQuaternions in the same way
thanks @seanwasere