Food factory interactive 360 photo

 

The code block feature is used for the introduction lesson of my e-learning course for new operators in a food factory. I wanted an interactive photo to give the learner a first feel of their upcoming workplace that integrated seamlessly in Rise. 

I used a 360-degree photo from the factory. The learner can scroll through the environment at their own pace. To encourage this I made it autorotate in the lesson and added a text label on top of the image. Of course you can probably go wild with adding more labels, POI's and interactions, for now it's a pretty clean image. 

How did I make this?

I vibecoded this with Claude. It advised me to use panellum CSS library. I tweaked the settings and had it put in a placeholder at the start of the code block where I could enter the Image URL easily. 

The challenge was where to host the image(s)? I didn't want the proprietary image to be hosted eternally on our server or on a public hosting service... In the kickoff webinar I got my answer! 

💡 Someone (sorry forgot your name) mentioned to upload the image in the Rise lesson, copy the url and then delete the image, as the image url would still be available on the Articulate server!!

 

Check it out and let me know what you think!

Review link