Tengo el siguiente componente registrado en mi objeto glb 3D:

 AFRAME.registerComponent('room', { init: function() { let mesh = this.el.getObject3D('mesh') if (!mesh) { this.el.addEventListener('model-loaded', () => { el.addEventListener("click", evt => { console.log(evt) if (evt.detail !== null) { this.intersection = evt.detail.intersection } }); }) } }, });

En mi objeto de cámara, he colocado el cursor con el raycaster adjunto:

 <a-entity camera-listener id="rig" class='rig' movement-controls="speed: 0.1;" navigator="cameraRig: #rig; cameraHead: #camera-rig;"> <a-entity id="camera-rig" camera="active: true" position="0 1.6 0" look-controls="pointerLockEnabled: false; reverseMouseDrag: true"> <a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: .collidable"></a-entity> </a-entity> <a-entity laser-controls="hand: left" visible="true" raycaster="objects: .collidable;"></a-entity> <a-entity laser-controls="hand: right" visible="true" raycaster="objects: .collidable;"></a-entity> </a-entity>

Al probar la aplicación en dispositivos Chrome, Firefox y Android, la variable "evt" regresa con un atributo de detalle que no es nulo y que se puede asignar para decidir en qué elemento secundario de mi objeto glb se ha hecho clic. A mi me funciona perfectamente en estos casos.

Sin embargo, en los dispositivos iOS y Safari, el atributo de detalle de "evt" siempre es nulo y hace que mi aplicación se bloquee si no se marca. La verificación es fácil, pero el problema principal es que en estos navegadores no puedo detectar en qué objeto secundario se ha hecho clic desde mi glb como parte de la escena.

¿Existe otra forma de emisión de rayos que funcione en todos los navegadores o he cometido un error con mi configuración? Cualquier ayuda sería muy apreciada.