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将鼠标控件限制和缩放到画布大小

回答

相关问题