@tomorrowevening/hermes 0.0.35 → 0.0.37

package/src/example/components/App.css

@@ -0,0 +1,6 @@
+#box {
+  background: #FF0000;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}

package/src/example/components/App.tsx

@@ -0,0 +1,246 @@
+// Libs
+import React, { useEffect, useRef, useState } from 'react';
+import { types } from '@theatre/core';
+import { WebGLRenderer } from 'three';
+import Stats from 'stats-gl';
+// Models
+import { app, Events, IS_DEV, threeDispatcher } from '../constants';
+// Components
+import './App.css';
+import BaseScene from '../three/BaseScene';
+import Scene1 from '../three/Scene1';
+import Scene2 from '../three/Scene2';
+import { debugDispatcher, ToolEvents } from '../../editor/global';
+import { loadAssets } from '../three/loader';
+import { dispose } from '../../editor/utils';
+import SceneInspector from '../../editor/sidePanel/inspector/SceneInspector';
+import RemoteTheatre from '../../core/remote/RemoteTheatre';
+
+let renderer: WebGLRenderer;
+let currentScene: BaseScene;
+let sceneName = '';
+
+const useTweakpane = false;
+
+function App() {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [loaded, setLoaded] = useState(false);
+
+  // Theatre
+  useEffect(() => {
+    if (!loaded) return;
+    if (app.theatre === undefined) return;
+
+    const container = elementRef.current!;
+    container.style.visibility = app.editor ? 'hidden' : 'inherit';
+
+    // Theatre Example
+    app.theatre.sheet('App');
+    const sheetObj = app.theatre?.sheetObject(
+      'App',
+      'Box',
+      {
+        x: types.number(100, {range: [0, window.innerWidth]}),
+        y: types.number(100, {range: [0, window.innerHeight]}),
+      },
+      (values: any) => {
+        container.style.left = `${values.x}px`;
+        container.style.top = `${values.y}px`;
+      },
+    );
+    return () => {
+      if (sheetObj !== undefined) app.theatre?.unsubscribe(sheetObj);
+      app.dispose();
+    };
+  }, [loaded]);
+
+  // Renderer setup
+  if (!app.editor) {
+    useEffect(() => {
+      renderer = new WebGLRenderer({
+        canvas: canvasRef.current!,
+        stencil: false
+      });
+      renderer.autoClear = false;
+      renderer.shadowMap.enabled = true;
+      renderer.setPixelRatio(devicePixelRatio);
+      renderer.setClearColor(0x000000);
+      return () => {
+        renderer.dispose();
+      };
+    }, []);
+  }
+
+  // ThreeJS
+  useEffect(() => {
+    if (!loaded) return;
+    
+    let stats: Stats;
+    if (!app.editor) {
+      stats = new Stats();
+      stats.init(renderer);
+      document.body.appendChild(stats.dom);
+    }
+
+    // Start RAF
+    let raf = -1;
+
+    const onResize = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      currentScene?.resize(width, height);
+      renderer.setSize(width, height);
+    };
+
+    const updateApp = () => {
+      RemoteTheatre.getRafDriver().tick(performance.now());
+      currentScene?.update();
+      stats.begin();
+      renderer.clear();
+      currentScene?.draw();
+      stats.end();
+      stats.update();
+      raf = requestAnimationFrame(updateApp);
+    };
+
+    if (!app.editor) {
+      window.addEventListener('resize', onResize);
+      onResize();
+      updateApp();
+    }
+
+    return () => {
+      if (currentScene !== undefined) {
+        app.three.removeCamera(currentScene.camera);
+        dispose(currentScene);
+      }
+      window.removeEventListener('resize', onResize);
+      cancelAnimationFrame(raf);
+      raf = -1;
+    };
+  }, [loaded]);
+
+  // Preload
+  useEffect(() => {
+    const onLoad = () => {
+      threeDispatcher.removeEventListener(Events.LOAD_COMPLETE, onLoad);
+      setLoaded(true);
+    };
+    threeDispatcher.addEventListener(Events.LOAD_COMPLETE, onLoad);
+    loadAssets();
+  }, [setLoaded]);
+
+  const createScene = () => {
+    if (currentScene !== undefined) {
+      if (currentScene.camera !== undefined) app.three.removeCamera(currentScene.camera);
+      dispose(currentScene);
+    }
+    if (sceneName === 'scene1') {
+      currentScene = new Scene1(renderer);
+    } else {
+      currentScene = new Scene2(renderer);
+    }
+    currentScene.resize(window.innerWidth, window.innerHeight);
+    app.three.setScene(currentScene);
+    app.three.addCamera(currentScene.camera);
+  };
+
+  const createScene1 = () => {
+    if (sceneName === 'scene1') return;
+    sceneName = 'scene1';
+    createScene();
+  };
+
+  const createScene2 = () => {
+    if (sceneName === 'scene2') return;
+    sceneName = 'scene2';
+    createScene();
+  };
+
+  // Debug Components
+  if (IS_DEV) {
+    useEffect(() => {
+      const container = elementRef.current!;
+      container.style.visibility = app.editor ? 'hidden' : 'inherit';
+
+      // Tweakpane Example
+      if (useTweakpane) {
+        const testFolder = app.debug.addFolder('Test Folder');
+
+        app.debug.button('Test Button', () => {
+          console.log('Test button works!');
+        }, testFolder);
+
+        const test = { opacity: 1, rotation: 0 };
+        app.debug.bind(test, 'opacity', {
+          min: 0,
+          max: 1,
+          onChange: (value: number) => {
+            container.style.opacity = value.toFixed(2);
+          }
+        }, testFolder);
+
+        app.debug.bind(test, 'rotation', {
+          min: 0,
+          max: 360,
+          onChange: (value: number) => {
+            container.style.transform = `rotate(${value}deg)`;
+          }
+        }, testFolder);
+      }
+
+      // Components Example
+      const onCustom = (evt: any) => {
+        console.log('Custom:', evt.value);
+      };
+      const selectDropdown = (evt: any) => {
+        const scene = evt.value.value;
+        if (scene === 'scene1') {
+          createScene1();
+        } else if (scene === 'scene2') {
+          createScene2();
+        }
+      };
+      debugDispatcher.addEventListener(ToolEvents.CUSTOM, onCustom);
+      debugDispatcher.addEventListener(ToolEvents.SELECT_DROPDOWN, selectDropdown);
+      return () => {
+        debugDispatcher.removeEventListener(ToolEvents.CUSTOM, onCustom);
+        debugDispatcher.removeEventListener(ToolEvents.SELECT_DROPDOWN, selectDropdown);
+      };
+    }, []);
+  }
+
+  return (
+    <>
+      {!loaded && <p className='loading'>Loading...</p>}
+      {app.isApp && <canvas ref={canvasRef} />}
+
+      <div id='box' ref={elementRef}>
+        <button onClick={() => {
+          // app.send({
+          //   target: 'editor',
+          //   event: 'custom',
+          //   data: 'hello editor!'
+          // });
+          app.theatre.playSheet('Scene1');
+        }}>Click</button>
+      </div>
+
+      <div style={{
+        position: 'absolute',
+        bottom: '20px',
+        left: '20px',
+      }}>
+        <button onClick={createScene1}>Scene 1</button>
+        <button onClick={createScene2}>Scene 2</button>
+      </div>
+
+      {IS_DEV && (
+        <SceneInspector three={app.three} />
+      )}
+    </>
+  );
+}
+
+export default App;

