@tomorrowevening/hermes 0.0.9 → 0.0.12

package/src/editor/sidePanel/inspector/Inspector.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useState } from "react";
+import { CoreComponentProps, RemoteObject } from "../types";
+import { ToolEvents, debugDispatcher } from "../../global";
+// Components
+import './inspector.scss';
+import Accordion from "../Accordion";
+import InspectorField from './InspectorField';
+// Utils
+import { InspectCamera } from "./utils/InspectCamera";
+import { InspectMaterial } from "./utils/InspectMaterial";
+import { InspectTransform } from "./utils/InspectTransform";
+import { InspectLight } from "./utils/InspectLight";
+import { setItemProps } from "../utils";
+import { AnimationMixer } from "three";
+import InspectAnimation from "./utils/InspectAnimation";
+
+export default function Inspector(props: CoreComponentProps) {
+  const [lastRefresh, setLastRefresh] = useState(-1);
+  const [currentObject, setCurrentObject] = useState<RemoteObject>({
+    name: '',
+    uuid: '',
+    type: '',
+    visible: false,
+    matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+    animations: [],
+    material: undefined,
+    perspectiveCameraInfo: undefined,
+    orthographicCameraInfo: undefined,
+    lightInfo: undefined,
+  });
+
+  useEffect(() => {
+    function onSelectItem(evt: any) {
+      const obj = evt.value as RemoteObject;
+      setCurrentObject(obj);
+      setLastRefresh(Date.now());
+      if (props.three.scene !== undefined) {
+        const child = props.three.scene.getObjectByProperty('uuid', obj.uuid);
+        if (child !== undefined && child.animations.length > 0) {
+          const mixer = new AnimationMixer(child);
+          console.log(mixer);
+          console.log(child.animations);
+        }
+      }
+    }
+
+    debugDispatcher.addEventListener(ToolEvents.SET_OBJECT, onSelectItem);
+    return () => {
+      debugDispatcher.removeEventListener(ToolEvents.SET_OBJECT, onSelectItem);
+    };
+  }, []);
+
+  const objType = currentObject.type.toLowerCase();
+
+  return (
+    <Accordion label='Inspector' key='Inspector'>
+      <div id="Inspector" className={props.class} key={lastRefresh}>
+        {currentObject.uuid.length > 0 && (
+          <>
+            {/* Core */}
+            <>
+              <InspectorField
+                type="string"
+                title="Name"
+                prop="name"
+                value={currentObject.name}
+                disabled={true}
+              />
+              <InspectorField
+                type="string"
+                title="Type"
+                prop="type"
+                value={currentObject.type}
+                disabled={true}
+              />
+              <InspectorField
+                type="string"
+                title="UUID"
+                prop="uuid"
+                value={currentObject.uuid}
+                disabled={true}
+              />
+              <InspectorField
+                type="boolean"
+                title="Visible"
+                prop="visible"
+                value={currentObject.visible}
+                onChange={(key: string, value: any) => {
+                  props.three.updateObject(currentObject.uuid, key, value);
+                  const child = props.three.scene?.getObjectByProperty('uuid', currentObject.uuid);
+                  if (child !== undefined) setItemProps(child, key, value);
+                }}
+              />
+            </>
+
+            {/* Data */}
+            <>
+              {/* Transform */}
+              {InspectTransform(currentObject, props.three)}
+              {/* Animations */}
+              {currentObject.animations.length > 0 ? InspectAnimation(currentObject, props.three) : null}
+              {/* Cameras */}
+              {objType.search('camera') > -1 ? InspectCamera(currentObject, props.three) : null}
+              {/* Lights */}
+              {objType.search('light') > -1 ? InspectLight(currentObject, props.three) : null}
+              {/* Material */}
+              {objType.search('mesh') > -1 ? InspectMaterial(currentObject, props.three) : null}
+            </>
+          </>
+        )}
+      </div>
+    </Accordion>
+  );
+}

package/src/editor/{sceneHierarchy → sidePanel}/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/sidePanel/inspector/utils/InspectAnimation.tsx

@@ -0,0 +1,51 @@
+import RemoteThree from "@/core/remote/RemoteThree";
+import InspectorGroup from "../InspectorGroup";
+import { InspectorFieldProps } from '../InspectorField';
+import { AnimationClipInfo, RemoteObject } from '../../types';
+import { setItemProps } from "../../utils";
+
+export default function InspectAnimation(obj: RemoteObject, three: RemoteThree) {
+  const items: InspectorFieldProps[] = [];
+  obj.animations.forEach((value: AnimationClipInfo) => {
+    // Add animation
+    items.push({
+      title: 'Name',
+      type: 'string',
+      prop: 'name',
+      value: value.name,
+      disabled: true,
+      onChange: (prop: string, value: any) => {
+        three.updateObject(obj.uuid, prop, value);
+        const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
+        if (child !== undefined) setItemProps(child, prop, value);
+      },
+    });
+    items.push({
+      title: 'Duration',
+      type: 'number',
+      prop: 'duration',
+      value: value.duration,
+      disabled: true,
+      onChange: (prop: string, value: any) => {
+        three.updateObject(obj.uuid, prop, value);
+        const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
+        if (child !== undefined) setItemProps(child, prop, value);
+      },
+    });
+    items.push({
+      title: 'Blend Mode',
+      type: 'number',
+      prop: 'blendMode',
+      value: value.blendMode,
+      disabled: true,
+      onChange: (prop: string, value: any) => {
+        three.updateObject(obj.uuid, prop, value);
+        const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
+        if (child !== undefined) setItemProps(child, prop, value);
+      },
+    });
+  });
+  return (
+    <InspectorGroup title="Animations" items={items} />
+  );
+}

