From 559a96fc5ff34f7bbb22b60856a7f4a7e4b0c176 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Mon, 11 Mar 2024 22:21:19 -0400 Subject: [PATCH] consolidate code --- .../src/components/common/Scene3D/Scene3D.tsx | 78 +++++-------- .../components/common/Scene3D/Scene3dNext.tsx | 103 ------------------ .../src/components/common/Scene3D/index.tsx | 1 - .../src/components/common/index.tsx | 2 +- .../EngineMediaPanel/EngineMediaPanel.tsx | 4 +- .../StorytellerStudioPage.tsx | 18 +-- .../StudioIntroPage.tsx | 4 +- 7 files changed, 40 insertions(+), 170 deletions(-) delete mode 100644 packages/fakeyou.com/src/components/common/Scene3D/Scene3dNext.tsx delete mode 100644 packages/fakeyou.com/src/components/common/Scene3D/index.tsx diff --git a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx b/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx index d30377ee2e..1cc71914df 100644 --- a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx +++ b/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx @@ -1,53 +1,49 @@ import React, { useCallback, useEffect, useRef } from "react"; //import IframeResizer from "iframe-resizer-react"; import "./Scene3D.scss"; +import { EngineMode } from "./EngineMode"; +import { GetEngineUrl, LoadableAsset } from "./GetEngineUrl"; + +const CHECK_FRAME_URL = "https://engine.fakeyou.com"; // 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; - skybox?: string; - fullScreen?: boolean; - urlParams?: string; - className?: string; - onSceneSavedCallback?: (mediaToken: string) => void; - // NB: The following parameters are mutally exclusive. - // We should use Typescript to enforce this. - objectId?: string; // built-in objects - sceneMediaFileToken?: string; // scn.ron native storyteller engine scenes - mixamoUrl?: string; // a mixamo animation - bvhUrl?: string; // a MocapNet animation in BVH format - sceneImportUrl?: string; // a generic (non-storyteller) scene: GLB, GLTF, etc. +interface Scene3DProps { + // The mode to open the engine in. + mode: EngineMode; + + // A polymorphic asset type. + // See `GetEngineUrl()` for usage. + asset: LoadableAsset, + + // A skybox to use. + skybox?: string; + + // Whether the engine should be full screen + fullScreen?: boolean; + + // CSS classes to apply to the engine + className?: string; + + onSceneSavedCallback?: (mediaToken: string) => void; } export default function Scene3D({ mode, + asset, skybox, fullScreen = false, className, onSceneSavedCallback, - - // NB: The following parameters are mutally exclusive. - // We should use Typescript to enforce this. - objectId, - sceneMediaFileToken, - mixamoUrl, - bvhUrl, - sceneImportUrl, - }: Scene3DProps) { - const engineBaseUrl = "https://engine.fakeyou.com"; const iframeRef = useRef(null); - const onMessage = useCallback((event: MessageEvent) => { console.log("engine message received", event.data, event); - if (event.origin !== engineBaseUrl) + if (event.origin !== CHECK_FRAME_URL) return; if (event.data === "studio-ready") { @@ -85,31 +81,7 @@ export default function Scene3D({ }, [onMessage]); - let engineUrl = `${engineBaseUrl}/?mode=${mode}`; - - if (skybox) { - engineUrl += `&skybox=${skybox}`; - } - - if (sceneMediaFileToken) { - // NB: Storyteller Engine makes the API call to load the scene. - // We don't need to pass the bucket path. - // The engine, does, however, need a `.scn.ron` file extension. - const sceneUrlRef = `remote://${sceneMediaFileToken}.scn.ron`; - engineUrl += `&scene=${sceneUrlRef}`; - } else if (objectId) { - // NB: This is an engine built-in, eg. `couch.gltf` or `sample-room.gltf`. - engineUrl += `&objectId=${objectId}`; - } else if (mixamoUrl) { - // NB: This should be a full bucket path to an asset. - engineUrl += `&mixamo=${mixamoUrl}`; - } else if (bvhUrl) { - // NB: This should be a full bucket path to an asset. - engineUrl += `&bvh=${bvhUrl}`; - } else if (sceneImportUrl) { - // TODO: Not sure what the format of this should be. - engineUrl += `&sceneImport=${sceneImportUrl}`; - } + let engineUrl = GetEngineUrl({mode: mode, asset: asset, skybox: skybox}) return (
void; -} - -export default function Scene3dNext({ - mode, - asset, - skybox, - fullScreen = false, - className, - onSceneSavedCallback, -}: Scene3dNextProps) { - - const iframeRef = useRef(null); - - const onMessage = useCallback((event: MessageEvent) => { - console.log("engine message received", event.data, event); - - if (event.origin !== CHECK_FRAME_URL) - return; - - if (event.data === "studio-ready") { - console.log("studio-ready message (1)"); - - const studio = iframeRef.current?.contentWindow; - if (!studio) return; - - console.log("studio-ready message (2)"); - - // NB: Example of how to call the API in the other direction: - // studio.postMessage("save-scene", engineBaseUrl); - } else if ( - typeof event.data === "string" - && event.data.startsWith("scene-saved:") - ) { - const mediaToken = event.data.match(/scene-saved:(.+)/)?.[1]; - console.log("saved scene media token:", mediaToken); - - if (onSceneSavedCallback !== undefined && mediaToken !== undefined) { - onSceneSavedCallback(mediaToken); - } - - } else if (event.data === "scene-save-failed") { - console.error("Failed to save the scene!"); - } - }, [onSceneSavedCallback]); - - - useEffect(() => { - window.addEventListener("message", onMessage, false); - return () => { - window.removeEventListener("message", onMessage, false); - } - }, [onMessage]); - - - let engineUrl = GetEngineUrl({mode: mode, asset: asset, skybox: skybox}) - - return ( -
- {/* IframeResizer was causing some glitches passing messages. Need to test more. */} - {/**/} -