@tomorrowevening/hermes 0.0.37 → 0.0.39

package/src/example/components/App.css

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

package/src/example/components/App.tsx

@@ -1,246 +0,0 @@
-// 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

@@ -1,52 +0,0 @@
-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

@@ -1,45 +0,0 @@
-: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

@@ -1,37 +0,0 @@
-// 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

@@ -1,42 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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);
-  }
-}