@tomorrowevening/hermes 0.0.8 → 0.0.11

package/src/editor/multiView/MultiViewData.ts

@@ -0,0 +1,59 @@
+import { Camera, CameraHelper, MeshBasicMaterial, MeshDepthMaterial, MeshNormalMaterial, OrthographicCamera, PerspectiveCamera, Vector3 } from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import UVMaterial from './UVMaterial';
+
+export type MultiViewMode = 'Single' | 'Side by Side' | 'Stacked' |'Quad';
+export const ModeOptions: MultiViewMode[] = [
+  'Single',
+  'Side by Side',
+  'Stacked',
+  'Quad'
+];
+
+// Cameras
+
+export const cameras: Map<string, Camera> = new Map();
+export const controls: Map<string, OrbitControls> = new Map();
+export const helpers: Map<string, CameraHelper> = new Map();
+
+export function createOrtho(name: string, position: Vector3) {
+  const camera = new OrthographicCamera(-100, 100, 100, -100, 50, 3000);
+  camera.name = name;
+  camera.position.copy(position);
+  camera.lookAt(0, 0, 0);
+  cameras.set(name, camera);
+  return camera;
+}
+
+createOrtho('Top', new Vector3(0, 1000, 0));
+createOrtho('Bottom', new Vector3(0, -1000, 0));
+createOrtho('Left', new Vector3(-1000, 0, 0));
+createOrtho('Right', new Vector3(1000, 0, 0));
+createOrtho('Front', new Vector3(0, 0, 1000));
+createOrtho('Back', new Vector3(0, 0, -1000));
+createOrtho('Orthographic', new Vector3(1000, 1000, 1000));
+
+export const debugCamera = new PerspectiveCamera(60, 1, 50, 3000);
+debugCamera.name = 'Debug';
+debugCamera.position.set(500, 500, 500);
+debugCamera.lookAt(0, 0, 0);
+cameras.set('Debug', debugCamera);
+
+// Rendering
+
+export type RenderMode = 'Depth' | 'Normals' | 'Renderer' | 'UVs' | 'Wireframe';
+export const renderOptions: RenderMode[] = [
+  'Renderer',
+  'Depth',
+  'Normals',
+  'UVs',
+  'Wireframe',
+];
+export const depthMaterial = new MeshDepthMaterial();
+export const normalsMaterial = new MeshNormalMaterial();
+export const uvMaterial = new UVMaterial();
+export const wireframeMaterial = new MeshBasicMaterial({
+  opacity: 0.33,
+  transparent: true,
+  wireframe: true
+});

package/src/editor/multiView/UVMaterial.ts

@@ -0,0 +1,55 @@
+import { ShaderMaterial } from "three";
+
+const vertex = `#include <common>
+#include <batching_pars_vertex>
+#include <uv_pars_vertex>
+#include <color_pars_vertex>
+#include <morphtarget_pars_vertex>
+#include <skinning_pars_vertex>
+#include <logdepthbuf_pars_vertex>
+#include <clipping_planes_pars_vertex>
+
+void main() {
+	#include <uv_vertex>
+	#include <color_vertex>
+	#include <morphcolor_vertex>
+	#include <batching_vertex>
+
+	#if defined ( USE_SKINNING )
+		#include <beginnormal_vertex>
+		#include <morphnormal_vertex>
+		#include <skinbase_vertex>
+		#include <skinnormal_vertex>
+		#include <defaultnormal_vertex>
+	#endif
+
+	#include <begin_vertex>
+	#include <morphtarget_vertex>
+	#include <skinning_vertex>
+	#include <project_vertex>
+	#include <logdepthbuf_vertex>
+	#include <clipping_planes_vertex>
+	#include <worldpos_vertex>
+}`;
+
+const fragment = `
+#include <common>
+#include <uv_pars_fragment>
+#include <clipping_planes_pars_fragment>
+
+void main() {
+	#include <clipping_planes_fragment>
+	gl_FragColor = vec4(vec3(vUv, 0.0), 1.0);
+}`;
+
+export default class UVMaterial extends ShaderMaterial {
+  constructor() {
+    super({
+      defines: {
+        USE_UV: ''
+      },
+      vertexShader: vertex,
+      fragmentShader: fragment,
+    });
+  }
+}

