Your First Experience¶

A detailed walkthrough of creating a complete 360° VR tour from scratch.

What We'll Build¶

In this tutorial, you'll create a virtual art gallery tour with:

• 3 connected rooms (Lobby, Gallery A, Gallery B)
• Info hotspots displaying artwork details
• Audio narration at key points
• Navigation portals between rooms

Estimated time: 20 minutes

Part 1: Planning Your Tour¶

Before uploading images, plan your experience:

graph TD
    A[Lobby] --> B[Gallery A]
    A --> C[Gallery B]
    B --> A
    B --> C
    C --> A
    C --> B

Gather Your Assets¶

You'll need:

• 3 equirectangular 360° images (one per room)
• Optional: Audio files for narration
• Optional: Images for info hotspots

Part 2: Create the Sequence¶

Step 1: New Sequence¶

1. Log in to your dashboard
2. Click New Sequence
3. Enter details:
4. Name: "Art Gallery Tour"
5. Description: "Explore our virtual art gallery"
6. Click Create

Step 2: Sequence Settings¶

Configure global settings:

Part 3: Build the Lobby¶

Upload Lobby Skybox¶

1. Click Add Stage
2. Click Upload Skybox
3. Select your lobby 360° image
4. Wait for upload and processing

Configure Lobby Settings¶

Name: Lobby
Description: Welcome to our virtual gallery
Initial Camera:
  Yaw: 0       # Facing forward
  Pitch: 0     # Level horizon
Skybox Rotation: 0  # Adjust if image needs rotation

Add Welcome Hotspot¶

Create an info hotspot to greet visitors:

1. Click Hotspots tab
2. Click Add Hotspot in Preview
3. Click in front of the entrance area
4. Configure:

Add Navigation to Gallery A¶

1. Add another hotspot
2. Place it toward Gallery A entrance
3. Configure:

Add Navigation to Gallery B¶

Repeat for Gallery B entrance:

Part 4: Build Gallery A¶

Upload Gallery A Skybox¶

1. Click Add Stage
2. Upload your Gallery A image
3. Name it "Gallery A"

Add Artwork Hotspots¶

Create info hotspots for each artwork:

Type: Info
Position: (click on artwork location)
Title: "Starry Night"
Description: "Vincent van Gogh, 1889. Oil on canvas."
Color: "#FFC107"
Size: 15

Type: Info
Position: (click on second artwork)
Title: "The Persistence of Memory"
Description: "Salvador Dalí, 1931. Oil on canvas."
Color: "#FFC107"
Size: 15

Add Audio Narration (Optional)¶

Add an audio hotspot for tour narration:

Add Navigation Back to Lobby¶

Part 5: Build Gallery B¶

Repeat the process for Gallery B:

1. Upload Gallery B skybox
2. Add artwork info hotspots
3. Add navigation to Lobby and Gallery A

Cross-Navigation¶

Add navigation between galleries:

# In Gallery A - add hotspot:
Type: Navigation
Target: Gallery B
Label: "Gallery B →"

# In Gallery B - add hotspot:
Type: Navigation
Target: Gallery A
Label: "← Gallery A"

Part 6: Connect Navigation¶

Now that all stages exist, update navigation targets:

Update Lobby Hotspots¶

1. Return to Lobby stage
2. Edit "Gallery A" navigation hotspot
3. Set Target Stage to "Gallery A"
4. Edit "Gallery B" navigation hotspot
5. Set Target Stage to "Gallery B"

Verify All Links¶

Check that all navigation works:

Part 7: Test Your Experience¶

Desktop Preview¶

1. Click Preview
2. Test all interactions:
3. Info hotspots open panels
4. Audio plays correctly
5. Navigation moves between stages
6. Camera controls feel smooth

Mobile Preview¶

1. Open preview link on your phone
2. Check:
3. Touch controls work
4. Hotspots are tappable
5. Text is readable
6. Performance is smooth

VR Preview (Optional)¶

If you have a VR headset:

1. Open preview in headset browser
2. Enter immersive mode
3. Test:
4. Controller raycasting works
5. Hotspots highlight on hover
6. Triggers activate hotspots
7. Navigation feels natural

Part 8: Publish¶

Final Checklist¶

Before publishing:

• All stages have descriptive names
• Navigation links are correct
• Hotspot content is complete
• Audio files load properly
• No broken images/links

Publish Your Tour¶

1. Click Publish
2. Choose visibility:
3. Public: Anyone with link
4. Unlisted: Link only, not searchable
5. Private: Password protected
6. Copy your shareable link

Share¶

Your tour is now live! Share it:

• Direct link
• Embed code for websites
• QR code for physical locations

Complete Configuration¶

Here's the final JSON structure of what we built:

{
  "name": "Art Gallery Tour",
  "settings": {
    "navigationStyle": "floor-arrow",
    "showMiniMap": true,
    "autoRotate": false
  },
  "stages": [
    {
      "id": "lobby",
      "name": "Lobby",
      "skybox": { "type": "image", "url": "..." },
      "hotspots": [
        {
          "id": "welcome",
          "type": "info",
          "position": { "x": 0, "y": 50, "z": -400 },
          "infoTitle": "Welcome!",
          "infoDescription": "Welcome to the Virtual Art Gallery...",
          "color": "#4CAF50",
          "size": 20
        },
        {
          "id": "nav-gallery-a",
          "type": "navigation",
          "position": { "x": -300, "y": -50, "z": -400 },
          "targetStageId": "gallery-a",
          "label": "Gallery A",
          "color": "#2196F3"
        },
        {
          "id": "nav-gallery-b",
          "type": "navigation",
          "position": { "x": 300, "y": -50, "z": -400 },
          "targetStageId": "gallery-b",
          "label": "Gallery B",
          "color": "#9C27B0"
        }
      ]
    },
    {
      "id": "gallery-a",
      "name": "Gallery A",
      "skybox": { "type": "image", "url": "..." },
      "hotspots": [
        {
          "id": "artwork-1",
          "type": "info",
          "position": { "x": -350, "y": 30, "z": -300 },
          "infoTitle": "Starry Night",
          "infoDescription": "Vincent van Gogh, 1889...",
          "color": "#FFC107"
        },
        {
          "id": "nav-back",
          "type": "navigation",
          "position": { "x": 0, "y": -50, "z": 400 },
          "targetStageId": "lobby",
          "label": "Back to Lobby"
        }
      ]
    }
  ]
}

What's Next?¶

Congratulations! You've built a complete VR tour. Next steps: