I'm in need of guidance on what to implement, unsure whether to use vanilla JavaScript or a library.
My goal is for users to view a 3D model building in their browser. The modeling is done in a specific tool and then exported as a sequence of images for a 360° experience. I have successfully implemented this code for the 360° functionality.
In the modeling tool, the camera used to capture the model's images (let's say it's a house) is positioned a few meters above and rotates around the house on a circle. I have access to these camera parameters (height and distance from the model center).
Furthermore, I want to add "hot spots" on this 360 JavaScript image spinner: users should be able to click on different surfaces (kitchen, dining room, room1, room2, etc.) and receive popup data. I have previously accomplished this in 2D using SVG (example here), but unsure how to achieve similar interactivity in a 3D environment. I am considering utilizing three.js for this task, although I may need some assistance as my knowledge of math is limited.
My ideal approach would involve:
- Drawing a map of the clickable zones (possibly with SVG)
- Rotating this map based on the same angle as the first picture of the sequence (camera height/distance)
- Updating the map rotation as the user interacts with the 360 image spinner by computing the angle around the x-axis.
If anyone has suggestions on how I could achieve this or which tools to utilize, I would greatly appreciate it.
Thank you.