@tomorrowevening/hermes 0.0.5 → 0.0.7

package/src/example/components/App.tsx

@@ -1,164 +0,0 @@
-// Libs
-import { useEffect, useRef, useState } from 'react'
-import { types } from '@theatre/core'
-import { WebGLRenderer } from 'three';
-// Models
-import { app, IS_DEV } from '../constants'
-// Components
-import './App.css'
-import ExampleScene from '../three/ExampleScene';
-import SceneInspector from '@/editor/sceneHierarchy/inspector/SceneInspector';
-import { debugDispatcher, ToolEvents } from '../../editor/global';
-import MultiView from '@/editor/sceneHierarchy/inspector/MultiView/MultiView';
-
-let renderer: WebGLRenderer;
-let exampleScene: ExampleScene;
-
-const useTweakpane = false;
-const threeCameras: any[] = [];
-
-function App() {
-  const elementRef = useRef<HTMLDivElement>(null!)
-  const [showSceneInspector, setShowSceneInspector] = useState(false);
-  app.theatre?.sheet('App')
-
-  // Theatre
-  useEffect(() => {
-    const container = elementRef.current!
-    container.style.visibility = app.editor ? 'hidden' : 'inherit'
-
-    // Theatre Example
-    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()
-    }
-  }, [])
-
-  // ThreeJS
-  useEffect(() => {
-    renderer = new WebGLRenderer({ antialias: true });
-    renderer.autoClear = false;
-    renderer.shadowMap.enabled = true;
-    renderer.setPixelRatio(devicePixelRatio);
-    renderer.setClearColor(0x000000, 1);
-    elementRef.current.parentElement!.appendChild(renderer.domElement);
-
-    exampleScene = new ExampleScene();
-    threeCameras.push(exampleScene.camera);
-
-    // Start RAF
-    let raf = -1;
-
-    const onResize = () => {
-      let width = window.innerWidth;
-      const height = window.innerHeight;
-      if (app.editor) width -= 300;
-      renderer.setSize(width, height);
-      exampleScene.resize(width, height);
-    };
-
-    const onUpdate = () => {
-      renderer.clear();
-      exampleScene.update();
-      renderer.render(exampleScene, exampleScene.camera);
-      raf = requestAnimationFrame(onUpdate);
-    };
-
-    app.three.setScene(exampleScene);
-    onResize();
-    window.addEventListener('resize', onResize);
-    if (!app.editor) onUpdate();
-    setShowSceneInspector(true);
-
-    return () => {
-      window.removeEventListener('resize', onResize);
-      renderer.dispose();
-      cancelAnimationFrame(raf);
-      raf = -1;
-    }
-  }, [])
-
-  // 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) => {
-        console.log(`Dropdown: ${evt.value.dropdown}, value: ${evt.value.value}`)
-      }
-      debugDispatcher.addEventListener(ToolEvents.CUSTOM, onCustom)
-      debugDispatcher.addEventListener(ToolEvents.SELECT_DROPDOWN, selectDropdown)
-      return () => {
-        debugDispatcher.removeEventListener(ToolEvents.CUSTOM, onCustom)
-        debugDispatcher.removeEventListener(ToolEvents.SELECT_DROPDOWN, selectDropdown)
-      }
-    }, [])
-  }
-
-  return (
-    <>
-      <div id='box' ref={elementRef}>
-        <button onClick={() => {
-          app.send({
-            target: 'editor',
-            event: 'custom',
-            data: 'hello editor!'
-          });
-        }}>Click</button>
-      </div>
-
-      {IS_DEV && showSceneInspector && (
-        <SceneInspector scene={exampleScene} three={app.three} />
-      )}
-
-      {IS_DEV && showSceneInspector && app.editor && (
-        <MultiView scene={exampleScene} renderer={renderer} cameras={threeCameras} />
-      )}
-    </>
-  )
-}
-
-export default App

package/src/example/constants.ts

