title: Three.js - TransformControls
body: <p>I'm using the transformControls to translate, rotate and scale my objects. I want to be able to click on the different objects in my scene and transform them whenever I want: and it works !
  The only problem is that geometries have their clickable zone half moved up:</p>
  
  <p><a href="https://i.stack.imgur.com/7SOA5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7SOA5.jpg" alt="The hitbox isn&#39;t centered"></a> </p>
  
  <p>That is to say that I can't select my object on clicking in the lower zone, but if I click above it will be selected.</p>
  
  <p>And for the collada files it is even worse.</p>
  
  <p>I think it should be somewhere here:</p>
  
  <pre><code>function onDocumentTouchStart(event){
      event.preventDefault();
      event.clientX = event.touches[0].clientX;
      event.clientY = event.touches[0].clientY;
      onDocumentMouseDown(event);
  }
  function onDocumentMouseDown(event){
      event.preventDefault();
      mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
      mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
      raycaster.setFromCamera(mouse, camera);
      var intersects = raycaster.intersectObjects(objects);
      if(intersects.length &gt; 0){
          SELECTED = intersects[ 0 ].object;
          scene.add(control);
          control.attach(SELECTED);
      } else{
          scene.remove(control);
      }
  }
  </code></pre>
  
  <p><strong>EDIT :</strong></p>
  
  <p>OMG... The problem was some margins which were here...</p>
  
  <p>But now, my beginner problem is that I don't really know how to attach transformControls to my object. With the transformControls, I still have the problem. But when I change the material color on click, it works perfectly. Have the transformControls some kind of margins ? I did this :</p>
  
  <pre><code>if(intersects.length &gt; 0){
              SELECTED = intersects[ 0 ].object;
              scene.add(control);
              control.attach(SELECTED);
          } else{
              scene.remove(control);
          }
  </code></pre>