@tomorrowevening/hermes 0.0.8 → 0.0.9

package/src/editor/sceneHierarchy/inspector/MultiView/MultiView.tsx

@@ -1,69 +1,25 @@
 import { useEffect, useRef, useState } from 'react';
-import { AxesHelper, Camera, CameraHelper, MeshBasicMaterial, MeshNormalMaterial, OrthographicCamera, PerspectiveCamera, Scene, Vector2, Vector3, WebGLRenderer } from 'three';
+import { AxesHelper, Camera, CameraHelper, OrthographicCamera, PerspectiveCamera, 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 './MultiView.scss';
 
-type MultiViewMode = 'Single' | 'Side by Side' | 'Stacked' |'Quad';
-const ModeOptions: MultiViewMode[] = [
-  'Single',
-  'Side by Side',
-  'Stacked',
-  'Quad'
-];
+let currentRenderMode: RenderMode = 'Default';
+
+const scene = new Scene();
+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[];
   mode?: MultiViewMode;
 }
-
-const cameras: Map<string, Camera> = new Map();
-const controls: Map<string, OrbitControls> = new Map();
-const helpers: Map<string, CameraHelper> = new Map();
-
-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;
-}
-
-// Cameras
-
-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));
-
-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);
-
-type RenderMode = 'Default' | 'Normals' | 'Wireframe';
-let currentRenderMode: RenderMode = 'Default';
-const renderOptions: RenderMode[] = [
-  'Default',
-  'Normals',
-  'Wireframe',
-];
-const normalsMaterial = new MeshNormalMaterial();
-const wireframeMaterial = new MeshBasicMaterial({
-  opacity: 0.33,
-  transparent: true,
-  wireframe: true
-});
-
-const scene = new Scene();
-
 export default function MultiView(props: MultiViewProps) {
   const [mode, setMode] = useState<MultiViewMode>(props.mode !== undefined ? props.mode : 'Quad');
 
@@ -72,11 +28,6 @@ export default function MultiView(props: MultiViewProps) {
   const blWindow = useRef<HTMLDivElement>(null);
   const brWindow = useRef<HTMLDivElement>(null);
 
-  let tlCam = cameras.get('Debug')!;
-  let trCam = cameras.get('Orthographic')!;
-  let blCam = cameras.get('Front')!;
-  let brCam = cameras.get('Top')!;
-
   const createControls = (camera: Camera, element: HTMLDivElement) => {
     // Previous items
     const prevControls = controls.get(camera.name);
@@ -316,16 +267,6 @@ export default function MultiView(props: MultiViewProps) {
     };
   }, [mode]);
 
-  const cameraOptions: string[] = [
-    'Top',
-    'Bottom',
-    'Left',
-    'Right',
-    'Front',
-    'Back',
-    'Orthographic',
-    'Debug',
-  ];
   props.cameras.forEach((camera: Camera) => {
     cameras.set(camera.name, camera);
     cameraOptions.push(camera.name);
@@ -441,6 +382,9 @@ export default function MultiView(props: MultiViewProps) {
               case 'Wireframe':
                 scene.overrideMaterial = wireframeMaterial;
                 break;
+                case 'UVs':
+                scene.overrideMaterial = uvMaterial;
+                break;
             }
           }}
         />

package/src/editor/sceneHierarchy/inspector/MultiView/MultiViewData.ts

@@ -0,0 +1,67 @@
+import { Camera, CameraHelper, MeshBasicMaterial, 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 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);
+  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 = 'Default' | 'Normals' | 'Wireframe' | 'UVs';
+export const renderOptions: RenderMode[] = [
+  'Default',
+  'Normals',
+  'Wireframe',
+  'UVs',
+];
+export const normalsMaterial = new MeshNormalMaterial();
+export const wireframeMaterial = new MeshBasicMaterial({
+  opacity: 0.33,
+  transparent: true,
+  wireframe: true
+});
+export const uvMaterial = new UVMaterial();

package/src/editor/sceneHierarchy/inspector/MultiView/UVMaterial.ts

@@ -0,0 +1,55 @@
+import { ShaderMaterial } from "three";
+
+const vertex = `#include <common>
+#include <batching_pars_vertex>
+#include <uv_pars_vertex>
+#include <color_pars_vertex>
+#include <morphtarget_pars_vertex>
+#include <skinning_pars_vertex>
+#include <logdepthbuf_pars_vertex>
+#include <clipping_planes_pars_vertex>
+
+void main() {
+	#include <uv_vertex>
+	#include <color_vertex>
+	#include <morphcolor_vertex>
+	#include <batching_vertex>
+
+	#if defined ( USE_SKINNING )
+		#include <beginnormal_vertex>
+		#include <morphnormal_vertex>
+		#include <skinbase_vertex>
+		#include <skinnormal_vertex>
+		#include <defaultnormal_vertex>
+	#endif
+
+	#include <begin_vertex>
+	#include <morphtarget_vertex>
+	#include <skinning_vertex>
+	#include <project_vertex>
+	#include <logdepthbuf_vertex>
+	#include <clipping_planes_vertex>
+	#include <worldpos_vertex>
+}`;
+
+const fragment = `
+#include <common>
+#include <uv_pars_fragment>
+#include <clipping_planes_pars_fragment>
+
+void main() {
+	#include <clipping_planes_fragment>
+	gl_FragColor = vec4(vec3(vUv, 0.0), 1.0);
+}`;
+
+export default class UVMaterial extends ShaderMaterial {
+  constructor() {
+    super({
+      defines: {
+        USE_UV: ''
+      },
+      vertexShader: vertex,
+      fragmentShader: fragment,
+    });
+  }
+}

package/src/index.ts

@@ -15,6 +15,8 @@ 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';
@@ -22,5 +24,4 @@ export { default as ContainerObject } from './editor/sceneHierarchy/ContainerObj
 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/sceneHierarchy/inspector/MultiView/InfiniteGridHelper';
 export { default as Editor } from './editor/Editor';

package/types/editor/sceneHierarchy/inspector/MultiView/MultiView.d.ts

@@ -1,6 +1,6 @@
 import { Camera, Scene, WebGLRenderer } from 'three';
+import { MultiViewMode } from './MultiViewData';
 import './MultiView.scss';
-type MultiViewMode = 'Single' | 'Side by Side' | 'Stacked' | 'Quad';
 interface MultiViewProps {
     scene: Scene;
     renderer: WebGLRenderer;

package/types/editor/sceneHierarchy/inspector/MultiView/MultiViewData.d.ts

@@ -0,0 +1,16 @@
+import { Camera, CameraHelper, MeshBasicMaterial, 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 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 declare const renderOptions: RenderMode[];
+export declare const normalsMaterial: MeshNormalMaterial;
+export declare const wireframeMaterial: MeshBasicMaterial;
+export declare const uvMaterial: UVMaterial;

package/types/editor/sceneHierarchy/inspector/MultiView/UVMaterial.d.ts

@@ -0,0 +1,4 @@
+import { ShaderMaterial } from "three";
+export default class UVMaterial extends ShaderMaterial {
+    constructor();
+}

package/types/index.d.ts

@@ -12,6 +12,8 @@ export { default as Draggable } from './editor/components/Draggable';
 export { default as DropdownItem } from './editor/components/DropdownItem';
 export { default as Dropdown } from './editor/components/Dropdown';
 export { default as RemoteController } from './core/RemoteController';
+export { default as InfiniteGridHelper } from './editor/sceneHierarchy/inspector/MultiView/InfiniteGridHelper';
+export { default as UVMaterial } from './editor/sceneHierarchy/inspector/MultiView/UVMaterial';
 export { default as SceneHierarchy } from './editor/sceneHierarchy/SceneHierarchy';
 export { default as Accordion } from './editor/sceneHierarchy/Accordion';
 export { default as ChildObject } from './editor/sceneHierarchy/ChildObject';
@@ -19,5 +21,4 @@ export { default as ContainerObject } from './editor/sceneHierarchy/ContainerObj
 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/sceneHierarchy/inspector/MultiView/InfiniteGridHelper';
 export { default as Editor } from './editor/Editor';