# Orbit Controls with Transform Controls Not working right

**URL:** <https://discourse.threejs.org/t/orbit-controls-with-transform-controls-not-working-right/44137>\
**Category:** Questions\
**Tags:** transform-controls, orbit-controls, raycaster\
**Created:** [October 29, 2022, 7:47pm UTC](https://discourse.threejs.org/t/orbit-controls-with-transform-controls-not-working-right/44137 "2022-10-29T19:47:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jayeomer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jayeomer/32/41197_2.png) [@jayeomer](https://discourse.threejs.org/u/jayeomer)\
**Post date:** [October 29, 2022, 7:47pm UTC](https://discourse.threejs.org/t/orbit-controls-with-transform-controls-not-working-right/44137/1 "2022-10-29T19:47:31Z")

</div>

Hello professionals  
I am trying to make a simple setup to position a selected box, but the orbitControls isn’t working right, when mousedown even triggers, a box is selected. regardless of where I click. I don’t know what am I doing wrong.  
any help would be much appreciated.  
Please see [https://jsfiddle.net/jayeomer/rakdjzmb/2/](https://jsfiddle.net/jayeomer/rakdjzmb/2/)

---

<div class="post-metadata">

**Author:** ![jayeomer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jayeomer/32/41197_2.png) [@jayeomer](https://discourse.threejs.org/u/jayeomer)\
**Post date:** [October 30, 2022, 2:30am UTC](https://discourse.threejs.org/t/orbit-controls-with-transform-controls-not-working-right/44137/2 "2022-10-30T02:30:56Z")

</div>

Well, it looks like that I fixed it, update [https://jsfiddle.net/jayeomer/rakdjzmb/9/](https://jsfiddle.net/jayeomer/rakdjzmb/9/), the issue was click event on transform controls and mouse down on orbit controls, so I changed to dblclick to attach transform controls.

```javascript
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <script src="https://threejs.org/examples/js/controls/TransformControls.js"></script>
    <style>
html,body {
  width: 100vw;
  height: 100vh;
  padding: 0px;
  margin: 0px;
}

#canvas {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  border: 1px solid #fbfbfb;
}
    </style>
    <title>Raycaster</title>
</head>

<body>
  <canvas id="canvas"></canvas>
</body>

</html>

```

```javascript
var renderer, scene, camera, orbitControls, transformControls, geometry, material, INTERSECTED, selected, selectedBox, selectedBoxHelper, hoverBox, hoverBoxHelper, showHoverBox = true;
const pointer = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
var canvas = $("#canvas");
var width = canvas.width();
var height = canvas.height();
/*
________ _ _ ________  ____ 
| | __| |\/| |___ | __/ |__ | 
| ___| | | | |___ | \ | |
*/
  camera = new THREE.PerspectiveCamera(90, width / height, 1, 1000);
  camera.position.set(250, 50, 250);

function init() {

/*
________ _ _ _______  ________  ____ 
| __/ |___ |\ | | \ | ___|__ / | ___|__ / 
| \ | ___| \| |__ / | ___| \ |___ | \ 
*/
  renderer = new THREE.WebGLRenderer({
    canvas: canvas[0],
    antialias: true,
    alpha: true
  });

  renderer.setSize(width, height);
/*
________  _____ _____ 
[ __| |___ |\ | |___ 
___] |___ | ___| \| |___
*/
  scene = new THREE.Scene();

/*
 ____  _____  _____ __      
/ \ |__) |__) | | / | |__) |   
\ __/ | \ |__ ) | | \ __| | \ |__ 
*/

orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
        orbitControls.update();
        orbitControls.addEventListener( 'change', render );

/*
_______  _____ _____  ________  _____ _____  _______ _    
 | | __/ |__ | |\ | [ __|___ | | | __/ |\/| | | |__ / |    
 | | \ | | | \| ___] | |__| | \ | | | ___| | \ |___ 
*/
    transformControls = new THREE.TransformControls( camera, renderer.domElement );
    transformControls.size = 0.6;
    transformControls.addEventListener( 'change', function ( event ) {
        selectedBox.setFromObject(selected, true);
        hoverBox.setFromObject(selected, true);
        animate();
    });
    transformControls.addEventListener( 'dragging-changed', function ( event ) {
        orbitControls.enabled = ! event.value;
    });
    transformControls.addEventListener('mouseDown', function () {
        showHoverBox = false;
        orbitControls.enabled = false;
    });
    transformControls.addEventListener('mouseUp', function () {
        showHoverBox = true;
        orbitControls.enabled = true;
    });
    setTranformKeys();
    scene.add( transformControls );
/*
_ _ _____ ____ 
| | | __|__ | |  
| ___| |__ ] | | |  
*/
  const light = new THREE.DirectionalLight(0xffffff, 0.5);
  light.position.set(5, 10, 7.5);
  scene.add(light);
/*
      _____  _____ __  
| __| |__ | |__) |__ |__) /__` 
| | | ___|___ | | ___| \ .__ /
*/
  selectedBox = new THREE.Box3();
  selectedBox.setFromCenterAndSize(new THREE.Vector3(1, 1, 1), new THREE.Vector3(2, 1, 3));
  selectedBoxHelper = new THREE.Box3Helper(selectedBox, 0x00ffff);
  scene.add(selectedBoxHelper);
    

    
  hoverBox = new THREE.Box3();
  hoverBox.setFromCenterAndSize(new THREE.Vector3(1, 1, 1), new THREE.Vector3(2, 1, 3));
  hoverBoxHelper = new THREE.Box3Helper(hoverBox, 0xffff00);
  scene.add(hoverBoxHelper); 
/*
_______  _______  ________  _______  ____ 
| __| | \ | \ | | |__ ] | |___| | [__  
| | | __/ |__ / | __| |__ ] _| | ___|___ | ___]
*/
var g = new THREE.Group();
  const geometry = new THREE.BoxGeometry(18, 6, 18, 3, 1);
  for (var r = 0; r < 20; r++) {
    for (var c = 0; c < 20; c++) {
      const material = new THREE.MeshStandardMaterial({
        color: 0xefefef
      });
      const cube = new THREE.Mesh(geometry, material);
      var x = c * 24,
        z = r * 24;
      cube.position.set(x, 3, z);
      g.add(cube);
    }
  }
  scene.add(g);

}
/*
_____ _ _ _____  ________ _ _ ____ 
|___| | |\ | | | | | | |\ | [__  
| | __| | \| |___ | | | __| | \|___ ]
*/

function setTranformKeys() {
        $('#canvas').hover(function() {
            this.focus();
        }, function() {
            this.blur();
        });
    
        $(window).keydown(function(event) {
        switch ( event.keyCode ) {
            case 81: // Q
                transformControls.setSpace( transformControls.space === 'local' ? 'world' : 'local' );
                break;

            case 16: // Shift
                transformControls.setTranslationSnap( 100 );
                transformControls.setRotationSnap( THREE.MathUtils.degToRad( 15 ) );
                transformControls.setScaleSnap( 0.25 );
                break;

            case 71: // G
                transformControls.setMode( 'translate' );
                break;

            case 82: // R
                transformControls.setMode( 'rotate' );
                break;

            case 83: // S
                transformControls.setMode( 'scale' );
                break;

            case 67: // C
                const position = currentCamera.position.clone();
                currentCamera = currentCamera.isPerspectiveCamera ? camera : cameraPersp;
                currentCamera.position.copy( position );
                controls.object = currentCamera;
                transformControls.camera = currentCamera;
                currentCamera.lookAt( controls.target.x, controls.target.y, controls.target.z );
                onWindowResize();
                break;

            case 86: // V
                const randomFoV = Math.random() + 0.1;
                const randomZoom = Math.random() + 0.1;
                camera.fov = randomFoV * 160;
                camera.bottom = - randomFoV * 500;
                camera.top = randomFoV * 500;
                cameraPersp.zoom = randomZoom * 5;
                camera.zoom = randomZoom * 5;
                onWindowResize();
                break;

            case 187:
            case 107: // +, =, num+
                transformControls.setSize( transformControls.size + 0.1 );
                break;

            case 189:
            case 109: // -, _, num-
                transformControls.setSize( Math.max( transformControls.size - 0.1, 0.1 ) );
                break;

            case 88: // X
                transformControls.showX = ! transformControls.showX;
                break;

            case 89: // Y
                transformControls.showY = ! transformControls.showY;
                break;

            case 90: // Z
                transformControls.showZ = ! transformControls.showZ;
                break;

            case 32: // Spacebar
                transformControls.enabled = ! transformControls.enabled;
                break;

            case 27: // Esc
                transformControls.reset();
                break;
        }
    });
    
    

}

function animate() {
  requestAnimationFrame(animate);
  orbitControls.update();
  render();
}

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

$(document).ready(function() {
    init();
    animate();
    
    $(document).on('mouseup', '#canvas', function(event) {
        orbitControls.enabled = true;
    });

    $(document).on('dblclick', '#canvas', function(event) {
        canvas = $(this);
        pointer.x = (event.offsetX / canvas.width()) * 2 - 1;
        pointer.y = -(event.offsetY / canvas.height()) * 2 + 1;
        raycaster.setFromCamera(pointer, camera);
        const all_intersects = raycaster.intersectObjects(scene.children, true);
        const intersects = all_intersects.filter(function(x){return x.object.type=='Mesh' && x.object.parent.type !== 'TransformControlsGizmo' && x.object.parent.parent.type !== 'TransformControlsGizmo'});
        console.log(intersects);
        if (intersects.length > 0) {
                selected = intersects[0].object;
                transformControls.attach(selected);
                selectedBox.setFromObject(INTERSECTED, true);
                if (selectedBox.isEmpty() === false && selectedBoxHelper.visible == false) {
                    selectedBoxHelper.visible = true;
                }
        } else {
            selectedBoxHelper.visible = false;
            transformControls.detach(selected);
            selected = null;
            INTERSECTED = null;
        }
    });
    
    $(document).on('mousemove', '#canvas', function(event) {
        canvas = $(this);
        pointer.x = (event.offsetX / canvas.width()) * 2 - 1;
        pointer.y = -(event.offsetY / canvas.height()) * 2 + 1;
        raycaster.setFromCamera(pointer, camera);
        const all_intersects = raycaster.intersectObjects(scene.children, true);
        const intersects = all_intersects.filter(function(x){return x.object.type=='Mesh' && x.object.parent.type !== 'TransformControlsGizmo' && x.object.parent.parent.type !== 'TransformControlsGizmo'});
        if (intersects.length > 0) {
            if (INTERSECTED != intersects[0].object) {
                INTERSECTED = intersects[0].object;
                if (INTERSECTED.type == 'Mesh' && showHoverBox == true) {
                    hoverBox.setFromObject(INTERSECTED, true);
                    if (hoverBox.isEmpty() === false && hoverBoxHelper.visible == false && showHoverBox == true) {
                        hoverBoxHelper.visible = true;
                    }
                } else {
                    hoverBoxHelper.visible = false;
                }
            }
        } else {
            INTERSECTED = null;
            hoverBoxHelper.visible = false;
        }
    });

    $(document).on('keyup', '#canvas', function(event) {
        switch ( event.keyCode ) {
            case 16: // Shift
                transformControls.setTranslationSnap( null );
                transformControls.setRotationSnap( null );
                transformControls.setScaleSnap( null );
                break;
        }
    });
});

```