Hi there!
We are currently working on scaling, moving, and rotating an image in our viewer using TransformControls. The viewer has a simple setup that includes an orthographic camera and OrbitControls for easy panning and zooming.
We noticed that the control UI always stays in the middle of the object your transforming. Is there a possibility to make it so that the control UI always stays in view even if we zoom in further or move away from it?
const loader = new TextureLoader();
const texture = loader.load('/grote-tekening.jpg');
const material = new MeshBasicMaterial({map: texture, color: 0xffffff, transparent: true, opacity: 0.5});
const geometry = new PlaneGeometry(8000 / 7, 4485 / 7);
const mesh = new Mesh(geometry, material);
mesh.position.set(0, 0, 0);
mesh.rotation.x = -Math.PI / 2;
ModelManager.instance.scene.add(mesh);
const control = new TransformControls(ModelManager.instance.cameraController.camera, ModelManager.instance._renderer.domElement);
control.attach(mesh);
control.axis = "XY";
control.addEventListener('dragging-changed', event => {
if (ModelManager.instance.cameraController.orbitController !== undefined)
ModelManager.instance.cameraController.orbitController.orbitControls.enabled = !event.value;
})
window.addEventListener('keydown', function (event) {
switch (event.code) {
case "KeyW":
control.setMode('translate');
break;
case "KeyE":
control.setMode('rotate');
break;
case "KeyR":
control.setMode('scale');
break;
}
});
ModelManager.instance.scene.add(control);