Очень новое для 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();
};
Почему вы вычитаете (70,50) из event.client? – gaitat
Средство рендеринга содержится в меньшем div на моей странице и смещается на 70 и 50 пикселей по горизонтали и вертикали от края экрана. Пока не выяснили, как лучше учесть маржи. –