2015-05-03 3 views
1

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

Почему вы вычитаете (70,50) из event.client? – gaitat

+0

Средство рендеринга содержится в меньшем div на моей странице и смещается на 70 и 50 пикселей по горизонтали и вертикали от края экрана. Пока не выяснили, как лучше учесть маржи. –

ответ

0

Разобрался мою ошибку. Мне не хватало «-» для моей мыши. В функции onMouseMove.

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

'renderer.domElement.getBoundingClientRect();' даст вам (70,50) в атрибутах '.left' и' .top' результирующего прямоугольника. – gaitat

+0

Удивительный, спасибо за помощь! –

 Смежные вопросы

  • Нет связанных вопросов^_^