三个 js raycaster 不返回交叉点

Question

对 Three.js 很陌生，编码一般，请多多包涵。我正在尝试实现一些类似于 threejs.org 上示例的可拖动立方体，但我在代码的一个特定部分遇到了 raycaster 问题。出于某种原因，光线投射器在选择我的立方体时没有返回与我的平面几何体的交点。下面是具体的代码块。任何帮助将不胜感激。

function onDocumentMouseMove(event) {
    event.preventDefault();

    mouse.x = ((event.clientX - 70)/renderer.domElement.width) * 2 - 1;
    mouse.y = ((event.clientY - 50)/renderer.domElement.height) * 2 + 1;

    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera( mouse, camera );

    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) {
      INTERSECTED = intersects[0].object;
      plane.position.copy(INTERSECTED.position);
      plane.lookAt(camera.position);
    }

    render();
  };

下面是选择立方体的mouseDown事件：

function onDocumentMouseDown(event) {
    event.preventDefault();

    mouse.x = ( ( event.clientX - 70 ) / renderer.domElement.width ) * 2 - 1; 
    mouse.y = - ( ( event.clientY - 50 ) / renderer.domElement.height ) * 2 + 1;

    var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5);
    vector = vector.unproject(camera);
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObject(cube);

    if (intersects.length > 0) {    
      intersects[0].object.material.color.setHex(0xff0000);    
      SELECTED = intersects[ 0 ].object;
      var intersects = raycaster.intersectObject( plane );
      offset.copy( intersects[ 0 ].point ).sub( plane.position );    
    }

    render();
  };

Answer 1

找出我的错误。我在 onMouseMove 函数中缺少 mouse.y 的“-”。

mouse.x = ((event.clientX - 70)/renderer.domElement.width) * 2 - 1;
mouse.y = -((event.clientY - 50)/renderer.domElement.height) * 2 + 1;

三个 js raycaster 不返回交叉点

Three js raycaster not returning intersections

three.js

raycasting