Hermes

An extendable set of Web Tools controlled over a separate window for non-intereference with content (like a remote controller!)

Open the Application and editor side-by-side.

Setup

This example uses React, ThreeJS, and TheatreJS.

Create an Application

Instantiate your Application (or a custom subclass) outside the component tree, then wrap your app with HermesApp. It handles detectSettings, the loading gate, Theatre Studio initialisation, and automatically switches between editor and app rendering based on IS_EDITOR.

import studio from '@tomorrowevening/theatre-studio';
import HermesApp from '@tomorrowevening/hermes/editor/HermesApp';
import ExampleApplication from './three/ExampleApplication';
import { loadAssets } from './three/loader';
import Scene1 from './three/scenes/Scene1';
import Scene2 from './three/scenes/Scene2';
import MyCanvas from './components/MyCanvas';
import { IS_DEV, IS_EDITOR } from './constants';

// Register scene classes so MultiView can instantiate them in the editor
const scenes = new Map<string, any>([
  ['Scene1', Scene1],
  ['Scene2', Scene2],
  ['RTTScene', RTTScene],
]);

// Create once outside the component — avoids re-instantiation on re-render
const app = new ExampleApplication('My Project', IS_DEV, IS_EDITOR);
if (IS_DEV && IS_EDITOR && studio) {
  studio.initialize();
  app.theatre.studio = studio;
  app.theatre.handleEditorApp();
}

export default function AppWrapper() {
  return (
    <HermesApp
      app={app}
      scenes={scenes}
      onSceneAdd={(scene) => {
        scene.setup(app);
        scene.init();
      }}
      onSceneUpdate={(scene) => scene.update()}
      onLoad={loadAssets}
    >
      {(app) => <MyCanvas app={app} />}
    </HermesApp>
  );
}

HermesApp props

| Prop | Type | Description | | --- | --- | --- | | app | Application | Application instance with RemoteTheatre + RemoteThree added as components | | scenes | Map<string, any> | Scene name → scene class map, used by the editor's MultiView | | onSceneAdd | (scene) => void | Called when MultiView instantiates a scene (setup + init) | | onSceneUpdate | (scene) => void | Called every frame for the active scene in the editor | | onSceneResize | (scene, w, h) => void | Called when MultiView resizes a scene | | onLoad | (app) => Promise<void> | Asset loading function — HermesApp waits for this before rendering children | | renderLoading | ReactNode | Shown while detectSettings or onLoad is pending | | children | (app) => ReactNode | App content rendered after loading completes (not shown in editor mode) |

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.

Theatre Studio integration

Theatre Studio is initialised before HermesApp is mounted. Wire it up on the app instance so HermesApp can hand it off to the editor automatically:

import studio from '@tomorrowevening/theatre-studio';

const app = new ExampleApplication('My Project', IS_DEV, IS_EDITOR);
if (IS_DEV && IS_EDITOR && studio) {
  studio.initialize();
  app.theatre.studio = studio;
  app.theatre.handleEditorApp();
}

Editor

Tools for:

• Customizable Navigation Dropdowns + Draggable components for Triggers/Event Dispatching
• TheatreJS
• ThreeJS
• Custom ThreeJS Scene + Object Inspector

ThreeJS Editor

| Action | Keys | | ------ | ------ | | Zoom to Selected Item | CTRL + 0 | | Rotate to Front of Selected Item | CTRL + 1 | | Rotate to Top of Selected Item | CTRL + 2 | | Rotate to Right of Selected Item | CTRL + 3 | | Rotate to Back of Selected Item | CTRL + 4 | | Set Transform Controls to Rotate | r | | Set Transform Controls to Scale | s | | Set Transform Controls to Translate | t | | Toggles Transform Controls between world and local | q |

Side Panel

Holding down the CTRL key while dragging a number's label will multiply the delta by 10

Assets

Animation / Models found at Mixamo