How to make position to center of mesh when use TransformControls

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.

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.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?

1 Like

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.

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.

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

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?

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.

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

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?


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!