Bug WebXR phone/browser

Mouse Click Ray fails on WebXR mode, but in normal browser 3D works

by Fox Fairlane

CSS

html,body
{
    margin: 0px;
    padding: 0px;
    border: 0px;
    width: 100%;
    height: 100%;
}

canvas
{
    display: block;
}

JavaScript

import * as THREE from 'https://unpkg.com/three@0.145.0/build/three.module.js'
import { VRButton } from 'https://unpkg.com/three@0.145.0/examples/jsm/webxr/VRButton.js';


const	renderer = new THREE.WebGLRenderer({antialias: true});
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.xr.enabled = true;
		renderer.xr.setReferenceSpaceType('local');


document.body.appendChild(renderer.domElement);
document.body.appendChild(VRButton.createButton(renderer));


const	scene = new THREE.Scene();
		scene.background = new THREE.Color(0xaaaaaa);


const	camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000);
		//camera.position.set(0, 1.6, 0);
        scene.add(camera);


const geometry = new THREE.CylinderGeometry(0.5, 0.5, 0.7, 8);
const material = new THREE.MeshBasicMaterial({color: 0xffff00, wireframe: true});
const cylinder = new THREE.Mesh(geometry, material);
	  cylinder.position.set(0, 0, -1.8);

scene.add(cylinder);


const geometry2 = new THREE.CylinderGeometry(0.3, 0.5, 0.9, 8);
const material2 = new THREE.MeshBasicMaterial({color: 0x00ffff, wireframe: true});
const cylinder2 = new THREE.Mesh(geometry2, material2);
	  cylinder2.position.set(1.5, 0, -1.8);

scene.add(cylinder2);




window.addEventListener('resize', onWindowResize);
window.addEventListener('mousedown', onMouseDown);

function onMouseDown(e)
{
	var raycaster = new THREE.Raycaster();    
 
    var x =  (e.clientX / window.innerWidth ) * 2 - 1;
	var y = -(e.clientY / window.innerHeight) * 2 + 1;
    var z = -0.5;

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

	if( renderer.xr.isPresenting )
    	raycaster.setFromCamera(mouse, renderer.xr.getCamera());
    else
    	raycaster.setFromCamera(mouse, camera);

    var arrow = new THREE.ArrowHelper(raycaster.ray.direction, raycaster.ray.origin, 1.8, 0x0000ff);
    scene.add(arrow);
}

function onWindowResize()
{
	camera.aspect = window.innerWidth /...