@tomorrowevening/hermes 0.0.34 → 0.0.35

package/src/editor/multiView/MultiView.tsx

@@ -1,636 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-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 { 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 = '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')!;
-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 : '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);
-  const brWindow = useRef<HTMLDivElement>(null);
-
-  const createControls = (camera: Camera, element: HTMLDivElement) => {
-    // Previous items
-    const prevControls = controls.get(camera.name);
-    if (prevControls !== undefined) prevControls.dispose();
-    controls.delete(camera.name);
-
-    const prevHelper = helpers.get(camera.name);
-    if (prevHelper !== undefined) {
-      scene.remove(prevHelper);
-      prevHelper.dispose();
-    }
-    helpers.delete(camera.name);
-
-    // 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':
-      case 'Left':
-      case 'Right':
-      case 'Front':
-      case 'Back':
-        control.enableRotate = false;
-        break;
-    }
-    controls.set(camera.name, control);
-    
-    if (camera instanceof PerspectiveCamera) {
-      const helper = new CameraHelper(camera);
-      helpers.set(camera.name, helper);
-      scene.add(helper);
-    }
-  };
-
-  const clearCamera = (camera: Camera) => {
-    const helper = helpers.get(camera.name);
-    if (helper !== undefined) {
-      scene.remove(helper);
-      helper.dispose();
-      helpers.delete(camera.name);
-    }
-    const control = controls.get(camera.name);
-    if (control !== undefined) {
-      control.dispose();
-      controls.delete(camera.name);
-    }
-  };
-
-  const killControls = () => {
-    controls.forEach((value: OrbitControls, key: string) => {
-      value.dispose();
-      const helper = helpers.get(key);
-      if (helper !== undefined) {
-        scene.remove(helper);
-        helper.dispose();
-      }
-      helpers.delete(key);
-      controls.delete(key);
-    });
-    controls.clear();
-    helpers.clear();
-  };
-
-  const assignControls = () => {
-    switch (mode) {
-      case 'Single':
-        createControls(tlCam, tlWindow.current!);
-        break;
-      case 'Side by Side':
-      case 'Stacked':
-        createControls(tlCam, tlWindow.current!);
-        createControls(trCam, trWindow.current!);
-        break;
-      case 'Quad':
-        createControls(tlCam, tlWindow.current!);
-        createControls(trCam, trWindow.current!);
-        createControls(blCam, blWindow.current!);
-        createControls(brCam, brWindow.current!);
-        break;
-    }
-  };
-
-  // Renderer
-  useEffect(() => {
-    const instance = new WebGLRenderer({
-      canvas: canvasRef.current!,
-      stencil: false
-    });
-    instance.autoClear = false;
-    instance.shadowMap.enabled = true;
-    instance.setPixelRatio(devicePixelRatio);
-    instance.setClearColor(0x000000);
-    setRenderer(instance);
-  }, []);
-
-  // Event handling
-  useEffect(() => {
-    const sceneUpdate = (evt: any) => {
-      dispose(currentScene);
-      scene.remove(currentScene);
-
-      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);
-    };
-  }, []);
-
-  // Resize handling + drawing
-  useEffect(() => {
-    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;
-
-    const onResize = () => {
-      width = window.innerWidth - 300;
-      height = window.innerHeight;
-      bw = Math.floor(width / 2);
-      bh = Math.floor(height / 2);
-      renderer.setSize(width, height);
-
-      let cw = width;
-      let ch = height;
-      switch (mode) {
-        case 'Side by Side':
-          cw = bw;
-          ch = height;
-          break;
-        case 'Stacked':
-          cw = width;
-          ch = bh;
-          break;
-        case 'Quad':
-          cw = bw;
-          ch = bh;
-          break;
-      }
-
-      cameras.forEach((camera) => {
-        if (camera instanceof OrthographicCamera) {
-          camera.left = cw / -2;
-          camera.right = cw / 2;
-          camera.top = ch / 2;
-          camera.bottom = ch / -2;
-          camera.updateProjectionMatrix();
-        } else if (camera instanceof PerspectiveCamera) {
-          camera.aspect = cw / ch;
-          camera.updateProjectionMatrix();
-          helpers.get(camera.name)?.update();
-        }
-      });
-    };
-
-    const drawSingle = () => {
-      renderer.setViewport(0, 0, width, height);
-      renderer.setScissor(0, 0, width, height);
-      renderer.render(scene, tlCam);
-    };
-
-    const drawDouble = () => {
-      if (mode === 'Side by Side') {
-        renderer.setViewport(0, 0, bw, height);
-        renderer.setScissor(0, 0, bw, height);
-        renderer.render(scene, tlCam);
-
-        renderer.setViewport(bw, 0, bw, height);
-        renderer.setScissor(bw, 0, bw, height);
-        renderer.render(scene, trCam);
-      } else {
-        const y = height - bh;
-        renderer.setViewport(0, y, width, bh);
-        renderer.setScissor(0, y, width, bh);
-        renderer.render(scene, tlCam);
-
-        renderer.setViewport(0, 0, width, bh);
-        renderer.setScissor(0, 0, width, bh);
-        renderer.render(scene, trCam);
-      }
-    };
-
-    const drawQuad = () => {
-      let x = 0;
-      let y = 0;
-      y = height - bh;
-
-      // TL
-      x = 0;
-      renderer.setViewport(x, y, bw, bh);
-      renderer.setScissor(x, y, bw, bh);
-      renderer.render(scene, tlCam);
-
-      // TR
-      x = bw;
-      renderer.setViewport(x, y, bw, bh);
-      renderer.setScissor(x, y, bw, bh);
-      renderer.render(scene, trCam);
-
-      y = 0;
-
-      // BL
-      x = 0;
-      renderer.setViewport(x, y, bw, bh);
-      renderer.setScissor(x, y, bw, bh);
-      renderer.render(scene, blCam);
-
-      // BR
-      x = bw;
-      renderer.setViewport(x, y, bw, bh);
-      renderer.setScissor(x, y, bw, bh);
-      renderer.render(scene, brCam);
-    };
-
-    const onUpdate = () => {
-      // Updates
-      controls.forEach((control: OrbitControls) => {
-        control.update();
-      });
-
-      if (props.onSceneUpdate !== undefined && sceneSet) props.onSceneUpdate(currentScene);
-
-      // Drawing
-      renderer.clear();
-      switch (mode) {
-        case 'Single':
-          drawSingle();
-          break;
-        case 'Side by Side':
-        case 'Stacked':
-          drawDouble();
-          break;
-        case 'Quad':
-          drawQuad();
-          break;
-      }
-
-      raf = requestAnimationFrame(onUpdate);
-    };
-
-    // Start rendering
-    assignControls();
-    window.addEventListener('resize', onResize);
-    onResize();
-    onUpdate();
-
-    return () => {
-      window.removeEventListener('resize', onResize);
-      cancelAnimationFrame(raf);
-      raf = -1;
-    };
-  }, [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) => {
-    cameraOptions.push(key);
-  });
-
-  return (
-    <div className='multiview'>
-      <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) => {
-              controls.get(tlCam.name)?.dispose();
-              const camera = cameras.get(value);
-              if (camera !== undefined) {
-                clearCamera(tlCam);
-                tlCam = camera;
-                createControls(camera, tlWindow.current!);
-              }
-            }} />
-          </>
-        )}
-
-        {(mode === 'Side by Side' || mode === 'Stacked') && (
-          <>
-            <CameraWindow camera={tlCam} options={cameraOptions} ref={tlWindow} onSelect={(value: string) => {
-              controls.get(tlCam.name)?.dispose();
-              const camera = cameras.get(value);
-              if (camera !== undefined) {
-                clearCamera(tlCam);
-                tlCam = camera;
-                createControls(camera, tlWindow.current!);
-              }
-            }} />
-            <CameraWindow camera={trCam} options={cameraOptions} ref={trWindow} onSelect={(value: string) => {
-              controls.get(trCam.name)?.dispose();
-              const camera = cameras.get(value);
-              if (camera !== undefined) {
-                clearCamera(trCam);
-                trCam = camera;
-                createControls(camera, trWindow.current!);
-              }
-            }} />
-          </>
-        )}
-
-        {mode === 'Quad' && (
-          <>
-            <CameraWindow camera={tlCam} options={cameraOptions} ref={tlWindow} onSelect={(value: string) => {
-              controls.get(tlCam.name)?.dispose();
-              const camera = cameras.get(value);
-              if (camera !== undefined) {
-                clearCamera(tlCam);
-                tlCam = camera;
-                createControls(camera, tlWindow.current!);
-              }
-            }} />
-            <CameraWindow camera={trCam} options={cameraOptions} ref={trWindow} onSelect={(value: string) => {
-              controls.get(trCam.name)?.dispose();
-              const camera = cameras.get(value);
-              if (camera !== undefined) {
-                clearCamera(trCam);
-                trCam = camera;
-                createControls(camera, trWindow.current!);
-              }
-            }} />
-            <CameraWindow camera={blCam} options={cameraOptions} ref={blWindow} onSelect={(value: string) => {
-              controls.get(blCam.name)?.dispose();
-              const camera = cameras.get(value);
-              if (camera !== undefined) {
-                clearCamera(blCam);
-                blCam = camera;
-                createControls(camera, blWindow.current!);
-              }
-            }} />
-            <CameraWindow camera={brCam} options={cameraOptions} ref={brWindow} onSelect={(value: string) => {
-              controls.get(brCam.name)?.dispose();
-              const camera = cameras.get(value);
-              if (camera !== undefined) {
-                clearCamera(brCam);
-                brCam = camera;
-                createControls(camera, brWindow.current!);
-              }
-            }} />
-          </>
-        )}
-      </div>
-
-      <div className='settings'>
-        {/* Mode */}
-        <Dropdown
-          index={ModeOptions.indexOf(mode)}
-          options={ModeOptions}
-          onSelect={(value: string) => {
-            if (value === mode) return;
-            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)}
-          options={renderOptions}
-          onSelect={(value: string) => {
-            if (value === currentRenderMode) return;
-            currentRenderMode = value as RenderMode;
-            switch (currentRenderMode) {
-              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':
-                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/multiView/MultiViewData.ts

@@ -1,59 +0,0 @@
-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
-});