Три js raycaster не возвращают пересечения

Очень новичок в Three.js и программировании в целом, так что терпите меня. Я пытаюсь реализовать некоторые перетаскиваемые кубы, подобные примеру на threejs.org, но у меня возникают проблемы с raycaster в одном конкретном разделе моего кода. По какой-то причине 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();
  };

person Diederik Kroondijk    schedule 03.05.2015    source источник
comment
почему вы вычитаете (70,50) из event.client?   -  person gaitat    schedule 03.05.2015
comment
Рендерер содержится в меньшем div на моей странице и смещен на 70 и 50 пикселей по горизонтали и вертикали от края экрана. Еще не придумали лучшего способа учета маржи.   -  person Diederik Kroondijk    schedule 03.05.2015


Ответы (1)


Разобрался со своей ошибкой. Мне не хватало '-' для моего mouse.y в функции onMouseMove.

mouse.x = ((event.clientX - 70)/renderer.domElement.width) * 2 - 1;
mouse.y = -((event.clientY - 50)/renderer.domElement.height) * 2 + 1;
person Diederik Kroondijk    schedule 03.05.2015
comment
renderer.domElement.getBoundingClientRect(); даст вам (70,50) в атрибутах .left и .top результирующего прямоугольника. - person gaitat; 03.05.2015