如何在Three.js中沿Z轴获取鼠标位置

Question

因此，我们的想法是在z = 0且无限x y处创建A平面。

然后从鼠标位置发出A射线，并找到相交的位置。

我不确定如何创建该飞机，也不确定这是否是最好的方法。

这也是一个2D场景，一切都在z = 0上

        var projector = new THREE.Projector();
        var  mouse_vector = new THREE.Vector3();
        var mouse = { x: 0, y: 0, z: 1 };
        ray = new THREE.Raycaster( new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0) ),
        var intersects = [];
        event_info.preventDefault(); 
        mouse.x = ( event_info.clientX / window.innerWidth ) * 2 – 1;
        mouse.y = – ( event_info.clientY / window.innerHeight ) * 2 + 1;
        mouse_vector.set( mouse.x, mouse.y, mouse.z );
        projector.unprojectVector( mouse_vector, camera );
        var direction = mouse_vector.sub( camera.position ).normalize();
        ray = ray.set( camera.position, direction );



        var plane = new THREE.Plane();
        plane.set(v1, v2, v3);
        var where = ray.intersectPlane (plane);

        intersects = ray.intersectPlane( Plane );

            alert(intersects);

        }

Answer 1

        function getXY(cX, cY){
            var projector = new THREE.Projector();
                    var planeZ = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
                    var mv = new THREE.Vector3(
                        (cX / window.innerWidth) * 2 - 1,
                        -(cY / window.innerHeight) * 2 + 1,
                        0.5 );
                    var raycaster = projector.pickingRay(mv, camera);
                    var pos = raycaster.ray.intersectPlane(planeZ);

                    return pos;
        }

这很完美。