An extendable set of Web Tools controlled via a separate window for non-intereference with content.
npm install @tomorrowevening/hermesThreeEditor is used as a multi-view editor for ThreeJS, 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(null);
useEffect(() => {
const instance = new Application();
instance.detectSettings(IS_DEV, IS_EDITOR).then(() => {
// TheatreJS
instance.addComponent('theatre', theatre);
// ThreeJS
instance.addComponent('three', three);
// Ready
setApp(instance);
});
}, []);
// MultiView requires you identify each scene so they can be instantiated by the editor
const scenes: Map = new Map();
scenes.set('Scene1', Scene1);
scenes.set('Scene2', Scene2);
scenes.set('RTTScene', RTTScene);
return (
<>
{app !== null && (
<>
{IS_DEV && (
<>
{IS_EDITOR && (
three={three}
scenes={scenes}
onSceneUpdate={(scene: any) => {
scene.update();
}}
/>
)}
>
)}
>
)}
>
);
}
`
$3
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.
$3
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:
- TheatreJS - Communicates with the studio instance
`
type RemoteProps = {
three: RemoteThree
theatre: RemoteTheatre
}
export default function RemoteSetup(props: RemoteProps) {
// Remote Theatre setup
props.theatre.studio = studio;
props.theatre.handleEditorApp();
return null;
}
``