@@ -1,44 +0,0 @@
-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'
-
-export const IS_DEV = true
-// export const IS_DEV = import.meta.env.DEV
-// export const app = new Application('Hermes', IS_DEV, 'editor')
-
-class CustomApp extends Application {
-  constructor(name: string, debugEnabled: boolean, editorHashtag: string) {
-    super(name, debugEnabled, editorHashtag)
-
-    // Add components
-    this.addComponent('theatre', new RemoteTheatre(this, 'RemoteApp', {}))
-
-    if (IS_DEV) {
-      this.addComponent('components', new RemoteComponents(this))
-      // this.addComponent('debug', new RemoteTweakpane(this))
-      this.addComponent('three', new RemoteThree(this))
-    }
-  }
-
-  // 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('Hermes', IS_DEV, 'editor')

package/src/example/index.scss

@@ -1,37 +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;
-}
-
-button {
-  &:focus {
-    outline: none;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-}

package/src/example/main.tsx

@@ -1,35 +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'
-
-// Debug tools
-if (IS_DEV) {
-  studio.initialize()
-  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/CustomMaterial.ts

@@ -1,58 +0,0 @@
-import { textureFromSrc } from "@/editor/sceneHierarchy/utils";
-import { ShaderMaterial, Texture } from "three";
-
-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 sampler2D map;
-varying vec2 vUv;
-
-#define MIN_ALPHA 2.0 / 255.0
-
-void main() {
-  if (opacity < MIN_ALPHA) discard;
-  vec3 gradient = 0.5 + 0.5 * cos(time + vUv.xyx + vec3(0.0, 2.0, 4.0));
-  vec3 image = texture2D(map, vUv * 10.0).rgb;
-  // vec3 col = mix(image, gradient, 0.15);
-  vec3 col = image + gradient;
-  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: {
-        opacity: {
-          value: 1,
-        },
-        time: {
-          value: 0,
-        },
-        map: {
-          value: null,
-        }
-      },
-    });
-
-    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/ExampleScene.ts

@@ -1,176 +0,0 @@
-import { BackSide, CircleGeometry, CubeTexture, CubeTextureLoader, DirectionalLight, HemisphereLight, Mesh, MeshBasicMaterial, MeshMatcapMaterial, MeshNormalMaterial, MeshPhongMaterial, MeshPhysicalMaterial, Object3D, PerspectiveCamera, PlaneGeometry, RepeatWrapping, Scene, SphereGeometry, Texture, TextureLoader } from 'three';
-import CustomMaterial from './CustomMaterial';
-import { hierarchyUUID } from '@/editor/utils';
-import { IS_DEV, app } from '../constants';
-import FBXAnimation from './FBXAnimation';
-
-export default class ExampleScene extends Scene {
-  camera!: PerspectiveCamera;
-  envMap: CubeTexture;
-  dance0!: FBXAnimation;
-  dance1!: FBXAnimation;
-  dance2!: FBXAnimation;
-
-  private customMat!: CustomMaterial;
-  private lastUpdate = -1;
-
-  constructor() {
-    super();
-    this.name = 'TestScene';
-    this.envMap = new CubeTextureLoader()
-      .setPath('images/milkyWay/')
-      .load([
-        'dark-s_px.jpg',
-        'dark-s_nx.jpg',
-        'dark-s_py.jpg',
-        'dark-s_ny.jpg',
-        'dark-s_pz.jpg',
-        'dark-s_nz.jpg'
-      ], (value: CubeTexture) => {
-        this.background = value;
-
-        if (app.editor) {
-          const bg = new Mesh(new SphereGeometry(), new MeshBasicMaterial({ envMap: value, side: BackSide }));
-          bg.name = 'bg';
-          bg.scale.setScalar(1000);
-          this.add(bg);
-        }
-      });
-
-    this.createCameras();
-    this.createLights();
-    this.createWorld();
-
-    this.lastUpdate = Date.now();
-    if (IS_DEV) hierarchyUUID(this);
-  }
-
-  private createCameras() {
-    const cameras = new Object3D();
-    cameras.name = 'cameras';
-    this.add(cameras);
-
-    this.camera = new PerspectiveCamera(60, 1, 1, 2000);
-    this.camera.name = 'Main';
-    this.camera.position.set(0, 200, 300);
-    this.camera.lookAt(0, 0, 0);
-    cameras.add(this.camera);
-  }
-
-  private createLights() {
-    const lights = new Object3D();
-    lights.name = 'lights';
-    this.add(lights);
-
-    const sun = new DirectionalLight();
-    sun.name = 'sun';
-    sun.castShadow = true;
-    sun.position.set(0, 50, 50);
-    const shadow = 256;
-    sun.shadow.camera.top = shadow;
-    sun.shadow.camera.bottom = -shadow;
-    sun.shadow.camera.left = - shadow;
-    sun.shadow.camera.right = shadow;
-    sun.shadow.mapSize.width = 1024;
-    sun.shadow.mapSize.height = 1024;
-    sun.shadow.camera.near = 10;
-    sun.shadow.camera.far = 1000;
-    sun.shadow.bias = 0.0001;
-    lights.add(sun);
-
-    const hemi = new HemisphereLight(0x6fb4e2, 0xc46d27, 0.5);
-    hemi.name = 'hemi';
-    lights.add(hemi);
-  }
-
-  private createWorld() {
-    const world = new Object3D();
-    world.name = 'world';
-    this.add(world);
-
-    const floorMaterial = new MeshPhongMaterial();
-    const floor = new Mesh(new CircleGeometry(500, 36), floorMaterial);
-    floor.name = 'floor';
-    floor.receiveShadow = true;
-    floor.rotateX(-Math.PI / 2);
-    world.add(floor);
-    new TextureLoader().load('images/uv_grid_opengl.jpg', (texture: Texture) => {
-      texture.wrapS = RepeatWrapping;
-      texture.wrapT = RepeatWrapping;
-      texture.repeat.setScalar(10);
-      texture.needsUpdate = true;
-      floorMaterial.map = texture;
-      floorMaterial.needsUpdate = true;
-    });
-
-    this.dance0 = new FBXAnimation('Thriller2.fbx');
-    this.dance0.position.set(-150, 0, -175);
-    world.add(this.dance0);
-
-    this.dance1 = new FBXAnimation('Flair.fbx');
-    this.dance1.position.set(0, 0, 0);
-    world.add(this.dance1);
-
-    this.dance2 = new FBXAnimation('Thriller4.fbx');
-    this.dance2.position.set(150, 0, -185);
-    world.add(this.dance2);
-
-    this.createTestMaterials(world);
-  }
-
-  private createTestMaterials(world: Object3D) {
-    const geom = new SphereGeometry(20);
-
-    const items: Mesh[] = [];
-    const mesh = new Mesh(geom, new MeshBasicMaterial({ name: 'BasicMaterial', transparent: true }));
-    mesh.name = 'Basic';
-    world.add(mesh);
-    items.push(mesh);
-
-    const mesh2 = new Mesh(geom, new MeshMatcapMaterial({ transparent: true }));
-    mesh2.name = 'Matcap';
-    world.add(mesh2);
-    items.push(mesh2);
-
-    const mesh5 = new Mesh(geom, new MeshPhongMaterial({ name: 'PhongMaterial', transparent: true }));
-    mesh5.name = 'Phong';
-    world.add(mesh5);
-    items.push(mesh5);
-
-    const mesh3 = new Mesh(geom, new MeshPhysicalMaterial({ name: 'PhysicalMaterial', transparent: true }));
-    mesh3.name = 'Physical';
-    world.add(mesh3);
-    items.push(mesh3);
-
-    // CustomMaterial
-    this.customMat = new CustomMaterial();
-    const mesh4 = new Mesh(geom, this.customMat);
-    mesh4.name = 'Shader';
-    world.add(mesh4);
-    items.push(mesh4);
-
-    const spacing = 50;
-    const total = items.length;
-    const offset = ((total - 1) / 2) * spacing;
-    for (let i = 0; i < total; i++) {
-      const x = i * spacing - offset;
-      items[i].position.set(x, 100, -150);
-      items[i].castShadow = true;
-    }
-  }
-
-  resize(width: number, height: number) {
-    this.camera.aspect = width / height;
-    this.camera.updateProjectionMatrix();
-  }
-
-  update() {
-    const now = Date.now();
-    const delta = (now - this.lastUpdate) / 1000;
-    this.lastUpdate = now;
-    this.customMat.update(delta);
-    this.dance0.update(delta);
-    this.dance1.update(delta);
-    this.dance2.update(delta);
-  }
-}

package/src/example/three/FBXAnimation.ts

@@ -1,39 +0,0 @@
-import { AnimationMixer, Group, Object3D } from "three";
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
-
-export default class FBXAnimation extends Object3D {
-  mixer?: AnimationMixer;
-
-  constructor(source: string) {
-    super();
-    this.name = source.replaceAll(' ', '').split('.')[0];
-    this.scale.setScalar(0.5);
-
-    new FBXLoader()
-      .setPath('./models/')
-      .loadAsync(source)
-      .then((model: Group) => {
-        this.add(model);
-
-        // Shadows
-        model.traverse((obj: Object3D) => {
-          if (obj['isMesh']) {
-            obj.castShadow = true;
-            obj.receiveShadow = true;
-          }
-        });
-
-        this.mixer = new AnimationMixer(model);
-        const action = this.mixer.clipAction(model.animations[0]);
-        action.play();
-      })
-      .catch((reason: any) => {
-        console.log(`Couldn't load:`, source);
-        console.log(reason);
-      })
-  }
-
-  update(delta: number) {
-    this.mixer?.update(delta);
-  }
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/types/example/CustomEditor.d.ts

@@ -1 +0,0 @@
-export default function CustomEditor(): import("react/jsx-runtime").JSX.Element;

package/types/example/components/App.d.ts

@@ -1,3 +0,0 @@
-import './App.css';
-declare function App(): import("react/jsx-runtime").JSX.Element;
-export default App;

package/types/example/constants.d.ts

@@ -1,15 +0,0 @@
-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';
-export declare const IS_DEV = true;
-declare class CustomApp extends Application {
-    constructor(name: string, debugEnabled: boolean, editorHashtag: string);
-    get debug(): RemoteTweakpane;
-    get debugComponents(): RemoteComponents;
-    get theatre(): RemoteTheatre;
-    get three(): RemoteThree;
-}
-export declare const app: CustomApp;
-export {};

package/types/example/main.d.ts

@@ -1 +0,0 @@
-import './index.scss';

package/types/example/three/CustomMaterial.d.ts

@@ -1,5 +0,0 @@
-import { ShaderMaterial } from "three";
-export default class CustomMaterial extends ShaderMaterial {
-    constructor();
-    update(delta: number): void;
-}

package/types/example/three/ExampleScene.d.ts

@@ -1,18 +0,0 @@
-import { CubeTexture, PerspectiveCamera, Scene } from 'three';
-import FBXAnimation from './FBXAnimation';
-export default class ExampleScene extends Scene {
-    camera: PerspectiveCamera;
-    envMap: CubeTexture;
-    dance0: FBXAnimation;
-    dance1: FBXAnimation;
-    dance2: FBXAnimation;
-    private customMat;
-    private lastUpdate;
-    constructor();
-    private createCameras;
-    private createLights;
-    private createWorld;
-    private createTestMaterials;
-    resize(width: number, height: number): void;
-    update(): void;
-}

package/types/example/three/FBXAnimation.d.ts

@@ -1,6 +0,0 @@
-import { AnimationMixer, Object3D } from "three";
-export default class FBXAnimation extends Object3D {
-    mixer?: AnimationMixer;
-    constructor(source: string);
-    update(delta: number): void;
-}