package/src/editor/sceneHierarchy/SceneHierarchy.tsx

@@ -22,34 +22,24 @@ export default class SceneHierarchy extends Component<SceneHierarchyState> {
     debugDispatcher.addEventListener(ToolEvents.SET_SCENE, this.setScene);
   }
 
-  componentDidMount(): void {
-    this.onRefresh();
-  }
-
   componentWillUnmount(): void {
     debugDispatcher.removeEventListener(ToolEvents.SET_SCENE, this.setScene);
   }
 
   render(): ReactNode {
     const hasScene = this.componentState.scene !== null;
-    const HierarchyName = 'Hierarchy' + (hasScene ? `: ${this.componentState.scene?.name}` : '');
+    const HierarchyName = 'Hierarchy - ' + (hasScene ? `${this.componentState.scene?.name}` : 'No Scene');
     return (
       <div id="SceneHierarchy" key="SceneHierarchy">
         {(
           <>
-            {hasScene && (
-              <Accordion
-                label={HierarchyName}
-                button={(
-                  <button className='icon refresh hideText' onClick={this.onRefresh}>
-                    Refresh
-                  </button>
+            <Accordion label={HierarchyName} open={true}>
+              <>
+                {hasScene && (
+                  <ContainerObject child={this.componentState.scene!} three={this.three} />
                 )}
-                open={true}
-              >
-                <ContainerObject child={this.componentState.scene!} three={this.three} />
-              </Accordion>
-            )}
+              </>
+            </Accordion>
 
             <Accordion label='Inspector'>
               <Inspector key="Inspector" three={this.three} />
@@ -62,10 +52,6 @@ export default class SceneHierarchy extends Component<SceneHierarchyState> {
 
   // Private
 
-  private onRefresh = () => {
-    this.three.getScene();
-  };
-
   private setScene = (evt: any) => {
     this.setState(() => ({
       scene: evt.value

package/src/editor/sceneHierarchy/inspector/SceneInspector.tsx

@@ -1,32 +1,42 @@
 import RemoteThree from "@/core/remote/RemoteThree";
 import { ToolEvents, debugDispatcher } from "@/editor/global";
 import { useEffect } from "react";
-import { Scene, Texture } from "three";
+import { Texture } from "three";
 import { setItemProps, textureFromSrc } from "../utils";
 
 export interface SceneInspectorProps {
-  scene: Scene
   three: RemoteThree
 }
 
 export default function SceneInspector(props: SceneInspectorProps) {
+  function hasScene() {
+    if (props.three.scene === undefined) {
+      console.log('No scene:', props.three);
+      return false;
+    }
+    return true;
+  }
   const onGetObject = (evt: any) => {
-    const child = props.scene.getObjectByProperty('uuid', evt.value);
+    if (!hasScene()) return;
+    const child = props.three.scene?.getObjectByProperty('uuid', evt.value);
     if (child !== undefined) props.three.setObject(child);
   };
 
   const setChildProps = (uuid: string, key: string, value: any) => {
-    const child = props.scene.getObjectByProperty('uuid', uuid);
+    if (!hasScene()) return;
+    const child = props.three.scene?.getObjectByProperty('uuid', uuid);
     if (child !== undefined) setItemProps(child, key, value);
   };
 
   const onUpdateObject = (evt: any) => {
+    if (!hasScene()) return;
     const msg = evt.value;
     const { key, value, uuid } = msg;
     setChildProps(uuid, key, value);
   };
 
   const onCreateTexture = (evt: any) => {
+    if (!hasScene()) return;
     const data = evt.value;
     textureFromSrc(data.value).then((texture: Texture) => {
       setChildProps(data.uuid, data.key, texture);
@@ -34,13 +44,10 @@ export default function SceneInspector(props: SceneInspectorProps) {
     });
   };
 
-  const onGetScene = () => {
-    props.three.setScene(props.scene);
-  };
-
   const onRequestMethod = (evt: any) => {
+    if (!hasScene()) return;
     const { key, uuid, value } = evt.value;
-    const child = props.scene.getObjectByProperty('uuid', uuid);
+    const child = props.three.scene?.getObjectByProperty('uuid', uuid);
     if (child !== undefined) {
       try {
         child[key](value);
@@ -55,13 +62,11 @@ export default function SceneInspector(props: SceneInspectorProps) {
 
   useEffect(() => {
     debugDispatcher.addEventListener(ToolEvents.GET_OBJECT, onGetObject);
-    debugDispatcher.addEventListener(ToolEvents.GET_SCENE, onGetScene);
     debugDispatcher.addEventListener(ToolEvents.UPDATE_OBJECT, onUpdateObject);
     debugDispatcher.addEventListener(ToolEvents.CREATE_TEXTURE, onCreateTexture);
     debugDispatcher.addEventListener(ToolEvents.REQUEST_METHOD, onRequestMethod);
     return () => {
       debugDispatcher.removeEventListener(ToolEvents.GET_OBJECT, onGetObject);
-      debugDispatcher.removeEventListener(ToolEvents.GET_SCENE, onGetScene);
       debugDispatcher.removeEventListener(ToolEvents.UPDATE_OBJECT, onUpdateObject);
       debugDispatcher.removeEventListener(ToolEvents.CREATE_TEXTURE, onCreateTexture);
       debugDispatcher.removeEventListener(ToolEvents.REQUEST_METHOD, onRequestMethod);

package/src/editor/sceneHierarchy/inspector/utils/InspectMaterial.tsx

@@ -339,6 +339,7 @@ export function InspectMaterial(object: RemoteObject, three: RemoteThree): any {
       items.push(
         <InspectorGroup
           title={`Material ${i}`}
+          key={`Material ${i}`}
           items={inspectMaterialItems(material[i], object, three)}
         />
       );

package/src/editor/sceneHierarchy/inspector/utils/InspectTransform.tsx

@@ -1,8 +1,10 @@
 import { Euler, Matrix4, Vector3 } from 'three';
+import { degToRad, radToDeg } from 'three/src/math/MathUtils';
 import InspectorGroup from '../InspectorGroup';
 import { RemoteObject } from "../../types";
 import RemoteThree from '@/core/remote/RemoteThree';
 import { setItemProps } from '../../utils';
+import { round } from '@/editor/utils';
 
 export function InspectTransform(obj: RemoteObject, three: RemoteThree) {
   const matrix = new Matrix4();
@@ -22,73 +24,67 @@ export function InspectTransform(obj: RemoteObject, three: RemoteThree) {
     if (child !== undefined) setItemProps(child, prop, value);
   };
 
-  const items: any[] = [
-    {
-      title: 'Position',
-      items: [
+  const updateRotation = (prop: string, value: any) => {
+    updateTransform(prop, degToRad(value));
+  };
+
+  return (
+    <InspectorGroup
+      title="Transform"
+      items={[
         {
-          title: 'X',
+          title: 'Position X',
           prop: 'position.x',
           type: 'number',
           value: position.x,
           onChange: updateTransform,
         },
         {
-          title: 'Y',
+          title: 'Position Y',
           prop: 'position.y',
           type: 'number',
           value: position.y,
           onChange: updateTransform,
         },
         {
-          title: 'Z',
+          title: 'Position Z',
           prop: 'position.z',
           type: 'number',
           value: position.z,
           onChange: updateTransform,
         },
-      ],
-    },
-    {
-      title: 'Rotation',
-      items: [
         {
-          title: 'X',
+          title: 'Rotation X',
           prop: 'rotation.x',
           type: 'number',
-          value: rotation.x,
-          min: -Math.PI,
-          max: Math.PI,
-          step: 0.01,
-          onChange: updateTransform,
+          value: round(radToDeg(rotation.x)),
+          min: -360,
+          max: 360,
+          step: 0.1,
+          onChange: updateRotation,
         },
         {
-          title: 'Y',
+          title: 'Rotation Y',
           prop: 'rotation.y',
           type: 'number',
-          value: rotation.y,
-          min: -Math.PI,
-          max: Math.PI,
-          step: 0.01,
-          onChange: updateTransform,
+          value: round(radToDeg(rotation.y)),
+          min: -360,
+          max: 360,
+          step: 0.1,
+          onChange: updateRotation,
         },
         {
-          title: 'Z',
+          title: 'Rotation Z',
           prop: 'rotation.z',
           type: 'number',
-          value: rotation.z,
-          min: -Math.PI,
-          max: Math.PI,
-          step: 0.01,
-          onChange: updateTransform,
+          value: round(radToDeg(rotation.z)),
+          min: -360,
+          max: 360,
+          step: 0.1,
+          onChange: updateRotation,
         },
-      ],
-    },
-    {
-      title: 'Scale',
-      items: [
         {
-          title: 'X',
+          title: 'Scale X',
           prop: 'scale.x',
           type: 'number',
           value: scale.x,
@@ -96,7 +92,7 @@ export function InspectTransform(obj: RemoteObject, three: RemoteThree) {
           onChange: updateTransform,
         },
         {
-          title: 'Y',
+          title: 'Scale Y',
           prop: 'scale.y',
           type: 'number',
           value: scale.y,
@@ -104,21 +100,14 @@ export function InspectTransform(obj: RemoteObject, three: RemoteThree) {
           onChange: updateTransform,
         },
         {
-          title: 'Z',
+          title: 'Scale Z',
           prop: 'scale.z',
           type: 'number',
           value: scale.z,
           step: 0.01,
           onChange: updateTransform,
         },
-      ],
-    },
-  ];
-
-  return (
-    <InspectorGroup
-      title="Transform"
-      items={items}
+      ]}
     />
   );
 }

package/src/editor/utils.ts

@@ -1,4 +1,4 @@
-import { Object3D } from "three";
+import { Material, Mesh, Object3D, PositionalAudio, Texture } from "three";
 
 export function clamp(min: number, max: number, value: number) {
   return Math.min(max, Math.max(min, value));
@@ -38,20 +38,76 @@ export function colorToHex(obj: any) {
   return '#' + red + green + blue;
 }
 
-let totalObjects = 0;
+export function round(value: number, precision: number = 1): number {
+  return Number(value.toFixed(precision));
+}
+
+export let totalThreeObjects = 0;
+export const resetThreeObjects = () => {
+  totalThreeObjects = 0;
+};
 export const hierarchyUUID = (object: Object3D): void => {
   if (!object) return;
 
   let uuid = object.name.replace(' ', '');
   // fallback in case there's no name
-  if (uuid.length === 0) uuid = `obj_${totalObjects}`;
+  if (uuid.length === 0) {
+    uuid = `obj_${totalThreeObjects}`;
+    totalThreeObjects++;
+  }
   // inherit parent's UUID for hierarchy
   if (object.parent !== null) uuid = `${object.parent.uuid}.${uuid}`;
   object.uuid = uuid;
-  totalObjects++;
 
   // Iterate children
   object.children.forEach((child: Object3D) => {
     hierarchyUUID(child);
   });
 };
+
+// Dispose
+
+export const disposeTexture = (texture?: Texture): void => {
+  texture?.dispose();
+};
+
+// Dispose material
+export const disposeMaterial = (material?: Material | Material[]): void => {
+  if (!material) return;
+
+  if (Array.isArray(material)) {
+    material.forEach((mat: Material) => mat.dispose());
+  } else {
+    material.dispose();
+  }
+};
+
+// Dispose object
+export const dispose = (object: Object3D): void => {
+  if (!object) return;
+
+  // Dispose children
+  while (object.children.length > 0) {
+    const child = object.children[0];
+    if (child instanceof PositionalAudio) {
+      child.pause();
+      if (child.parent) {
+        child.parent.remove(child);
+      }
+    } else {
+      dispose(child);
+    }
+  }
+
+  // Dispose object
+  if (object.parent) object.parent.remove(object);
+  // @ts-ignore
+  if (object.isMesh) {
+    const mesh = object as Mesh;
+    mesh.geometry?.dispose();
+    disposeMaterial(mesh.material);
+  }
+
+  // @ts-ignore
+  if (object.dispose !== undefined) object.dispose();
+};

package/src/index.ts

@@ -15,12 +15,13 @@ export { default as DropdownItem } from './editor/components/DropdownItem';
 export { default as Dropdown } from './editor/components/Dropdown';
 export { default as RemoteController } from './core/RemoteController';
 // RemoteThree
+export { default as InfiniteGridHelper } from './editor/multiView/InfiniteGridHelper';
+export { default as UVMaterial } from './editor/multiView/UVMaterial';
 export { default as SceneHierarchy } from './editor/sceneHierarchy/SceneHierarchy';
 export { default as Accordion } from './editor/sceneHierarchy/Accordion';
 export { default as ChildObject } from './editor/sceneHierarchy/ChildObject';
 export { default as ContainerObject } from './editor/sceneHierarchy/ContainerObject';
 export { default as Inspector } from './editor/sceneHierarchy/inspector/Inspector';
 export { default as SceneInspector } from './editor/sceneHierarchy/inspector/SceneInspector';
-export { default as MultiView } from './editor/sceneHierarchy/inspector/MultiView/MultiView';
-export { default as InfiniteGridHelper } from './editor/sceneHierarchy/inspector/MultiView/InfiniteGridHelper';
+export { default as MultiView } from './editor/multiView/MultiView';
 export { default as Editor } from './editor/Editor';

package/types/core/remote/RemoteThree.d.ts

@@ -7,6 +7,5 @@ export default class RemoteThree extends BaseRemote {
     requestMethod(uuid: string, key: string, value?: any): void;
     updateObject(uuid: string, key: string, value: any): void;
     createTexture(uuid: string, key: string, value: any): void;
-    getScene(): void;
     setScene(value: Scene): void;
 }

package/types/core/types.d.ts

@@ -6,7 +6,7 @@ export interface BroadcastData {
 export type ApplicationMode = 'app' | 'editor';
 export type VoidCallback = () => void;
 export type DataUpdateCallback = (data: any) => void;
-export type EditorEvent = 'custom' | 'setSheet' | 'setSheetObject' | 'updateSheetObject' | 'updateTimeline' | 'getObject' | 'setObject' | 'updateObject' | 'getScene' | 'setScene' | 'createTexture' | 'requestMethod' | 'addFolder' | 'bindObject' | 'updateBind' | 'addButton' | 'clickButton' | 'selectComponent' | 'draggableListUpdate';
+export type EditorEvent = 'custom' | 'setSheet' | 'setSheetObject' | 'updateSheetObject' | 'updateTimeline' | 'getObject' | 'setObject' | 'updateObject' | 'setScene' | 'createTexture' | 'requestMethod' | 'addFolder' | 'bindObject' | 'updateBind' | 'addButton' | 'clickButton' | 'selectComponent' | 'draggableListUpdate';
 export type VoidFunc = () => void;
 export type BroadcastCallback = (data: BroadcastData) => void;
 export type TheatreUpdateCallback = (data: any) => void;

package/types/editor/global.d.ts

@@ -4,7 +4,6 @@ export declare const ToolEvents: {
     CUSTOM: string;
     SELECT_DROPDOWN: string;
     DRAG_UPDATE: string;
-    GET_SCENE: string;
     SET_SCENE: string;
     GET_OBJECT: string;
     SET_OBJECT: string;

package/types/editor/multiView/MultiView.d.ts

@@ -0,0 +1,9 @@
+import { MultiViewMode } from './MultiViewData';
+import './MultiView.scss';
+import RemoteThree from '@/core/remote/RemoteThree';
+interface MultiViewProps {
+    three: RemoteThree;
+    mode?: MultiViewMode;
+}
+export default function MultiView(props: MultiViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/types/editor/multiView/MultiViewData.d.ts

@@ -0,0 +1,16 @@
+import { Camera, CameraHelper, MeshBasicMaterial, MeshDepthMaterial, MeshNormalMaterial, OrthographicCamera, PerspectiveCamera, Vector3 } from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import UVMaterial from './UVMaterial';
+export type MultiViewMode = 'Single' | 'Side by Side' | 'Stacked' | 'Quad';
+export declare const ModeOptions: MultiViewMode[];
+export declare const cameras: Map<string, Camera>;
+export declare const controls: Map<string, OrbitControls>;
+export declare const helpers: Map<string, CameraHelper>;
+export declare function createOrtho(name: string, position: Vector3): OrthographicCamera;
+export declare const debugCamera: PerspectiveCamera;
+export type RenderMode = 'Depth' | 'Normals' | 'Renderer' | 'UVs' | 'Wireframe';
+export declare const renderOptions: RenderMode[];
+export declare const depthMaterial: MeshDepthMaterial;
+export declare const normalsMaterial: MeshNormalMaterial;
+export declare const uvMaterial: UVMaterial;
+export declare const wireframeMaterial: MeshBasicMaterial;

package/types/editor/multiView/UVMaterial.d.ts

@@ -0,0 +1,4 @@
+import { ShaderMaterial } from "three";
+export default class UVMaterial extends ShaderMaterial {
+    constructor();
+}

package/types/editor/sceneHierarchy/SceneHierarchy.d.ts

@@ -4,10 +4,8 @@ import { SceneHierarchyState } from './types';
 export default class SceneHierarchy extends Component<SceneHierarchyState> {
     private three;
     constructor(props: SceneHierarchyState);
-    componentDidMount(): void;
     componentWillUnmount(): void;
     render(): ReactNode;
-    private onRefresh;
     private setScene;
     get componentState(): SceneHierarchyState;
 }

package/types/editor/sceneHierarchy/inspector/SceneInspector.d.ts

@@ -1,7 +1,5 @@
 import RemoteThree from "@/core/remote/RemoteThree";
-import { Scene } from "three";
 export interface SceneInspectorProps {
-    scene: Scene;
     three: RemoteThree;
 }
 export default function SceneInspector(props: SceneInspectorProps): null;

package/types/editor/utils.d.ts

@@ -1,7 +1,13 @@
-import { Object3D } from "three";
+import { Material, Object3D, Texture } from "three";
 export declare function clamp(min: number, max: number, value: number): number;
 export declare function distance(x: number, y: number): number;
 export declare function randomID(): string;
 export declare function isColor(obj: any): boolean;
 export declare function colorToHex(obj: any): string;
+export declare function round(value: number, precision?: number): number;
+export declare let totalThreeObjects: number;
+export declare const resetThreeObjects: () => void;
 export declare const hierarchyUUID: (object: Object3D) => void;
+export declare const disposeTexture: (texture?: Texture) => void;
+export declare const disposeMaterial: (material?: Material | Material[]) => void;
+export declare const dispose: (object: Object3D) => void;

package/types/index.d.ts

@@ -12,12 +12,13 @@ export { default as Draggable } from './editor/components/Draggable';
 export { default as DropdownItem } from './editor/components/DropdownItem';
 export { default as Dropdown } from './editor/components/Dropdown';
 export { default as RemoteController } from './core/RemoteController';
+export { default as InfiniteGridHelper } from './editor/multiView/InfiniteGridHelper';
+export { default as UVMaterial } from './editor/multiView/UVMaterial';
 export { default as SceneHierarchy } from './editor/sceneHierarchy/SceneHierarchy';
 export { default as Accordion } from './editor/sceneHierarchy/Accordion';
 export { default as ChildObject } from './editor/sceneHierarchy/ChildObject';
 export { default as ContainerObject } from './editor/sceneHierarchy/ContainerObject';
 export { default as Inspector } from './editor/sceneHierarchy/inspector/Inspector';
 export { default as SceneInspector } from './editor/sceneHierarchy/inspector/SceneInspector';
-export { default as MultiView } from './editor/sceneHierarchy/inspector/MultiView/MultiView';
-export { default as InfiniteGridHelper } from './editor/sceneHierarchy/inspector/MultiView/InfiniteGridHelper';
+export { default as MultiView } from './editor/multiView/MultiView';
 export { default as Editor } from './editor/Editor';

package/types/editor/sceneHierarchy/inspector/MultiView/MultiView.d.ts

@@ -1,11 +0,0 @@
-import { Camera, Scene, WebGLRenderer } from 'three';
-import './MultiView.scss';
-type MultiViewMode = 'Single' | 'Side by Side' | 'Stacked' | 'Quad';
-interface MultiViewProps {
-    scene: Scene;
-    renderer: WebGLRenderer;
-    cameras: Camera[];
-    mode?: MultiViewMode;
-}
-export default function MultiView(props: MultiViewProps): import("react/jsx-runtime").JSX.Element;
-export {};