javascript - THREE.js 3d 球体上的 MouseEvent 未在正确的位置触发

Question

我正在处理别人的项目来完成它，这非常酷。它应该是一个将动态生成节点(球体)并能够单击它们的图表，然后会出现一个包含相关节点的新图表。

我现在正在研究可点击的部分，看起来比我想象的要难。我已经阅读了光线转换和矢量。我什至找到了非常接近我想要的示例: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);

/image/KIvCK.png

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;

光线确实对它必须转换的位置感到困惑。我必须记下从屏幕顶部到 Canvas 的偏移量。