非全屏时的 Three.js 光线投射答案

【问题标题】：Three.js raycasting when its not full screen非全屏时的 Three.js 光线投射
【发布时间】：2021-07-05 23:43:33
【问题描述】：

我最近遇到了有关 three.js 光线投射的问题。

我有一个 div 元素，它的元素不是全屏，也不应该是全屏，我认为这会导致我不知道如何解决的光线投射定位问题。

    let mouseVector = new THREE.Vector3()
let raycaster = new THREE.Raycaster()

Object.assign(mouseVector, {
  x: 2 * (e.clientX / canvas.width) - 1,
  y: 1 - 2 * (e.clientY / canvas.height)
})

raycaster.setFromCamera(mouseVector, camera)

let intersects = raycaster.intersectObject(scene.children)

for(const intersection of intersects) {
  console.log(intersection)
 }

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

  raycaster.setFromCamera( mouse, camera );    
  intersects = raycaster.intersectObjects( scene.children, true );
  console.log(intersects);

  for(const ray of intersects) {
    if(ray.object.name !== "Grid") {
      if(smallestDist == undefined){
          smallestDist1 = ray;
        }else if(smallestDist > ray.distance){
          smallestDist1 = ray
        }
    }
  }
   mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
  raycaster.setFromCamera( mouse, camera );    
  var intersects = raycaster.intersectObjects( scene.children );

  for ( var i = 0; i < intersects.length; i++ ) {
    if(intersects[i].object.name == "Grid"){
    }else{
      if(smallestDist == undefined){
        smallestDist = intersects[i];
      }else if(smallestDist > intersects[i].distance){
        smallestDist = intersects[i]
      }
    }
  }
  console.log(smallestDist1)
  if(smallestDist1){
    const geometry = new THREE.SphereGeometry( 0.5, 15, 15 );
    const material = new THREE.MeshBasicMaterial( {color: 0xFF0000} );
    const sphere = new THREE.Mesh( geometry, material );
    sphere.position.set(smallestDist1.point.x, smallestDist1.point.y, smallestDist1.point.z)
    sphere.name = "TestSphere"
    scene.add( sphere );
  }

上面是我尝试过的代码，但是由于带有 3D 对象的元素不是全窗口大小，我认为它正在出错。任何帮助表示赞赏。

【问题讨论】：

标签： javascript node.js three.js raycasting

【解决方案1】：

尝试像这样计算mouse：

const rect = renderer.domElement.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;

mouse.x = ( x / canvas.clientWidth ) *  2 - 1;
mouse.y = ( y / canvas.clientHeight) * - 2 + 1

【讨论】：

【解决方案2】：

对于 MouseEvent，浏览器窗口的左上角是坐标(0, 0) 的原点，而对于threejs，是画布的确切中心点。

Click here to see coordinate details.

如上图，画布的四个角点在threejs上下文下相当于(-1, 1), (1, 1), (1, -1), (-1, -1)。

否则，画布可能与浏览器有偏移量(0, 0)，可以通过canvas.offsetTop 和cavas.offsetLeft 访问。

综上所述，任何 MouseEvent 客户端坐标(event.clientX, event.clientY) 都应映射到threejs 坐标，如下所示：

mouse.x = ( (event.clientX - canvas.offsetLeft) / canvas.clientWidth ) * 2 - 1;
mouse.y = ( (event.clientY - canvas.offsetTop) / canvas.clientHeight ) * -2 + 1;

【讨论】：