360-panorama-viewer

360° Panorama Viewer Skill

This skill creates a polished, self-contained 360° panorama viewer HTML file.

What it produces

A single .html file (~3–6 MB depending on scene count) that:

• Renders equirectangular panoramas as spherical 360° environments using Three.js
• Supports dragging to look around, scroll to zoom, auto-rotate toggle, fullscreen
• Shows a thumbnail sidebar to switch between multiple scenes
• Works offline — no CDN dependencies, all assets embedded

Skill assets

Asset	Purpose
assets/viewer_template.html	Complete viewer HTML with Three.js inlined; panorama data injected at build time
scripts/build_viewer.py	Loads images, applies seam fix, base64-encodes, injects into template

---

Workflow

Step 1 — Gather scene specs from the user

Ask (or infer from context) for each scene:

• Description of what the panorama should show
• Title for the HUD (emoji + name, e.g. 🍄 Mario World)
• Thumbnail label (≤12 chars shown on the sidebar chip)

Typical count: 3–6 scenes. You can also accept user-provided image files directly (skip generation).

Step 2 — Generate panorama images

For each scene, generate a 360° equirectangular panorama image.

Model choice:

• Preferred: google/gemini-3.1-flash-image-preview via AI Gateway — reliable 2:1 output, no safety rejections for fictional themes
• Alternative: gpt-image-2 via AI Gateway at size 1536x1024 — higher quality but may reject branded IP (Mario, Zelda, etc.)

Generation code (Gemini route):

import os, requests, base64
from PIL import Image
import io

api_key = os.environ['AI_GATEWAY_API_KEY']

def generate_panorama(prompt: str, save_path: str):
    payload = {
        "model": "google/gemini-3.1-flash-image-preview",
        "prompt": prompt,
        "response_format": "b64_json",
        "n": 1
    }
    resp = requests.post(
        'https://ai-gateway.happycapy.ai/api/v1/images/generations',
        headers={
            'Authorization': f'Bearer {api_key}',
            'Content-Type': 'application/json',
            'Origin': 'https://trickle.so'
        },
        json=payload,
        timeout=180
    )
    resp.raise_for_status()
    img_bytes = base64.b64decode(resp.json()['data'][0]['b64_json'])
    img = Image.open(io.BytesIO(img_bytes)).convert('RGB')
    img.save(save_path)
    return save_path