@tomorrowevening/hermes 0.0.11 → 0.0.13

package/src/core/types.ts

@@ -28,6 +28,8 @@ export type EditorEvent =
   | 'setScene'
   | 'createTexture'
   | 'requestMethod'
+  | 'addCamera'
+  | 'removeCamera'
 // GUI
   | 'addFolder'
   | 'bindObject'

package/src/editor/global.ts

@@ -14,4 +14,7 @@ export const ToolEvents = {
   UPDATE_OBJECT: 'ToolEvents::updateObject',
   CREATE_TEXTURE: 'ToolEvents::createTexture',
   REQUEST_METHOD: 'ToolEvents::requestMethod',
+  // MultiView
+  ADD_CAMERA: 'ToolEvents::addCamera',
+  REMOVE_CAMERA: 'ToolEvents::removeCamera',
 };

package/src/editor/multiView/CameraWindow.tsx

@@ -2,18 +2,19 @@ import { ForwardedRef, forwardRef, useState } from 'react';
 import { Camera } from 'three';
 
 interface DropdownProps {
-  index: number
+  index: number;
+  open: boolean;
+  onToggle: (value: boolean) => void;
   onSelect: (value: string) => void;
   options: string[];
   up?: boolean;
 }
 
 export const Dropdown = (props: DropdownProps) => {
-  const [isOpen, setIsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState(props.options[props.index]);
 
   const handleToggle = () => {
-    setIsOpen(!isOpen);
+    props.onToggle(!props.open);
   };
 
   const handleSelect = (option: any) => {
@@ -21,7 +22,7 @@ export const Dropdown = (props: DropdownProps) => {
       props.onSelect(option);
       setSelectedOption(option);
     }
-    setIsOpen(false);
+    props.onToggle(false);
   };
 
   return (
@@ -29,7 +30,7 @@ export const Dropdown = (props: DropdownProps) => {
       <div className="dropdown-toggle" onClick={handleToggle}>
         {selectedOption}
       </div>
-      {isOpen && (
+      {props.open && (
         <ul className="dropdown-menu">
           {props.options.map((option) => (
             <li key={option} onClick={() => handleSelect(option)}>
@@ -49,11 +50,23 @@ interface CameraWindowProps {
 }
 
 const CameraWindow = forwardRef(function CameraWindow(props: CameraWindowProps, ref: ForwardedRef<HTMLDivElement>) {
+  const [open, setOpen] = useState(false);
   const index = props.options.indexOf(props.camera.name);
   return (
     <div className='CameraWindow'>
-      <div ref={ref} className='clickable'></div>
-      <Dropdown index={index} options={props.options} onSelect={props.onSelect} up={true} />
+      <div ref={ref} className='clickable' onClick={() => {
+        if (open) setOpen(false);
+      }} />
+      <Dropdown
+        index={index}
+        open={open}
+        options={props.options}
+        onSelect={props.onSelect}
+        onToggle={(value: boolean) => {
+          setOpen(value);
+        }}
+        up={true}
+      />
     </div>
   );
 });

package/src/editor/multiView/MultiView.scss

@@ -54,6 +54,7 @@ $padding: 2px;
   .cameras {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    pointer-events: visible;
     position: absolute;
     width: 100%;
     height: 100%;
@@ -92,6 +93,7 @@ $padding: 2px;
   }
 
   .settings {
+    pointer-events: visible;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);

package/src/editor/multiView/MultiView.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { AxesHelper, Camera, CameraHelper, OrthographicCamera, PerspectiveCamera, Scene, WebGLRenderer } from 'three';
+import { AxesHelper, Camera, CameraHelper, Group, OrthographicCamera, PerspectiveCamera, Raycaster, Scene, Vector2, WebGLRenderer } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import CameraWindow, { Dropdown } from './CameraWindow';
 import InfiniteGridHelper from './InfiniteGridHelper';
@@ -8,6 +8,7 @@ import './MultiView.scss';
 import RemoteThree from '@/core/remote/RemoteThree';
 import { ToolEvents, debugDispatcher } from '../global';
 import { dispose } from '../utils';
+import { mapLinear } from 'three/src/math/MathUtils';
 
 let currentRenderMode: RenderMode = 'Renderer';
 
@@ -19,12 +20,23 @@ scene.name = 'Debug Scene';
 let currentScene = new Scene();
 scene.add(currentScene);
 
+const helpersContainer = new Group();
+helpersContainer.name = 'helpers';
+scene.add(helpersContainer);
+
 const grid = new InfiniteGridHelper();
-scene.add(grid);
+helpersContainer.add(grid);
 
 const axisHelper = new AxesHelper(500);
 axisHelper.name = 'axisHelper';
-scene.add(axisHelper);
+helpersContainer.add(axisHelper);
+
+const interactionHelper = new AxesHelper(100);
+interactionHelper.name = 'interactionHelper';
+helpersContainer.add(interactionHelper);
+interactionHelper.visible = false;
+
+let useRaycaster = false;
 
 // Cameras
 
@@ -32,20 +44,28 @@ let tlCam = cameras.get('Debug')!;
 let trCam = cameras.get('Orthographic')!;
 let blCam = cameras.get('Front')!;
 let brCam = cameras.get('Top')!;
+let sceneSet = false;
 
 interface MultiViewProps {
   three: RemoteThree;
   mode?: MultiViewMode;
+  scenes: Map<string, any>;
+  onSceneSet?: (scene: Scene) => void;
+  onSceneUpdate?: (scene: Scene) => void;
 }
 
 export default function MultiView(props: MultiViewProps) {
   // States
-  const [mode, setMode] = useState<MultiViewMode>(props.mode !== undefined ? props.mode : 'Quad');
+  const [mode, setMode] = useState<MultiViewMode>(props.mode !== undefined ? props.mode : 'Single');
   const [renderer, setRenderer] = useState<WebGLRenderer | null>(null);
+  const [modeOpen, setModeOpen] = useState(false);
+  const [renderModeOpen, setRenderModeOpen] = useState(false);
+  const [interactionModeOpen, setInteractionModeOpen] = useState(false);
+  const [, setLastUpdate] = useState(Date.now());
 
   // References
   const canvasRef = useRef<HTMLCanvasElement>(null);
-
+  const containerRef = useRef<HTMLDivElement>(null);
   const tlWindow = useRef<HTMLDivElement>(null);
   const trWindow = useRef<HTMLDivElement>(null);
   const blWindow = useRef<HTMLDivElement>(null);
@@ -150,17 +170,40 @@ export default function MultiView(props: MultiViewProps) {
 
   // Event handling
   useEffect(() => {
-    const sceneUpdate = () => {
+    const sceneUpdate = (evt: any) => {
       dispose(currentScene);
       scene.remove(currentScene);
-      if (props.three.scene !== undefined) {
-        currentScene = props.three.scene;
+
+      const sceneClass = props.scenes.get(evt.value.name);
+      if (sceneClass !== undefined) {
+        const sceneInstance = new sceneClass();
+        if (props.onSceneSet !== undefined) props.onSceneSet(sceneInstance);
+        currentScene = sceneInstance;
+        props.three.scene = currentScene;
         scene.add(currentScene);
+        sceneSet = true;
       }
     };
+
+    const addCamera = (evt: any) => {
+      const data = evt.value;
+      const child = props.three.scene?.getObjectByProperty('uuid', data.uuid);
+      if (child !== undefined) cameras.set(data.name, child as Camera);
+      setLastUpdate(Date.now());
+    };
+
+    const removeCamera = (evt: any) => {
+      cameras.delete(evt.value.name);
+      setLastUpdate(Date.now());
+    };
+
     debugDispatcher.addEventListener(ToolEvents.SET_SCENE, sceneUpdate);
+    debugDispatcher.addEventListener(ToolEvents.ADD_CAMERA, addCamera);
+    debugDispatcher.addEventListener(ToolEvents.REMOVE_CAMERA, removeCamera);
     return () => {
       debugDispatcher.removeEventListener(ToolEvents.SET_SCENE, sceneUpdate);
+      debugDispatcher.removeEventListener(ToolEvents.ADD_CAMERA, addCamera);
+      debugDispatcher.removeEventListener(ToolEvents.REMOVE_CAMERA, removeCamera);
     };
   }, []);
 
@@ -277,6 +320,8 @@ export default function MultiView(props: MultiViewProps) {
         control.update();
       });
 
+      if (props.onSceneUpdate !== undefined && sceneSet) props.onSceneUpdate(currentScene);
+
       // Drawing
       renderer.clear();
       switch (mode) {
@@ -308,6 +353,123 @@ export default function MultiView(props: MultiViewProps) {
     };
   }, [mode, renderer]);
 
+  // Raycaster
+  useEffect(() => {
+    if (renderer !== null) {
+      const raycaster = new Raycaster();
+      const pointer = new Vector2();
+
+      const updateCamera = (mouseX: number, mouseY: number, hw: number, hh: number) => {
+        switch (mode) {
+          case 'Quad':
+            if (mouseX < hw) {
+              if (mouseY < hh) {
+                raycaster.setFromCamera(pointer, tlCam);
+              } else {
+                raycaster.setFromCamera(pointer, blCam);
+              }
+            } else {
+              if (mouseY < hh) {
+                raycaster.setFromCamera(pointer, trCam);
+              } else {
+                raycaster.setFromCamera(pointer, brCam);
+              }
+            }
+            break;
+          case 'Side by Side':
+            if (mouseX < hw) {
+              raycaster.setFromCamera(pointer, tlCam);
+            } else {
+              raycaster.setFromCamera(pointer, trCam);
+            }
+            break;
+          case 'Single':
+            raycaster.setFromCamera(pointer, tlCam);
+            break;
+          case 'Stacked':
+            if (mouseY < hh) {
+              raycaster.setFromCamera(pointer, tlCam);
+            } else {
+              raycaster.setFromCamera(pointer, trCam);
+            }
+            break;
+        }
+      };
+
+      const onMouseMove = (event: MouseEvent) => {
+        if (!useRaycaster) return;
+        const size = new Vector2();
+        renderer!.getSize(size);
+
+        const mouseX = Math.min(event.clientX, size.x);
+        const mouseY = Math.min(event.clientY, size.y);
+        pointer.x = mapLinear(mouseX, 0, size.x, -1, 1);
+        pointer.y = mapLinear(mouseY, 0, size.y, 1, -1);
+
+        const hw = size.x / 2;
+        const hh = size.y / 2;
+
+        const sideBySide = () => {
+          if (mouseX < hw) {
+            pointer.x = mapLinear(mouseX, 0, hw, -1, 1);
+          } else {
+            pointer.x = mapLinear(mouseX, hw, size.x, -1, 1);
+          }
+        };
+
+        const stacked = () => {
+          if (mouseY < hh) {
+            pointer.y = mapLinear(mouseY, 0, hh, 1, -1);
+          } else {
+            pointer.y = mapLinear(mouseY, hh, size.y, 1, -1);
+          }
+        };
+
+        // mapLinear
+        switch (mode) {
+          case 'Quad':
+            sideBySide();
+            stacked();
+            break;
+          case 'Side by Side':
+            sideBySide();
+            break;
+          case 'Stacked':
+            stacked();
+            stacked();
+            break;
+        }
+
+        updateCamera(mouseX, mouseY, hw, hh);
+        const intersects = raycaster.intersectObjects(currentScene.children);
+        if (intersects.length > 0) interactionHelper.position.copy(intersects[0].point);
+      };
+
+      const onClick = (event: MouseEvent) => {
+        if (!useRaycaster) return;
+
+        const size = new Vector2();
+        renderer!.getSize(size);
+        if (event.clientX >= size.x) return;
+
+        onMouseMove(event);
+
+        const intersects = raycaster.intersectObjects(currentScene.children);
+        if (intersects.length > 0) {
+          props.three.getObject(intersects[0].object.uuid);
+        }
+      };
+
+      const element = containerRef.current!;
+      element.addEventListener('mousemove', onMouseMove, false);
+      element.addEventListener('click', onClick, false);
+      return () => {
+        element.removeEventListener('mousemove', onMouseMove);
+        element.removeEventListener('click', onClick);
+      };
+    }
+  }, [mode, renderer]);
+
   // Camera names
   const cameraOptions: string[] = [];
   cameras.forEach((_: Camera, key: string) => {
@@ -318,7 +480,7 @@ export default function MultiView(props: MultiViewProps) {
     <div className='multiview'>
       <canvas ref={canvasRef} />
 
-      <div className={`cameras ${mode === 'Single' || mode === 'Stacked' ? 'single' : ''}`}>
+      <div className={`cameras ${mode === 'Single' || mode === 'Stacked' ? 'single' : ''}`} ref={containerRef}>
         {mode === 'Single' && (
           <>
             <CameraWindow camera={tlCam} options={cameraOptions} ref={tlWindow} onSelect={(value: string) => {
@@ -408,7 +570,14 @@ export default function MultiView(props: MultiViewProps) {
             killControls();
             setMode(value as MultiViewMode);
           }}
+          open={modeOpen}
+          onToggle={(value: boolean) => {
+            setModeOpen(value);
+            if (renderModeOpen) setRenderModeOpen(false);
+            if (interactionModeOpen) setInteractionModeOpen(false);
+          }}
         />
+
         {/* Render Mode */}
         <Dropdown
           index={renderOptions.indexOf(currentRenderMode)}
@@ -435,6 +604,31 @@ export default function MultiView(props: MultiViewProps) {
                 break;
             }
           }}
+          open={renderModeOpen}
+          onToggle={(value: boolean) => {
+            if (modeOpen) setModeOpen(false);
+            setRenderModeOpen(value);
+            if (interactionModeOpen) setInteractionModeOpen(false);
+          }}
+        />
+
+        {/* Interaction Mode */}
+        <Dropdown
+          index={0}
+          options={[
+            'Orbit Mode',
+            'Selection Mode',
+          ]}
+          onSelect={(value: string) => {
+            useRaycaster = value === 'Selection Mode';
+            interactionHelper.visible = useRaycaster;
+          }}
+          open={interactionModeOpen}
+          onToggle={(value: boolean) => {
+            if (modeOpen) setModeOpen(false);
+            if (renderModeOpen) setRenderModeOpen(false);
+            setInteractionModeOpen(value);
+          }}
         />
       </div>
     </div>

package/src/editor/scss/{_sceneHierarchy.scss → _sidePanel.scss}

@@ -9,7 +9,7 @@ $icon_ui: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rh
 $icon_utils: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAADFElEQVRYhe2YT0hVQRSHf7YwsUVoakFtKmhdUfhUeLSrrFVQEES72rip1EoscFlLK2jRpl21tT8QhFkLq13gIotqlaRPQ8SkgvRrcefiOO/eufN8LzPwwMV375w5893fnHPm+aoArWZb968BsmwNsFz7rwHzkgYltVdgnRpJZyU9lTQm6ZukUUl9GQwSkHS1AgUimwduAHUpvlnXLmCYYpsFDmXNT3p4AJhICDgC7C0RbgvwISHWGNASEiPpYdLbxvYJ2FQC4F1rbj/w1nx+ERoj6WE78NsDeSIw+E7gh5kzYJ5dM/dzwFbH/yDQ58ZJStAnkm570rY+sDDaTHEgqd88GzJ/ayWdk7Td3Ock3Zd0OrRINgKjKQq+ApoCFOw0/j8tteqAaSvWd6LtjgtyKkRBSZqRdFLS+4SxnKQBSU0ZCsaHfLXlOy3plqRxc79BUTtrNPe/QhWU9cbHgQ7gTYKSm1Pm5YAvlm+bM15PlOvXWSwcgGdurFJaRpOBsu010Oj4tVhbBtAFVHni3rR8z5QDKKNYEmSsZI6lPbTbmZ8HdgPbgMNE1R3bMFBbLqCABgNl20vgmAN30ZnXRXQqzbPYfmIbAXYkrbccwLTtts1VrjvFbxa4Q3GalA0Yb/fzALgua2zcjHcDp0hRrVKAAo4CCx64XmtsksDzt1KAbitx4a5YY1+BPctZZ7lwzfgLwlZuxQFb8LcSW7k5FlNgRbY4R5ToIXATREp3OM9a/xZgjqUnhG9bZ4D91linNTZpYlUU0IVzlbMBIGrE5z0+hVAlQ3POt63uwnZ+XvL4ThCQk5VUbhLYR1StNmSPM+eCM8erZBacr1rtE8JVw21Dlz0vVsCTk2lwDcBnE2CB4oKwz9YCyVvltqOkLw9xC/pIyj9jaYBHrMC9Hris3pYzPmmQPdZYeymAeWviPaAmAS4oyT1KrjexY8uXAlgNPLImP2BpnwtuExakXWxXHbjHZs2SiqQeGKTYpgKVy9ru2IbMWiVXcQxpfy1/t0y4+Go2MWJ7SMYvFVWw9hNwWbYGWK6tesA/ap/6uHJWeiAAAAAASUVORK5CYII=');
 $icon_world: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEZklEQVRYhe2YW4iVVRTHf4465oSaUNlUjo7SmCBEPVipTWYXoV7qoejykhRCEVQP9pAFSWVBPdRTMNRLWGRaFr2FSShmEQ1KzQymUhpeMky6ONbcfj3sdZpvvvnO8Zy5lA/+YcP51jpr7bVv/7X2nqByNqPu/w7gTDgX4GgxaYR2DcDlwC3AUmAh0ARMDf1fwGGgE9gFfAb8AJyquSe1ljZFXa6+o/Y4FD3qvmh5neomdYXaUEuftQQ3T31d7Y8O96tdal98P69eos5SXwhZn7pb7cgE2qa2jHWAy9Svo4Nf1VfUG9VPQvauWp/5f726MXSb1WvVF9XjIftWvXWsArxdPRSOt5uWCfV+dUDtVJsL7K5Q98aM3xuyVnVr+Dqi3jHaAJepx8Lhe2pTyJvVn6PzVRXsHw7bw+rckDWqb4b8mHrbSAOcp7aHozZ1Wka3NuQfqHUVfExUt8R/n8rI69XXQt6lLijnoxzNTAEeA64GeoDzgbVBI5OBu+J/FwPrg3aK0A1cGL8fB+YAfUFDF4T+SmAN8ATwZ97BBC3MxdeTuGtqOBSYkGklgu/NyIpgtMnxPRDfpd9kdCuBT/MOimawHlgdwW0DPs918AAwH9gK7MjoyqEHWA6sAPYBGzMD6gWWRHCPhL/TQ4dYfPpOxSFYXKDvVE+YaKZamrpZPWmil7xuoXrQxAiL8vqiXHwTaU99BbTndItJe+Zoga4S2oFjpJR4TU7XBXwZs7oyb1gU4DKgH/iCtP+yaAlH+4E/agjwJCkXTwwfeewgLXdrNQEuAn6neIYaSfvwQA3BlXCAdEAaC3TtpEFclVcUHZIm0sauC2f1Ie8lLZGkmbiI8vSSR3fYDYSPyzJ990YfvQxS0r8oopkTJI76jbTUpRMnMI3Ekd2k0qnaenKAxKUNwN+k7ZH1Wxd9nswHWWvBWo7vxg1FSyzwC/AgsIfBJe4DngNWAW1UziB5dAPPAo8CbwPrGLrELcAGYEY1AR4C5pKW5WhOt5c0iwMxiFpQykBdpGo7i7kkwj+eNypa4g5gOsP5ChKX1ZG4sFbMjyDzgyb6mgl8V02AO0mndAnDZ/h70hZoJg2iWswMm37SKuRxA2kGtw/TFKSelipTXesIUt3uWlNd0R78EXifdEheYnixMDlm5BlqKxZmkChqHcOLhdnAxxQkgErl1jbgPM7CcgtS6nkDeDIcbQZ+IpVgk4A7gUtJBcVOKhesS0n5/QjwEYMF6yzg7gjwLVLuLxhi+X3TrH4TZXmbOj2jezrkZyr5JzlY8q/JyKsu+UdzaToaG/uhCvarw/agOscxvjSVWvbaucPBa+d9plvdXlORm7dbELo+9Z6Qjfm1MzuT2Yv7q9HZlpBtdOjFfar6Yeg2qdep6x2ni3upFT19dDj49PGy6emjMQZg6PaY9lkJ4/L0UWqlx6MNDn8g6o2g98fvPEb0eFSOB8+Eoue32Rm6OR200hn0sY0RPr+NNMD/DGf9C+u5AEeLfwBkrdN1844nCgAAAABJRU5ErkJggg==');
 
-#SceneHierarchy {
+#SidePanel {
   background-color: #0d0d0d;
   border: 1px solid #111;
   max-height: 100%;

package/src/editor/scss/index.scss

@@ -1,6 +1,6 @@
 @import 'theme';
 @import 'debug';
-@import 'sceneHierarchy';
+@import 'sidePanel';
 
 .editor {
   font-family: Roboto Mono, Source Code Pro, Menlo, Courier, monospace;

package/src/editor/{sceneHierarchy/SceneHierarchy.tsx → sidePanel/SidePanel.tsx}

@@ -3,17 +3,17 @@ import { Component, ReactNode } from 'react';
 // Models
 import { debugDispatcher, ToolEvents } from '../global';
 // Components
-import '../scss/_sceneHierarchy.scss';
+import '../scss/_sidePanel.scss';
 import Accordion from './Accordion';
 import ContainerObject from './ContainerObject';
 import Inspector from './inspector/Inspector';
-import { SceneHierarchyState } from './types';
+import { SidePanelState } from './types';
 import RemoteThree from '@/core/remote/RemoteThree';
 
-export default class SceneHierarchy extends Component<SceneHierarchyState> {
+export default class SidePanel extends Component<SidePanelState> {
   private three: RemoteThree;
 
-  constructor(props: SceneHierarchyState) {
+  constructor(props: SidePanelState) {
     super(props);
     this.state = {
       scene: props.scene !== undefined ? props.scene : null,
@@ -30,7 +30,7 @@ export default class SceneHierarchy extends Component<SceneHierarchyState> {
     const hasScene = this.componentState.scene !== null;
     const HierarchyName = 'Hierarchy - ' + (hasScene ? `${this.componentState.scene?.name}` : 'No Scene');
     return (
-      <div id="SceneHierarchy" key="SceneHierarchy">
+      <div id="SidePanel" key="SidePanel">
         {(
           <>
             <Accordion label={HierarchyName} open={true}>
@@ -41,9 +41,7 @@ export default class SceneHierarchy extends Component<SceneHierarchyState> {
               </>
             </Accordion>
 
-            <Accordion label='Inspector'>
-              <Inspector key="Inspector" three={this.three} />
-            </Accordion>
+            <Inspector three={this.three} />
           </>
         )}
     </div>
@@ -60,7 +58,7 @@ export default class SceneHierarchy extends Component<SceneHierarchyState> {
 
   // Getters / Setters
 
-  get componentState(): SceneHierarchyState {
-    return this.state as SceneHierarchyState;
+  get componentState(): SidePanelState {
+    return this.state as SidePanelState;
   }
 }

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

@@ -0,0 +1,111 @@
+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 InspectAnimation from "./utils/InspectAnimation";
+
+const defaultObject: 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,
+};
+
+export default function Inspector(props: CoreComponentProps) {
+  const [currentObject, setCurrentObject] = useState<RemoteObject>(defaultObject);
+
+  useEffect(() => {
+    function onSelectItem(evt: any) {
+      const obj = evt.value as RemoteObject;
+      setCurrentObject(obj);
+    }
+
+    function setScene() {
+      setCurrentObject(defaultObject);
+    }
+
+    debugDispatcher.addEventListener(ToolEvents.SET_SCENE, setScene);
+    debugDispatcher.addEventListener(ToolEvents.SET_OBJECT, onSelectItem);
+    return () => {
+      debugDispatcher.removeEventListener(ToolEvents.SET_SCENE, setScene);
+      debugDispatcher.removeEventListener(ToolEvents.SET_OBJECT, onSelectItem);
+    };
+  }, []);
+
+  const objType = currentObject.type.toLowerCase();
+
+  return (
+    <Accordion label='Inspector' key='Inspector'>
+      <div id="Inspector" className={props.class}>
+        {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/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}/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