@tomorrowevening/hermes 0.1.1 → 0.1.3

package/README.md

@@ -6,18 +6,21 @@ Open the [Application](https://hermes-lovat.vercel.app/) and [editor](https://he
 
 ## Setup
 
-This example uses [React](https://react.dev/), [ThreeJS](https://threejs.org/), and [TheatreJS](https://theatrejs.com/), and will default to using `BroadcastChannel` instead of `WebSocket` for simplicity.
+This example uses [React](https://react.dev/), [ThreeJS](https://threejs.org/), and [TheatreJS](https://theatrejs.com/).
 
 ### Create an `Application`
 
-An application isn't required, however it's nice to maintain multiple remotes. Alternatively, Remotes can be created independent.
+An application isn't required, however it's nice to maintain multiple remotes. Alternatively, Remotes can be created independently.
 
-The `CustomEditor` is used as a multi-view editor for [ThreeJS](https://threejs.org/), and should be limited to only the Editor app.
+The `ThreeEditor` is used as a multi-view editor for [ThreeJS](https://threejs.org/), and should be limited to only the Editor app.
 
 ```
 const IS_DEV = true;
 const IS_EDITOR = IS_DEV && document.location.hash.search('editor') > -1;
 
+const theatre = new RemoteTheatre(IS_DEV, IS_EDITOR);
+const three = new RemoteThree('Hermes Example', IS_DEV, IS_EDITOR);
+
 export default function AppWrapper() {
   const [app, setApp] = useState<Application | null>(null);
 
@@ -25,13 +28,9 @@ export default function AppWrapper() {
     const instance = new Application();
     instance.detectSettings(IS_DEV, IS_EDITOR).then(() => {
       // TheatreJS
-      instance.addComponent('theatre', new RemoteTheatre(IS_DEV, IS_EDITOR));
+      instance.addComponent('theatre', theatre);
 
       // ThreeJS
-      const scenes: Map<string, any> = new Map();
-      scenes.set('ExampleScene', ExampleScene); // extends Scene class
-      const three = new RemoteThree('Hermes Example', IS_DEV, IS_EDITOR);
-      three.scenes = scenes;
       instance.addComponent('three', three);
 
       // Ready
@@ -39,13 +38,29 @@ export default function AppWrapper() {
     });
   }, []);
 
+  // MultiView requires you identify each scene so they can be instantiated by the editor
+  const scenes: Map<string, any> = new Map();
+  scenes.set('Scene1', Scene1);
+  scenes.set('Scene2', Scene2);
+  scenes.set('RTTScene', RTTScene);
+
   return (
     <>
       {app !== null && (
         <>
-          {IS_DEV && <RemoteSetup app={app} />}
-          {IS_EDITOR && <CustomEditor app={app} />}
-          <Wrapper app={app} />
+          {IS_DEV && (
+            <>
+              {IS_EDITOR && (
+                <ThreeEditor
+                  three={three}
+                  scenes={scenes}
+                  onSceneUpdate={(scene: any) => {
+                    scene.update();
+                  }}
+                />
+              )}
+            </>
+          )}
         </>
       )}
     </>
@@ -53,13 +68,16 @@ export default function AppWrapper() {
 }
 ```
 
+### Scene setup
+
+After all object's have been added to your scene, run `hierarchyUUID(yourScene)` to update the UUIDs of every object. This helps communicate back and forth between the app and your editor.
+
 ### Custom remote commands
 
 This component is added only in debug-mode to add extra support for remote-components.
 
 In this example it's added to add custom Remote Component support for:
 
-- [ThreeJS](https://threejs.org/) - `SceneInspector` communicates with the Multi-view editor
 - [TheatreJS](https://theatrejs.com/) - Communicates with the `studio` instance
 
 ```
@@ -72,8 +90,7 @@ export default function RemoteSetup(props: RemoteProps) {
   // Remote Theatre setup
   props.theatre.studio = studio;
   props.theatre.handleEditorApp();
-
-  return <SceneInspector three={props.three} />;
+  return null;
 }
 ```