Creé un visor 360 usando un mapa de cubos con geometría de caja y una matriz de material básico de malla para caras de cubo. Ahora estoy tratando de mostrar algunos puntos de ruta en la cara posterior del cubo sabiendo la posición relativa a esa cara. ¿Cómo puedo hacer eso? Traté de simular un raycast a esa textura y descubrí la posición del mundo para agregar un elemento de entidad a para ese punto de referencia en la posición correcta, pero eso no funcionó.

 const mouse = new AFRAME.THREE.Vector2(); mouse.x = 2115.66113; mouse.y = 1701.97974; // coordinates of waypoint on back face const ray = new AFRAME.THREE.Raycaster(); const camera = document.getElementById('cam').object3D.children[2]; // retrieve camera from aframe ray.setFromCamera(mouse, camera); // calculate objects intersecting the picking ray const b = document.getElementById('imag360').object3D.children[0].material[5] // back face of cube const intersects = ray.intersectObjects(b); if (intersects.length > 0) { console.log(intersects); }

Otra solución fue usar un lienzo como textura para la cara posterior y dibujar en esa posición una imagen del punto de referencia, pero con esta solución no puedo agregar oyentes de desplazamiento ni hacer clic en el punto de referencia para teletransportar al usuario a la escena vinculada.

 const canvas = document.createElement("canvas"); canvas.width = 4096; canvas.height = 4096; let context = canvas.getContext("2d"); const img = new Image(); img.src = "/assets/images/ring.svg"; img.onload = () => { context.drawImage(img, 2115.66113, 4096 - 1701.97974, 130, 130); const texture = new AFRAME.THREE.Texture(canvas); }

Cualquier ayuda para cualquiera de esta solución ayudaría. Gracias