如何在VR模拟中在相机(我的眼睛)和鼠标光标之间投射光线

Question

我试图在浏览器中点击VR模拟模式(也将在手机上使用(，并从相机(我的眼睛/窗口中心(向鼠标光标显示黄色光线，但我无法获得正确的方向/位置。

public function onMouseDown(e:Event): Void
{
// The camera in VR was created automatically by the threejs engine.
var camera:WebXRArrayCamera = renderer.xr.getCamera();
// x and y will get a value from (-1 to +1)
// I have no clear with z must be in -0.5 and not another value.

var x:Float =  (event.clientX / canvas.parentElement.offsetWidth ) * 2 - 1;
var y:Float = -(event.clientY / canvas.parentElement.offsetHeight) * 2 + 1;
var z:Float = -0.5;

var mouse:Vector3 = new Vector3(x, y, z);

var origin:Vector3 = new Vector3();
origin.copy(camera.position);

var direction:Vector3 = new Vector3();
direction.copy(mouse);

var arrow:ArrowHelper = new ArrowHelper(direction, origin, 5, 0xffff00);
scene.add(arrow);
}

如果我点击窗口的中心，这或多或少是正确的，但如果我将光标鼠标向右移动，结果是错误的，正如你在屏幕截图中看到的那样https://ibb.co/TBnNtnb

https://jsfiddle.net/0t2yczh7/

黄色箭头应该正好在我鼠标光标的中心，但它不是。如果我往右边走得更多，偏移量就会更大。

我做错了什么？

另一方面，在我的世界里，计量单位是米，所以我不确定x和y(-1到+1(的值是否错误。如何将像素(canvas。parentElement。offsetWidth(转换为米？？例如，1920x1080到7.55x4.25，具体取决于Fov。

Answer 1

您可以使用raycasters

以下是如何设置：

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
function onPointerMove( event ) {
pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

在animation循环中，您需要添加以下内容：

function render(){
...
raycaster.setFromCamera( pointer, camera );
const intersects = raycaster.intersectObjects( scene.children );
for ( let i = 0; i < intersects.length; i ++ ) {
//intersects[i] was intersected, do something.
}
}

最后，您需要添加一个事件侦听器：

window.addEventListener( 'pointermove', onPointerMove ); //When the pointer moves, cast a new ray.

那就行了~

Answer 2

我的意思是直接在浏览器中使用模拟VR环境的插件进行光线投射。

我认为这可能很棒，不必每次编译都使用VR头盔，我想尝试/调试一些东西。我想直接从浏览器中使用WebXR模拟器或直接从手机中进行操作，它将像VR头盔一样工作，但没有任何手控制器。

你可以从这里安装来自chrome的插件

https://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje

安装好后，看看我的小提琴，你就会明白我的意思了。

https://jsfiddle.net/foxfairlane/d3t7khvu/4/