如何沿z轴在三个.js中获取鼠标位置

时间:2014-01-18 07:38:28

标签: javascript three.js

所以我们的想法是在z = 0和无限x y处创建一个平面。

然后从鼠标位置制作A光线并找到它相交的位置。

我不知道如何制作那架飞机,我不知道这是否是最佳方式。

这也是一个二维场景,一切都在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);

        }

1 个答案:

答案 0 :(得分: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;
        }

这完美无缺。