@tomorrowevening/hermes 0.0.9 → 0.0.12

package/src/editor/{sceneHierarchy/inspector/MultiView → multiView}/MultiView.tsx

@@ -1,28 +1,67 @@
 import { useEffect, useRef, useState } from 'react';
-import { AxesHelper, Camera, CameraHelper, OrthographicCamera, PerspectiveCamera, Scene, Vector2, 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';
-import { cameraOptions, cameras, controls, helpers, ModeOptions, MultiViewMode, normalsMaterial, RenderMode, renderOptions, uvMaterial, wireframeMaterial } from './MultiViewData';
+import { cameras, controls, depthMaterial, helpers, ModeOptions, MultiViewMode, normalsMaterial, RenderMode, renderOptions, uvMaterial, wireframeMaterial } from './MultiViewData';
 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 = 'Default';
+let currentRenderMode: RenderMode = 'Renderer';
+
+// Scene
 
 const scene = new Scene();
+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();
+helpersContainer.add(grid);
+
+const axisHelper = new AxesHelper(500);
+axisHelper.name = 'axisHelper';
+helpersContainer.add(axisHelper);
+
+const interactionHelper = new AxesHelper(100);
+interactionHelper.name = 'interactionHelper';
+helpersContainer.add(interactionHelper);
+interactionHelper.visible = false;
+
+let useRaycaster = false;
+
+// Cameras
+
 let tlCam = cameras.get('Debug')!;
 let trCam = cameras.get('Orthographic')!;
 let blCam = cameras.get('Front')!;
 let brCam = cameras.get('Top')!;
 
 interface MultiViewProps {
-  scene: Scene;
-  renderer: WebGLRenderer;
-  cameras: Camera[];
+  three: RemoteThree;
   mode?: MultiViewMode;
 }
+
 export default function MultiView(props: MultiViewProps) {
+  // States
   const [mode, setMode] = useState<MultiViewMode>(props.mode !== undefined ? props.mode : 'Quad');
-
+  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);
@@ -43,6 +82,8 @@ export default function MultiView(props: MultiViewProps) {
 
     // New items
     const control = new OrbitControls(camera, element);
+    control.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
+    control.dampingFactor = 0.05;
     switch (camera.name) {
       case 'Top':
       case 'Bottom':
@@ -110,24 +151,57 @@ export default function MultiView(props: MultiViewProps) {
     }
   };
 
-  // Add scene + helpers
+  // Renderer
   useEffect(() => {
-    scene.name = 'Debug Scene';
-    scene.add(props.scene);
+    const instance = new WebGLRenderer({
+      canvas: canvasRef.current!,
+      stencil: false
+    });
+    instance.autoClear = false;
+    instance.shadowMap.enabled = true;
+    instance.setPixelRatio(devicePixelRatio);
+    instance.setClearColor(0x000000);
+    setRenderer(instance);
+  }, []);
 
-    const grid = new InfiniteGridHelper();
-    scene.add(grid);
+  // Event handling
+  useEffect(() => {
+    const sceneUpdate = () => {
+      dispose(currentScene);
+      scene.remove(currentScene);
+      if (props.three.scene !== undefined) {
+        currentScene = props.three.scene;
+        scene.add(currentScene);
+      }
+    };
+
+    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 axisHelper = new AxesHelper(500);
-    axisHelper.name = 'axisHelper';
-    scene.add(axisHelper);
+    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);
+    };
   }, []);
 
   // Resize handling + drawing
   useEffect(() => {
-    const size = props.renderer.getSize(new Vector2());
-    let width = size.x;
-    let height = size.y;
+    if (renderer === null) return;
+    let width = window.innerWidth;
+    let height = window.innerHeight;
     let bw = Math.floor(width / 2);
     let bh = Math.floor(height / 2);
     let raf = -1;
@@ -137,6 +211,7 @@ export default function MultiView(props: MultiViewProps) {
       height = window.innerHeight;
       bw = Math.floor(width / 2);
       bh = Math.floor(height / 2);
+      renderer.setSize(width, height);
 
       let cw = width;
       let ch = height;
@@ -171,29 +246,29 @@ export default function MultiView(props: MultiViewProps) {
     };
 
     const drawSingle = () => {
-      props.renderer.setViewport(0, 0, width, height);
-      props.renderer.setScissor(0, 0, width, height);
-      props.renderer.render(scene, tlCam);
+      renderer.setViewport(0, 0, width, height);
+      renderer.setScissor(0, 0, width, height);
+      renderer.render(scene, tlCam);
     };
 
     const drawDouble = () => {
       if (mode === 'Side by Side') {
-        props.renderer.setViewport(0, 0, bw, height);
-        props.renderer.setScissor(0, 0, bw, height);
-        props.renderer.render(scene, tlCam);
+        renderer.setViewport(0, 0, bw, height);
+        renderer.setScissor(0, 0, bw, height);
+        renderer.render(scene, tlCam);
 
-        props.renderer.setViewport(bw, 0, bw, height);
-        props.renderer.setScissor(bw, 0, bw, height);
-        props.renderer.render(scene, trCam);
+        renderer.setViewport(bw, 0, bw, height);
+        renderer.setScissor(bw, 0, bw, height);
+        renderer.render(scene, trCam);
       } else {
         const y = height - bh;
-        props.renderer.setViewport(0, y, width, bh);
-        props.renderer.setScissor(0, y, width, bh);
-        props.renderer.render(scene, tlCam);
+        renderer.setViewport(0, y, width, bh);
+        renderer.setScissor(0, y, width, bh);
+        renderer.render(scene, tlCam);
 
-        props.renderer.setViewport(0, 0, width, bh);
-        props.renderer.setScissor(0, 0, width, bh);
-        props.renderer.render(scene, trCam);
+        renderer.setViewport(0, 0, width, bh);
+        renderer.setScissor(0, 0, width, bh);
+        renderer.render(scene, trCam);
       }
     };
 
@@ -204,29 +279,29 @@ export default function MultiView(props: MultiViewProps) {
 
       // TL
       x = 0;
-      props.renderer.setViewport(x, y, bw, bh);
-      props.renderer.setScissor(x, y, bw, bh);
-      props.renderer.render(scene, tlCam);
+      renderer.setViewport(x, y, bw, bh);
+      renderer.setScissor(x, y, bw, bh);
+      renderer.render(scene, tlCam);
 
       // TR
       x = bw;
-      props.renderer.setViewport(x, y, bw, bh);
-      props.renderer.setScissor(x, y, bw, bh);
-      props.renderer.render(scene, trCam);
+      renderer.setViewport(x, y, bw, bh);
+      renderer.setScissor(x, y, bw, bh);
+      renderer.render(scene, trCam);
 
       y = 0;
 
       // BL
       x = 0;
-      props.renderer.setViewport(x, y, bw, bh);
-      props.renderer.setScissor(x, y, bw, bh);
-      props.renderer.render(scene, blCam);
+      renderer.setViewport(x, y, bw, bh);
+      renderer.setScissor(x, y, bw, bh);
+      renderer.render(scene, blCam);
 
       // BR
       x = bw;
-      props.renderer.setViewport(x, y, bw, bh);
-      props.renderer.setScissor(x, y, bw, bh);
-      props.renderer.render(scene, brCam);
+      renderer.setViewport(x, y, bw, bh);
+      renderer.setScissor(x, y, bw, bh);
+      renderer.render(scene, brCam);
     };
 
     const onUpdate = () => {
@@ -234,10 +309,9 @@ export default function MultiView(props: MultiViewProps) {
       controls.forEach((control: OrbitControls) => {
         control.update();
       });
-      props.scene['update']();
 
       // Drawing
-      props.renderer.clear();
+      renderer.clear();
       switch (mode) {
         case 'Single':
           drawSingle();
@@ -265,16 +339,136 @@ export default function MultiView(props: MultiViewProps) {
       cancelAnimationFrame(raf);
       raf = -1;
     };
-  }, [mode]);
+  }, [mode, renderer]);
 
-  props.cameras.forEach((camera: Camera) => {
-    cameras.set(camera.name, camera);
-    cameraOptions.push(camera.name);
+  // 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) => {
+    cameraOptions.push(key);
   });
 
   return (
     <div className='multiview'>
-      <div className={`cameras ${mode === 'Single' || mode === 'Stacked' ? 'single' : ''}`}>
+      <canvas ref={canvasRef} />
+
+      <div className={`cameras ${mode === 'Single' || mode === 'Stacked' ? 'single' : ''}`} ref={containerRef}>
         {mode === 'Single' && (
           <>
             <CameraWindow camera={tlCam} options={cameraOptions} ref={tlWindow} onSelect={(value: string) => {
@@ -364,29 +558,65 @@ 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={0}
+          index={renderOptions.indexOf(currentRenderMode)}
           options={renderOptions}
           onSelect={(value: string) => {
             if (value === currentRenderMode) return;
             currentRenderMode = value as RenderMode;
             switch (currentRenderMode) {
-              case 'Default':
-                scene.overrideMaterial = null;
+              case 'Depth':
+                scene.overrideMaterial = depthMaterial;
                 break;
               case 'Normals':
                 scene.overrideMaterial = normalsMaterial;
                 break;
+              default:
+              case 'Renderer':
+                scene.overrideMaterial = null;
+                break;
               case 'Wireframe':
                 scene.overrideMaterial = wireframeMaterial;
                 break;
-                case 'UVs':
+              case 'UVs':
                 scene.overrideMaterial = uvMaterial;
                 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/{sceneHierarchy/inspector/MultiView → multiView}/MultiViewData.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';
 
@@ -15,16 +15,6 @@ export const ModeOptions: MultiViewMode[] = [
 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 const cameraOptions: string[] = [
-  'Top',
-  'Bottom',
-  'Left',
-  'Right',
-  'Front',
-  'Back',
-  'Orthographic',
-  'Debug',
-];
 
 export function createOrtho(name: string, position: Vector3) {
   const camera = new OrthographicCamera(-100, 100, 100, -100, 50, 3000);
@@ -51,17 +41,19 @@ cameras.set('Debug', debugCamera);
 
 // Rendering
 
-export type RenderMode = 'Default' | 'Normals' | 'Wireframe' | 'UVs';
+export type RenderMode = 'Depth' | 'Normals' | 'Renderer' | 'UVs' | 'Wireframe';
 export const renderOptions: RenderMode[] = [
-  'Default',
+  'Renderer',
+  'Depth',
   'Normals',
-  'Wireframe',
   '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
 });
-export const uvMaterial = new UVMaterial();

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

@@ -0,0 +1,64 @@
+// Libs
+import { Component, ReactNode } from 'react';
+// Models
+import { debugDispatcher, ToolEvents } from '../global';
+// Components
+import '../scss/_sidePanel.scss';
+import Accordion from './Accordion';
+import ContainerObject from './ContainerObject';
+import Inspector from './inspector/Inspector';
+import { SidePanelState } from './types';
+import RemoteThree from '@/core/remote/RemoteThree';
+
+export default class SidePanel extends Component<SidePanelState> {
+  private three: RemoteThree;
+
+  constructor(props: SidePanelState) {
+    super(props);
+    this.state = {
+      scene: props.scene !== undefined ? props.scene : null,
+    };
+    this.three = props.three;
+    debugDispatcher.addEventListener(ToolEvents.SET_SCENE, this.setScene);
+  }
+
+  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}` : 'No Scene');
+    return (
+      <div id="SidePanel" key="SidePanel">
+        {(
+          <>
+            <Accordion label={HierarchyName} open={true}>
+              <>
+                {hasScene && (
+                  <ContainerObject child={this.componentState.scene!} three={this.three} />
+                )}
+              </>
+            </Accordion>
+
+            <Inspector three={this.three} />
+          </>
+        )}
+    </div>
+    );
+  }
+
+  // Private
+
+  private setScene = (evt: any) => {
+    this.setState(() => ({
+      scene: evt.value
+    }));
+  };
+
+  // Getters / Setters
+
+  get componentState(): SidePanelState {
+    return this.state as SidePanelState;
+  }
+}