transform - How to attach TransformControls to own center of mesh group in Three.JS?

Question

I attached THREE.TransformControls to mesh and then I added it to scene.

But it's showing in origin position instead center of mesh.

How to make position of TransformControl to center of mesh?

Here is my code snippet I tried.

  function createTransformControl(mode) {
    let transform = new THREE.TransformControls(camera, canvas);
    transform.setMode(mode);
    transform.addEventListener('dragging-changed', (event) => {
      cameraCtrl.enabled = !event.value;
    });
    transform.addEventListener('change', () => render());
    return transform;
  }

  function render() {
    scene.updateMatrixWorld();
    renderer.clear();
    renderer.render(scene, camera);
  }

  let transformControl = createControl("rotate");
  transformControl.attach(curMesh);
  scene.add(transformControl);

In upper code snippet, curMesh is THREE.Group(), scene is THREE.Scene().

Please anyone help.

question from:https://stackoverflow.com/questions/65916276/how-to-attach-transformcontrols-to-own-center-of-mesh-group-in-three-js

Answer 1

Waitting for answers