Forum Discussion

destery1kenobi's avatar
destery1kenobi
Community Member
2 months ago

360 Images in Rise

Hey everyone! I've been experimenting with embedding 360° panoramic images directly into Rise using the Code Block and Pannellum, a free, open-source WebGL viewer, and honestly it turned out way cool.

The build is a single HTML file you paste into a Rise Code Block. What you get out of the box:

  • Auto-panning on load with a play/pause toggle
  • Multi-scene navigation (forward/back buttons that loop)
  • Fullscreen without any image distortion
  • Clean minimal controls that stay out of the way

All you need is a song in your heart, and some hosted equirectangular images. I hosted the images in another Rise lesson for simplicity. I'm attaching the index files for both versions. Give it a go. 

Happy to answer questions or nerd out about it in the comments. 🙂

Test it out here! 

6 Replies

  • How to use other 360 images; I replaced the image_url with local file name, but the image is not loading.

     

    Where should i upload these images and use as link?

    • destery1kenobi's avatar
      destery1kenobi
      Community Member

      I have them stored in my RIse project. I create either a stand alone project or lesson in

       my 360 project called "Image Repo" . This is where I upload the images using any of the image block opt

      ions. Typically I use the four column grid so I can upload everything into one block. 

      Last step is to hover over an image > right click > then choose "Copy Image Address". 

      That is the image you use when vibe coding the player. Tell your AI tool of choice to use this link for the image in this scene. Let me know how it goes. 

      Good luck! - Destery

  • Oh this is so neat! I love seeing it "flow" in the course itself (and would love to play a "geoguessr" version of this someday!) 

  • Very effective! To support the intended learning experience, please recommend a song for the heart.