package/src/example/constants.ts

@@ -0,0 +1,52 @@
+import { EventDispatcher } from 'three';
+import Application from '../core/Application';
+import RemoteComponents from '../core/remote/RemoteComponents';
+import RemoteTheatre from '../core/remote/RemoteTheatre';
+import RemoteThree from '../core/remote/RemoteThree';
+import RemoteTweakpane from '../core/remote/RemoteTweakpane';
+import { json } from './three/loader';
+
+export const IS_DEV = true;
+
+class CustomApp extends Application {
+  constructor() {
+    super('ws://localhost:8080', IS_DEV);
+
+    this.addComponent('theatre', new RemoteTheatre(this));
+    this.addComponent('three', new RemoteThree(this));
+
+    if (IS_DEV) {
+      this.addComponent('components', new RemoteComponents(this));
+      this.addComponent('debug', new RemoteTweakpane(this));
+    }
+  }
+
+  onLoad(): Promise<void> {
+    const state = json.get('animation');
+    return this.theatre.init('RemoteApp', { state });
+  }
+
+  // Components
+
+  get debug(): RemoteTweakpane {
+    return this.components.get('debug') as RemoteTweakpane;
+  }
+
+  get debugComponents(): RemoteComponents {
+    return this.components.get('components') as RemoteComponents;
+  }
+
+  get theatre(): RemoteTheatre {
+    return this.components.get('theatre') as RemoteTheatre;
+  }
+
+  get three(): RemoteThree {
+    return this.components.get('three') as RemoteThree;
+  }
+}
+
+export const app = new CustomApp();
+export const threeDispatcher = new EventDispatcher();
+export const Events = {
+  LOAD_COMPLETE: 'Events::loadComplete'
+};

package/src/example/index.scss

@@ -0,0 +1,45 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+html, body {
+  min-width: 100%;
+  min-height: 100%;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+button {
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(calc(-50% - 150px), -50%);
+}

package/src/example/main.tsx

@@ -0,0 +1,37 @@
+// Libs
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import studio from '@theatre/studio';
+// Models
+import { app, IS_DEV } from './constants';
+// Components
+import './index.scss';
+import App from './components/App';
+import CustomEditor from './CustomEditor';
+// Tools
+import RemoteController from '../core/RemoteController';
+import RemoteTheatre from '../core/remote/RemoteTheatre';
+
+// Debug tools
+if (IS_DEV) {
+  studio.initialize({ __experimental_rafDriver: RemoteTheatre.getRafDriver() });
+  if (app.isApp) studio.ui.hide();
+  RemoteController(app);
+}
+
+// React
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <>
+    {IS_DEV ? (
+      <>
+        <App />
+        {app.editor ? <CustomEditor /> : null}
+      </>
+    ) : (
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    )}
+  </>,
+);

