Three.js將鼠標控件限制和縮放到畫布大小

我一直在玩Three.js一段時間，目前我正在處理鼠標拖動方式與three.js的可拖動立方體示例中的拖動方式相同，與軌跡球控制操作相機，但這些控制似乎工作假設我使用整個瀏覽器窗口爲我的應用程序。
有什麼方法可以將這些鼠標控件縮放（和限制）到我的畫布上嗎？Three.js將鼠標控件限制和縮放到畫布大小

編輯：這裏是示出了用於將對象拖動鼠標事件代碼示例（它實際上幾乎在three.js所示例目錄所提供的示例相同，但是我施加妮歐塔·烏乎拉的代碼）

`//Called when cursor is moved, drags object if one is selected 
     function onDocumentMouseMove(event) { 

      event.preventDefault(); 

      //mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
      //mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 

      mouse.x = cursorPositionInCanvas(renderer.domElement, event)[0]; 
      mouse.y = cursorPositionInCanvas(renderer.domElement, event)[1]; 

      var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5); 
      projector.unprojectVector(vector, camera); 
      var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 

      if (SELECTED) { 
       var intersects = raycaster.intersectObject(plane); 
       SELECTED.position.copy(intersects[ 0 ].point.sub(offset)); 
       return; 
      } 

      var intersects = raycaster.intersectObjects(objects); 

      if (intersects.length > 0) { 
       if (INTERSECTED != intersects[ 0 ].object) { 
        INTERSECTED = intersects[ 0 ].object; 
        plane.position.copy(INTERSECTED.position); 
        plane.lookAt(camera.position); 
       } 
      } 
      else { 
       INTERSECTED = null; 
      }    

     } 

     //Called when user clicks, selects object if mouse is over it and disables trackball controls 
     function onDocumentMouseDown(event) { 

      event.preventDefault(); 

      var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5); 
      projector.unprojectVector(vector, camera); 
      var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 
      var intersects = raycaster.intersectObjects(objects); 
      if (intersects.length > 0) { 
       controls.enabled = false; 

       SELECTED = intersects[ 0 ].object; 
       var intersects = raycaster.intersectObject(plane); 
       offset.copy(intersects[ 0 ].point).sub(plane.position); 
      } 

     } 

     //Called when user releases mouse button, deselects any selected objects and re-enables trackball controls 
     function onDocumentMouseUp(event) { 

      event.preventDefault(); 

      controls.enabled = true; 
      if (INTERSECTED) { 
       plane.position.copy(INTERSECTED.position); 

       SELECTED = null; 
      } 

     } 

     function cursorPositionInCanvas(canvas, event) { 
      var x, y; 

      canoffset = $(canvas).offset(); 
      x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left); 
      y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1; 
      return [x,y]; 
     }`

來源

2013-02-27 Broghain

我看到，在修改後的版本，你沒有關注妮歐塔·烏乎拉提供的代碼。您不縮放矢量以匹配屏幕座標，因此Y軸將被翻轉。鼠標向量應該被標準化，並且匹配WebGL使用的座標，Y必須被翻轉。如果你不這樣做，你可能會在你的RayCaster中看到奇怪的行爲。 – 2013-02-27 19:51:06

用jQuery：

function cursorPositionInCanvas(canvas, event) { 
       var x, y; 

       canoffset = $(canvas).offset(); 
       x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left); 
       y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1; 

       return [x,y]; 
    }

Javascript solution

Others

更新時間：

mouse.x = (cursorPositionInCanvas(renderer.domElement, event)[0])/$(canvas).width()) * 2 - 1; 
mouse.y = - (cursorPositionInCanvas(renderer.domElement, event)[1])/ $(canvas).height()) * 2 + 1;

來源

2013-02-27 09:51:25 uhura

這樣做，謝謝！ – Broghain 2013-02-27 13:18:12

Three.js將鼠標控件限制和縮放到畫布大小

回答

相關問題