MouseEvent на THREE.js 3d шары не срабатывают в нужном месте

Question

Я работаю над чужим проектом, чтобы закончить его, и это довольно круто. Предполагается, что это диаграмма, которая будет динамически генерировать узлы (сферы) и иметь возможность нажимать на них, а затем появится новая диаграмма со связанными узлами.

Теперь я работаю над частью clic kable, это кажется сложнее, чем я думал. Я читал в raycasting и векторы. Я даже нашел примеры, которые очень близки к тому, что я хочу: http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html

НО, по какой-то причине, когда я нахожусь рядом с узлами (пятна наведения кажутся очень произвольными, как выделено на изображении), они меняют цвет. Для некоторых из них я даже не могу найти «горячие точки». Я думаю, что мне не хватает понимания непроектирования/преобразования/преобразования из 3d в 2d часть. И, возможно, именно поэтому моя мышь не пересекается правильно с узлами на экране, я думаю.

Мой OnMouseMove событие:

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

     var canvasSvg= d3.select("#canvas-svg")[0][0];   
     mouse.x = (event.clientX/canvasSvg.clientWidth) * 2 - 1; 
     mouse.y = - (event.clientY/canvasSvg.clientHeight) * 2 + 1; 

     var vector = new THREE.Vector3(mouse.x, mouse.y, 1).unproject(camera); 

     //raycaster.setFromCamera(mouse, camera); 
     raycaster.set(camera.position, vector.sub(camera.position).normalize()); 

     var intersects = raycaster.intersectObjects(scene.children); 

     //console logs 
     console.log("current 'canvas' div"); 
     console.log(canvasSvg) 

     console.log("mouse"); 
     console.log(mouse); 

     console.log("vector"); 
     console.log(vector); 



     if (intersects.length > 0) { 
      intersects[0].object.material.color.setHex(Math.random() * 0xffffff); //gives another color to the node i hover over 
      intersects[0].object.callback(); //this calls the funcion "callback" i attached to the nodes. 
     } 

     for (var i in intersects) { 
       intersects[ i ].object.material.color.setHex(Math.random() * 0xffffff | 0x80000000); 
     }  
    } 

Моя камера

 // Set camera attributes and create camera 
    var VIEW_ANGLE = 7, //field of view 
     ASPECT = WIDTH/HEIGHT, 
     //ASPECT = $container[0].clientWidth/$container[0].clientHeight, 
     NEAR = 0.1, 
     FAR = 10000; 
    var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); 

http://i.imgur.com/wWlEYQT.png?1

Answer 1

Добрый день! Мне удалось исправить его с помощью этого примера: http://jsfiddle.net/fek9ddg5/62/

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

луч действительно был смущен о том, где он должен был быть спроектирован. Я должен был принять к сведению смещение от верхней части экрана до моего холста.