package/src/example/three/BaseScene.ts

@@ -0,0 +1,42 @@
+import { Clock, Object3D, PerspectiveCamera, Scene, WebGLRenderer } from 'three';
+import { app } from '../constants';
+
+export default class BaseScene extends Scene {
+  camera: PerspectiveCamera;
+  renderer: WebGLRenderer;
+  clock: Clock;
+
+  constructor(renderer: WebGLRenderer) {
+    super();
+    this.renderer = renderer;
+    this.clock = new Clock();
+    this.clock.start();
+
+    const cameras = new Object3D();
+    cameras.name = 'cameras';
+    this.add(cameras);
+
+    this.camera = new PerspectiveCamera(90, 1, 10, 1000);
+    this.camera.name = 'Main';
+    this.camera.position.set(0, 100, 125);
+    this.camera.lookAt(0, 50, 0);
+    cameras.add(this.camera);
+  }
+
+  dispose() {
+    app.theatre.clearSheetObjects(this.name);
+  }
+
+  resize(width: number, height: number) {
+    this.camera.aspect = width / height;
+    this.camera.updateProjectionMatrix();
+  }
+
+  update() {
+    //
+  }
+
+  draw() {
+    this.renderer.render(this, this.camera);
+  }
+}

package/src/example/three/CustomMaterial.ts

@@ -0,0 +1,72 @@
+import { Color, Matrix3, Matrix4, ShaderMaterial, Texture, Vector3 } from 'three';
+import { textureFromSrc } from '../../editor/sidePanel/utils';
+
+const vertex = `varying vec2 vUv;
+
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}`;
+
+const fragment = `uniform float time;
+uniform float opacity;
+uniform vec3 diffuse;
+uniform vec3 mouse;
+uniform sampler2D map;
+varying vec2 vUv;
+
+#define MIN_ALPHA 2.0 / 255.0
+
+void main() {
+  if (opacity < MIN_ALPHA) discard;
+  vec2 imageUV = vUv * 10.0 + (mouse.xy * mouse.z);
+  vec3 image = texture2D(map, imageUV).rgb;
+  vec3 col = image * diffuse;
+  col += (sin(time * 0.1) * 0.5 + 0.5) * 0.2;
+  gl_FragColor = vec4(col, opacity);
+}`;
+
+const smile = `data:image/png;base64,R0lGODlhCAAIAIAAAP///wAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OTc3NywgMjAyMy8wNi8yNS0yMzo1NzoxNCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjIgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjVENjQyODM4QTYzMTFFRUJFQTBFOTJFNjA1OTQ5N0YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjVENjQyODQ4QTYzMTFFRUJFQTBFOTJFNjA1OTQ5N0YiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NUQ2NDI4MThBNjMxMUVFQkVBMEU5MkU2MDU5NDk3RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2NUQ2NDI4MjhBNjMxMUVFQkVBMEU5MkU2MDU5NDk3RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAAIAAgAAAIOjH8AprzRkHyspqSoNAUAOw==`;
+
+export default class CustomMaterial extends ShaderMaterial {
+  constructor() {
+    super({
+      vertexShader: vertex,
+      fragmentShader: fragment,
+      name: 'ExampleScene/SimpleShader',
+      transparent: true,
+      uniforms: {
+        diffuse: {
+          value: new Color(0xffffff)
+        },
+        opacity: {
+          value: 1,
+        },
+        time: {
+          value: 0,
+        },
+        map: {
+          value: null,
+        },
+        mouse: {
+          value: new Vector3()
+        },
+        testM3: {
+          value: new Matrix3()
+        },
+        testM4: {
+          value: new Matrix4()
+        },
+      },
+    });
+
+    textureFromSrc(smile).then((texture: Texture) => {
+      this.uniforms.map.value = texture;
+    });
+  }
+
+  update(delta: number) {
+    this.uniforms.opacity.value = this.opacity;
+    this.uniforms.time.value += delta;
+  }
+}

package/src/example/three/FBXAnimation.ts

@@ -0,0 +1,26 @@
+import { AnimationMixer, Object3D } from 'three';
+import { clone } from 'three/examples/jsm/utils/SkeletonUtils';
+import { models } from './loader';
+
+export default class FBXAnimation extends Object3D {
+  private mixer: AnimationMixer;
+
+  constructor(name: string) {
+    super();
+    this.name = name;
+    this.scale.setScalar(0.5);
+
+    const model = models.get(name)!;
+    const modelInstance = clone(model);
+    this.add(modelInstance);
+
+    this.mixer = new AnimationMixer(modelInstance);
+    modelInstance['mixer'] = this.mixer;
+    const action = this.mixer.clipAction(modelInstance.animations[0]);
+    action.play();
+  }
+
+  update(delta: number) {
+    this.mixer.update(delta);
+  }
+}