package/src/editor/{sceneHierarchy → sidePanel}/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 → sidePanel}/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/{sceneHierarchy → sidePanel}/types.ts

@@ -11,7 +11,7 @@ export interface ChildObjectProps extends CoreComponentProps {
   three: RemoteThree
 }
 
-export interface SceneHierarchyState {
+export interface SidePanelState {
   scene?: Object3D
   three: RemoteThree
 }
@@ -71,6 +71,14 @@ export interface RemoteMaterial {
   specularColor?: Color
 }
 
+// Animation Info
+
+export interface AnimationClipInfo {
+  name: string;
+  duration: number;
+  blendMode: number;
+}
+
 // Camera Info
 
 export interface PerspectiveCameraInfo {
@@ -114,6 +122,7 @@ export interface RemoteObject {
   type: string
   visible: boolean
   matrix: number[] // based on Matrix4.elements
+  animations: AnimationClipInfo[]
   material?: RemoteMaterial | RemoteMaterial[]
   perspectiveCameraInfo?: PerspectiveCameraInfo
   orthographicCameraInfo?: OrthographicCameraInfo

package/src/editor/{sceneHierarchy → sidePanel}/utils.ts

@@ -1,4 +1,4 @@
-import { CubeTexture, Material, Mesh, Object3D, RepeatWrapping, Texture } from 'three';
+import { AnimationClip, CubeTexture, Material, Mesh, Object3D, RepeatWrapping, Texture } from 'three';
 import { MinimumObject, RemoteMaterial, RemoteObject } from './types';
 
 export function determineIcon(obj: Object3D): string {
@@ -132,14 +132,23 @@ export function stripObject(obj: Object3D): RemoteObject {
     uuid: obj.uuid,
     visible: obj.visible,
     matrix: obj.matrix.elements,
+    animations: [],
     material: undefined,
     perspectiveCameraInfo: undefined,
     orthographicCameraInfo: undefined,
     lightInfo: undefined,
   };
 
-  const type = obj.type.toLowerCase();
+  // Animations
+  obj.animations.forEach((clip: AnimationClip) => {
+    stripped.animations.push({
+      name: clip.name,
+      duration: clip.duration,
+      blendMode: clip.blendMode,
+    });
+  });
 
+  const type = obj.type.toLowerCase();
   if (type.search('mesh') > -1) {
     const mesh = obj as Mesh;
     if (Array.isArray(mesh.material)) {

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 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/multiView/InfiniteGridHelper';
+export { default as UVMaterial } from './editor/multiView/UVMaterial';
+export { default as SidePanel } from './editor/sidePanel/SidePanel';
+export { default as Accordion } from './editor/sidePanel/Accordion';
+export { default as ChildObject } from './editor/sidePanel/ChildObject';
+export { default as ContainerObject } from './editor/sidePanel/ContainerObject';
+export { default as Inspector } from './editor/sidePanel/inspector/Inspector';
+export { default as SceneInspector } from './editor/sidePanel/inspector/SceneInspector';
+export { default as MultiView } from './editor/multiView/MultiView';
 export { default as Editor } from './editor/Editor';

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

@@ -1,4 +1,4 @@
-import { Scene } from 'three';
+import { Camera, Scene } from 'three';
 import BaseRemote from './BaseRemote';
 export default class RemoteThree extends BaseRemote {
     scene?: Scene;
@@ -7,6 +7,7 @@ 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;
+    addCamera(camera: Camera): void;
+    removeCamera(camera: Camera): 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' | 'addCamera' | 'removeCamera' | '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,11 +4,12 @@ export declare const ToolEvents: {
     CUSTOM: string;
     SELECT_DROPDOWN: string;
     DRAG_UPDATE: string;
-    GET_SCENE: string;
     SET_SCENE: string;
     GET_OBJECT: string;
     SET_OBJECT: string;
     UPDATE_OBJECT: string;
     CREATE_TEXTURE: string;
     REQUEST_METHOD: string;
+    ADD_CAMERA: string;
+    REMOVE_CAMERA: string;
 };

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

@@ -2,6 +2,8 @@
 import { Camera } from 'three';
 interface DropdownProps {
     index: number;
+    open: boolean;
+    onToggle: (value: boolean) => void;
     onSelect: (value: string) => void;
     options: string[];
     up?: boolean;

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/sidePanel/SidePanel.d.ts

@@ -0,0 +1,11 @@
+import { Component, ReactNode } from 'react';
+import '../scss/_sidePanel.scss';
+import { SidePanelState } from './types';
+export default class SidePanel extends Component<SidePanelState> {
+    private three;
+    constructor(props: SidePanelState);
+    componentWillUnmount(): void;
+    render(): ReactNode;
+    private setScene;
+    get componentState(): SidePanelState;
+}