@tomorrowevening/hermes 0.0.9 → 0.0.11

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,13 +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/sceneHierarchy/inspector/MultiView/InfiniteGridHelper';
-export { default as UVMaterial } from './editor/sceneHierarchy/inspector/MultiView/UVMaterial';
+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 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/{sceneHierarchy/inspector/MultiView → multiView}/MultiView.d.ts

@@ -1,10 +1,8 @@
-import { Camera, Scene, WebGLRenderer } from 'three';
 import { MultiViewMode } from './MultiViewData';
 import './MultiView.scss';
+import RemoteThree from '@/core/remote/RemoteThree';
 interface MultiViewProps {
-    scene: Scene;
-    renderer: WebGLRenderer;
-    cameras: Camera[];
+    three: RemoteThree;
     mode?: MultiViewMode;
 }
 export default function MultiView(props: MultiViewProps): import("react/jsx-runtime").JSX.Element;

package/types/editor/{sceneHierarchy/inspector/MultiView → multiView}/MultiViewData.d.ts

@@ -1,4 +1,4 @@
-import { Camera, CameraHelper, MeshBasicMaterial, MeshNormalMaterial, OrthographicCamera, PerspectiveCamera, Vector3 } from 'three';
+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';
@@ -6,11 +6,11 @@ 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 const cameraOptions: string[];
 export declare function createOrtho(name: string, position: Vector3): OrthographicCamera;
 export declare const debugCamera: PerspectiveCamera;
-export type RenderMode = 'Default' | 'Normals' | 'Wireframe' | 'UVs';
+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 wireframeMaterial: MeshBasicMaterial;
 export declare const uvMaterial: UVMaterial;
+export declare const wireframeMaterial: MeshBasicMaterial;

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,13 +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/sceneHierarchy/inspector/MultiView/InfiniteGridHelper';
-export { default as UVMaterial } from './editor/sceneHierarchy/inspector/MultiView/UVMaterial';
+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 MultiView } from './editor/multiView/MultiView';
 export { default as Editor } from './editor/Editor';