I created a 360 viewer using a cubemap with boxgeomtery and an array of meshbasicmaterial for cubefaces. Now I am trying to display some waypoints on back face of the cube knowing position relative to that face. How can I do that? I tried to simulate a raycast to that texture and discover the world position in order to add an a-entity element for that waypoint at the correct-position, but that didn't work.

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);
}

Another solution was to use a canvas as texture for back face and draw at that position an image of the waypoint, but using this solution I can not add hover or click listeners for the waypoint in order to teleport the user to the linked scene.

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);
}

Any help for any of this solution would help. Thank you