open scene call to action

packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx

@@ -4,23 +4,30 @@ import "./Scene3D.scss";
 
 // See the following page for Storyteller Engine's query param documentation:
 // https://www.notion.so/storytellerai/Studio-Iframe-Query-Params-a748a9929ec3404780c3884e7fb89bdb
+//
+// You can supply either an `objectId` or a `sceneMediaFileToken` when loading in studio mode.
 interface Scene3DProps {
   mode: string;
   fullScreen?: boolean;
   urlParams?: string;
   objectId?: string;
+  sceneMediaFileToken?: string;
 }
 
 export default function Scene3D({
   mode,
   fullScreen = false,
   objectId,
+  sceneMediaFileToken,
   urlParams,
 }: Scene3DProps) {
 
   let engineUrl = `https://engine.fakeyou.com?mode=${mode}`;
 
-  if (objectId) {
+  if (sceneMediaFileToken) {
+    const sceneUrlRef = `remote://${sceneMediaFileToken}.scn.ron`;
+    engineUrl += `&scene=${sceneUrlRef}`;
+  } else if (objectId) {
     engineUrl += `&objectId=${objectId}`;
   }
 

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -746,7 +746,7 @@ class PageContainer extends React.Component<
                     />
                   </Route>
 
-                  <Route path="/studio">
+                  <Route path="/studio/:mediaToken?">
                     <StorytellerStudioListPage
                       sessionWrapper={this.props.sessionWrapper}
                       sessionSubscriptionsWrapper={

packages/fakeyou.com/src/v2/view/pages/storyteller_studio/StorytellerStudioPage.tsx

@@ -4,6 +4,7 @@ import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session
 import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable";
 import { Scene3D } from "components/common";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+import { useParams } from "react-router-dom";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -11,15 +12,32 @@ interface Props {
 }
 
 function StorytellerStudioListPage(props: Props) {
+  const { mediaToken } = useParams<{ mediaToken: string }>();
+
   usePrefixedDocumentTitle("Storyteller Studio");
 
   if (!props.sessionWrapper.canAccessStudio()) {
     return <StudioNotAvailable />;
   }
 
+  let engineParams = {};
+
+  if (mediaToken) {
+    engineParams = {
+      sceneMediaFileToken: mediaToken
+    };
+  } else {
+    engineParams = {
+      objectId: "sample-room.gltf"
+    };
+  }
+
   return (
     <>
-      <Scene3D fullScreen={true} mode="studio" objectId="sample-room.gltf" />
+      <Scene3D 
+        fullScreen={true} 
+        mode="studio" 
+        {...engineParams} />
     </>
   );
 }