Skybox: My Work Flow

Generate a scene description

I started by generating a scene description using AI—usually ChatGPT 4.5. Skybox allows prompts up to 600 characters for most models. While it’s tempting to include a lot of detail, Skybox actually warns that longer prompts aren’t always better, and I found that to be true in practice. Overloading the prompt sometimes led to confusing layouts or rendering issues. If you’re just getting started or want to refine your approach, Skybox has a helpful prompting guide you can check out, but I had a lot of fun experimenting on my own.

Choose a model and style

Once I had a prompt ready, the next step was selecting a model and style in Skybox. The platform offers a wide range of options grouped into Realistic and Artistic categories, plus a style pack (I’m not really sure how these differed from the artistic models to be honest). These include everything from Cinematic Realism and Drone Shot to Digital Painting, Retro Fantasy, and Storybook. Each style dramatically changes the look and feel of your scene—so even with the same prompt, switching styles can lead to completely different results. You can view a full list of style options here. You’re not locked in either—you can change styles after generating a scene to test different versions with the same prompt.

Download and prep your scene

After generating a scene I was happy with in Skybox, I downloaded it as an equirectangular JPEG—the format needed for interactive 360° viewing and for editing in Photoshop.

Skybox is great at producing immersive environments, but when it comes to fine details—like signs, text, animals, people, or specific objects—it sometimes falls short. That’s where outside tools come in. You can add elements manually using Photoshop or another image editor to customize the scene and make it your own.

I added a boat to the beach scene below just to test the waters. There wasn’t one to begin with—and to be fair, that probably looked better. But it was a fun way to try adding custom elements and see how they worked in a panoramic space.

Editing these types of images can be a little awkward, especially near the top and bottom edges where things can get warped or stretched. If you want to experiment with adding your own details, Adobe has a helpful guide on editing spherical panoramas in Photoshop here.

Once the edits were done, I uploaded the image into Marzipano, a free web-based tool that lets you view and interact with panoramic scenes. It’s simple to use and gives you a better preview of how the space actually behaves in a 360° environment.

If you’re happy with the image and don’t need to make any edits in Photoshop, you can embed it directly from Skybox using their share tools. It’s a quick option, but there are a few limitations to be aware of.

One issue I ran into was loading speed—since the embed relies on Skybox’s servers, it doesn’t always load quickly, and occasionally it failed to load at all when the site was experiencing issues. That’s why I ended up hosting the files myself using Google Cloud, which gave me more stability and control.

Another limitation I noticed while testing was a visible watermark at the top, bottom, and lower-right corner of the image. That’s expected with a free account—but I was using a paid plan, so it shouldn’t have appeared. I’ve contacted support and am waiting to hear back.

The image below is embedded directly from Skybox, while the edited beach scene above was uploaded and hosted using Marzipano (more on that in a minute).

I’m including it here so you can see how the embed functions—what the interactive experience looks like, how it loads, and where the watermark appears if it's present. One thing I don’t love is the automatic panning. You can interact with the image manually, but the auto-movement can be a little dizzying, especially if you're trying to focus on specific details. It’s a good option if you don’t plan to make any edits and just want to quickly share your scene.

If you want to make your 360° scene interactive—like adding hotspots that link to other scenes, display information, or trigger audio—you have a couple of options depending on where you're planning to publish it.

If you're putting the experience on a website or blog, you can use Marzipano to add hotspots directly. It lets you define clickable areas, connect scenes, and add pop-ups or media. When you're done, you export everything as a zip folder and upload it to your site.

To publish it, you’ll need to host the contents on a web server- this means unzipping the folder and uploading it somewhere that can serve HTML files.

I was already using Google Cloud to host courses I’ve created in tools like Storyline and Rise, so I didn’t set it up specifically for this project. Since I was familiar with the process, I used it again to host my interactive 360° scene. I uploaded the unzipped files into a Cloud Storage bucket and made them public. I didn’t need to enable anything special—rather than setting up formal static website hosting, I just accessed the scene directly using the public URL of the index.html file. This worked perfectly for sharing and embedding the interactive scene, without needing extra configuration.

If you're looking for something simpler or free to start with, here are a few beginner-friendly alternatives:

  • Netlify – drag and drop your folder, and it instantly publishes your scene.

  • GitHub Pages – good for developers or folks comfortable with version control.

  • Replit – easy to test and host small projects right from your browser.

Once it’s hosted, you can link to the interactive experience or embed it in your blog just like any other webpage.

See that title at the top of the image?

Yeah… I didn’t love that.

Marzipano automatically pulls in the file name and displays it as a scene title—but there’s no easy way to turn that off in the interface. Luckily, there’s a quick workaround.

(Side note: this doesn’t happen in Skybox—embedded scenes there don’t show the file name or scene title, which gives them a cleaner look right away… aside from the 18 watermarks.)

To get rid of the title, I downloaded the zipped project folder, unzipped it, and opened the style.css file using WordPad (or any basic text editor). Then I added this little line of code to the bottom:

#sceneTitle { display: none !important; }

This hides the scene title from being displayed in the viewer, giving the scene a cleaner look, as you can see in the image below.

There are other ways to remove the title, such as editing the JavaScript or HTML directly, but this approach worked best for me. After saving the file, I uploaded the edited project folder to Google Cloud for hosting. The scene no longer displayed the file name at the top when viewed—making the viewer look much cleaner and more polished- which is what I want for instructional design or e-learning projects…and, honestly, for just about everything (I can be particular, hahaha).

After polishing the scene, I explored the option of adding interactivity. While interactivity can enhance the experience, it really depends on what you're aiming to achieve with your project.

I briefly mentioned how I used Marzipano to add hotspots and other interactive elements, but I’ll go into more detail on how to set these up, customize them, and use them effectively in a future post. Stay tuned! :)

A note on Marzipano settings:

In Marzipano, the navigation settings can significantly affect how the 360° scene behaves (try interacting with the beach image and then the salt flats image). By default, the scenes are set to auto-rotate with mouse drag to navigate.

The beach image might look like a static photo at first because autorotate is turned off—it won’t start moving on its own. But it’s set to use QTVR-style navigation, so once you click and move your mouse—or even just hold it in one spot—the scene reacts to your cursor’s position on the screen. That can make it feel like it’s spinning without you actually dragging, so to me it feels a little sensitive and over-responsive. (Relatable, honestly.)

I prefer to turn off auto-rotate and leave the navigation set to drag, as I find it gives more control over the movement. The QTVR setting (QuickTime VR) feels a bit trickier for me to use, but I plan to explore it further. The first image (the beach scene with the floating boat) is set with auto-rotate off and drag navigation, while the others are set to auto-rotate with drag, which is why they behave a bit differently.

If you’re customizing your own 360° scene, you might want to experiment with these settings to find what works best for your project.

Navigation might seem like a small detail, but it can completely shift how your 360° scene feels to your audience. A little experimentation goes a long way.

Previous
Previous

The Good, the Bad, the Weird

Next
Next

Trying Skybox for Learning Design