如何沿z轴在three.js中获取鼠标位置答案

【问题标题】：How to get mouse position in three.js along z axis如何沿z轴在three.js中获取鼠标位置
【发布时间】：2014-02-07 16:48:46
【问题描述】：

所以想法是在 z = 0 和无限 x y 处创建 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);

        }

【问题讨论】：

如果是 2D 场景并且一切都在 z = 0 上，那么你的鼠标位置是否总是会在 z- 上是 0轴？
是的，但是相机的 z 轴可以改变。我正在寻找鼠标悬停的 x 和 y 坐标。我开始认为用相机 z 轴和画布/窗口的大小做一些数学运算可能会消除所有这些。
测试这个stackoverflow.com/questions/13055214/…
这仅在 x 轴上给了我以下数字 3435.0137722635331010101010-8.120402680783053
恭喜您解决了问题。要正确关闭此问题，而不是对其进行编辑并添加您的解决方案，只需为您的问题创建一个答案，然后粘贴您的解决方案。您将能够在两天内接受答案。这就是我们在 Stackoverflow 上的做法。

标签： javascript three.js

【解决方案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;
        }

这很好用。

【讨论】：

你是从哪里得到“cX”和“cY”的？
代码必须在鼠标移动事件中使用，其中cX = event.clientX and cY = event.clientY