As I work on creating a virtual tour using 360 images, I am looking to include hotspots or div elements within the image that can be clicked. How can I store data in my database from the event values such as angle value, event.clientX, and event.clientY when a click event occurs? Currently, I have experimented with sprite material which works well, but it does not allow me to use CSS styles. I am now exploring the option of placing a div element outside the canvas where I can manipulate its position and display hotspot content. In the code snippet below, the onMouseMove function handles mouse movement events by updating the position of the 'hotspotdiv' based on the intersected point on the spherical mesh:
onMouseMove( event ) {
const intersects = raycaster.intersectObjects(spheremesh, true);
if (intersects[0]) {
var infoHotspotsPoint = intersects[0].point;
$('#hotspotdiv').css({
top: `${event.offsetY}px`,
left: `${event.offsetX}px`
});
}
}While this implementation ensures that the div is displayed at a fixed position in the 360 image, I aim to enhance it further by enabling the div to move along with the rotation and be hidden when the clicked part becomes invisible.
For reference, you can check out a similar feature implemented in this example: Dubai 360 Virtual Tour