storysplat-viewer 2.7.13 → 2.7.14

package/demo/embedding-guide.html

@@ -1300,7 +1300,7 @@ viewer.<span class="hl-fn">on</span>(<span class="hl-str">'waypointChange'</span
         <tr><td><code>viewer.play()</code></td><td>Auto-play through waypoints</td></tr>
         <tr><td><code>viewer.pause()</code></td><td>Pause auto-play</td></tr>
         <tr><td><code>viewer.nextWaypoint()</code></td><td>Go to the next waypoint</td></tr>
-        <tr><td><code>viewer.previousWaypoint()</code></td><td>Go to the previous waypoint</td></tr>
+        <tr><td><code>viewer.prevWaypoint()</code></td><td>Go to the previous waypoint</td></tr>
         <tr><td><code>viewer.goToWaypoint(n)</code></td><td>Jump to waypoint #n (0-indexed)</td></tr>
         <tr><td><code>viewer.destroy()</code></td><td>Clean up the viewer (call on unmount!)</td></tr>
       </table>
@@ -1382,7 +1382,12 @@ viewer.<span class="hl-fn">on</span>(<span class="hl-str">'waypointChange'</span
       scene.json   &lt;-- Scene configuration
       *.ksplat     &lt;-- 3D model file(s)
       lod/         &lt;-- Streaming data (if applicable)
-      assets/      &lt;-- Images, videos, audio</pre>
+      assets/      &lt;-- Images, videos, audio
+    other-scene/   &lt;-- Additional scenes (if portals are used)
+      scene.json
+      *.ksplat
+      lod/
+      assets/</pre>
       </div>
     </div>
 
@@ -1480,6 +1485,49 @@ viewer.<span class="hl-fn">play</span>();
 viewer.<span class="hl-fn">on</span>(<span class="hl-str">'ready'</span>, () =&gt; console.log(<span class="hl-str">'Loaded from local files!'</span>));</pre>
         </div>
       </div>
+
+      <!-- portal handling sub-section -->
+      <div class="collapsible-header" onclick="toggleCollapsible(this)">
+        <span class="chevron">&#9654;</span>
+        <strong>Handling Portals in Multi-Scene Exports</strong>
+      </div>
+      <div class="collapsible-body">
+        <p>If your scene uses <strong>portals</strong> (links to other scenes), the self-hosted export automatically bundles all linked scenes. Each portal-linked scene gets its own folder:</p>
+        <div class="code-block">
+          <div class="code-header"><span>Multi-scene folder structure</span></div>
+<pre>scenes/
+  main-scene/
+    scene.json
+    *.ksplat
+  linked-scene-a/
+    scene.json
+    *.ksplat
+  linked-scene-b/
+    scene.json
+    *.ksplat</pre>
+        </div>
+        <p>The generated <code>index.html</code> handles portal navigation automatically. If you're building your own integration, listen for the <code>portalActivated</code> event and load the target scene:</p>
+        <div class="code-block">
+          <div class="code-header"><span>Portal handling</span><button class="copy-btn" onclick="copyCode(this)">Copy</button></div>
+<pre><span class="hl-kw">let</span> viewer = <span class="hl-fn">createViewer</span>(container, initialSceneData);
+
+<span class="hl-kw">function</span> <span class="hl-fn">handlePortal</span>(data) {
+  <span class="hl-comment">// data.targetSceneId matches a folder name under scenes/</span>
+  <span class="hl-fn">fetch</span>(<span class="hl-str">`./scenes/${data.targetSceneId}/scene.json`</span>)
+    .then(<span class="hl-kw">function</span>(r) { <span class="hl-kw">return</span> r.json(); })
+    .then(<span class="hl-kw">function</span>(sceneData) {
+      viewer.<span class="hl-fn">destroy</span>();
+      viewer = <span class="hl-fn">createViewer</span>(container, sceneData);
+      viewer.<span class="hl-fn">on</span>(<span class="hl-str">'portalActivated'</span>, handlePortal);
+    });
+}
+
+viewer.<span class="hl-fn">on</span>(<span class="hl-str">'portalActivated'</span>, handlePortal);</pre>
+        </div>
+        <div class="callout">
+          <strong>Tip:</strong> The exported <code>index.html</code> already includes this logic with a <code>SCENE_FOLDERS</code> mapping. You only need custom portal handling if you're building your own page.
+        </div>
+      </div>
     </div>
 
     <div class="pros-cons">