How to make position to center of mesh when use TransformControls

Questions
1

Hello, I use transform controls in my page.
But it’s not center of attached object.

I’ve tried three.js sample also. But unfortunately it’s not working also.

111
111810×706 64.8 KB

I’ve just added one line code in sample as named “controls/transform”.

  		const geometry = new THREE.BoxGeometry( 200, 200, 200 );
  		geometry.applyMatrix( new THREE.Matrix4().makeTranslation(200, 0, 0)); // added this line
  		const material = new THREE.MeshLambertMaterial( { map: texture, transparent: true } );

  		orbit = new OrbitControls( currentCamera, renderer.domElement );
  		orbit.update();
  		orbit.addEventListener( 'change', render );

  		control = new TransformControls( currentCamera, renderer.domElement );
  		control.addEventListener( 'change', render );

  		control.addEventListener( 'dragging-changed', function ( event ) {
  			orbit.enabled = ! event.value;
  		} );

  		const mesh = new THREE.Mesh( geometry, material );
  		scene.add( mesh );
  		control.attach( mesh );
  		scene.add( control );

How can I make TransformControls position to center of mesh?

2 Likes
2

Instead of translating the geometry, have you considered to just offset the 3D object? Meaning

mesh.position.set( 200, 0, 0 );

In general, TransformControls evaluates the transformation of the 3D object. Also consider to add your object to an instance of THREE.Group which is an alternative workaround for implementing pivot points.

3

geometry.applyMatrix( new THREE.Matrix4().makeTranslation(200, 0, 0));
it’s just testing code.
In real case, the geometry have complex values. in this case, TransformControls is not working center of mesh.

4

TransformControls transforms the position, rotation or scale of a 3D object. The controls are unrelated to the geometry. It’s your task to center the object before using the controls.

Centering geometries can be done via BufferGeometry.center().

5

I think TransformControls should be center of mesh when it attach to any mesh.
If not, It’s not useful in most case.
What about your think?

6

Sorry, I don’t think so. TransformControls should only update the transformation of 3D objects. It’s not the tasks of the controls to figure out the center of objects nor perform the actual centering.

8

Hi @Mugen87 I made TransformControls to center of mesh. But mesh is not transformed by own center. Is there any method for it?

9

I am experiencing the case that the colleague tried to describe.

When I do control.attach(mesh), the control is not positioned in the center of the3D object, but to the side… Just like in the picture… Is there a solution for this?

image

I am not attaching an online example, because it is the same case as the person who opened this question here on the forum, and he already put the code there… But if you need it, I can provide it.

Best regards and thank for any help in advance!

3 Likes
10

Sorry, I’m not sure to understand the question but maybe the issue is because the mesh is not in the center of the scene. Did you try to set the mesh in the center?

11

I just crack this, here is my code.

const control = new TransformControls( currentCamera, renderer.domElement );
scene.add( control );

// assume you have a group and a list of object
const objects: Object3D[] = []; // objects to be transform
const group = new Group(); // temp group to hold these objects.
scene.add(group); // this group should add to scene before using TransformControls

// temp object for performance concern
const __transformOrigin = new Vector3();
const __transformBox = new Box3();

// handle transform activate
function controlsActivateHandler()
{
    group.clear();
    __transformBox.makeEmpty();
    selections.forEach((item) => __transformBox.expandByObject(item));
    __transformBox.getCenter(__transformOrigin);
    const { x, y, z } = __transformOrigin;
    group.position.set(x, y, z);
    selections.forEach((item) => {
      group.attach(item);
    });
    control.attach(group);
}

// handle transform deactivate
function controlsActivateHandler()
{
    if (group.children.length == 0) return;

    // Detach children from the group
    const children = group.children.slice();
    for (const child of children) {
      group.remove(child);
    }

    // Add children back to the scene with their world transformations preserved
    for (const child of children) {
      child.applyMatrix4(group.matrixWorld);
      scene.add(child);
    }

   control.detach(group);
}

note: this is pseudo code, form my react project which is worked, not implement it to vanilla js.