[orbit-controls] Conflicts with TransformControls

[khalidmaquilang]

How to deactivate orbit-controls when using the transform controls?

[khalidmaquilang]

okay I got it.. i just added an event listener

let transform_controls = new TransformControls(camera, scene.sceneEl.renderer.domElement)
    transform_controls.attach(elem)
    transform_controls.addEventListener( 'dragging-changed', function ( event ) {
        current_camera = document.getElementById('camera')
        if (event.value) {
            current_camera.pause()
            return
        }

        current_camera.play()
    } )

[khalidmaquilang]

another problem is that after I move the entity, the camera returns to its target coordinate.. it doesn't stay in the previous position

[vincentfretin]

This seems to be a problem specific to your project code. You'll probably have a better chance of finding a solution to your issue on WebXR Discord aframe channel if you provide a glitch example of the issue.

[khalidmaquilang]

I fixed the problem by removing controls.target = this.target.copy(data.target); in the update function of orbit-control

[vincentfretin]

That's great you find a fix. Hard to tell if it's a good one or not without a full example of what you're doing and how you switch between the two controls. You can close the issue if this change looks good to you.

[khalidmaquilang]

For documentation purposes here is my code:

    const elem = document.getElementById(primitive.id).getObject3D('mesh')    
    const camera = document.getElementById('camera').getObject3D('camera')

    let transform_controls = new TransformControls(camera, scene.sceneEl.renderer.domElement)
    transform_controls.attach(elem)
    transform_controls.addEventListener('dragging-changed', function (event) {
        // disable orbit control when doing transform(translate, rotate and scale)
        orbit_control.enabled = !event.value
    })
    transform_controls.addEventListener('objectChange', (e) => {
        // update selected model
        updateControlModel(e.target.object)
    })
    scene.object3D.add(transform_controls)

in my orbit-control.js

                    // controls.target = this.target.copy(data.target);
                    controls.cursor = this.cursor.copy(data.cursor);
                    controls.autoRotate = data.autoRotate;
                    controls.autoRotateSpeed = data.autoRotateSpeed;
                    controls.dampingFactor = data.dampingFactor;
                    controls.enabled = data.enabled;
                    controls.enableDamping = data.enableDamping;
                    controls.enablePan = data.enablePan;
                    controls.enableRotate = data.enableRotate;
                    controls.enableZoom = data.enableZoom;
                    controls.keyPanSpeed = data.keyPanSpeed;
                    controls.maxPolarAngle = THREE.MathUtils.degToRad(data.maxPolarAngle);
                    controls.maxAzimuthAngle = THREE.MathUtils.degToRad(data.maxAzimuthAngle);
                    controls.maxDistance = data.maxDistance;
                    controls.minDistance = data.minDistance;
                    controls.minPolarAngle = THREE.MathUtils.degToRad(data.minPolarAngle);
                    controls.minTargetRadius = data.minTargetRadius;
                    controls.maxTargetRadius = data.maxTargetRadius;
                    controls.minAzimuthAngle = THREE.MathUtils.degToRad(data.minAzimuthAngle);
                    controls.minZoom = data.minZoom;
                    controls.maxZoom = data.maxZoom;
                    controls.panSpeed = data.panSpeed;
                    controls.rotateSpeed = data.rotateSpeed;
                    controls.screenSpacePanning = data.screenSpacePanning;
                    controls.zoomSpeed = data.zoomSpeed;
                    controls.zoomToCursor = data.zoomToCursor;