@tomorrowevening/hermes 0.0.35 → 0.0.37

package/src/editor/sidePanel/inspector/utils/InspectTransform.tsx

@@ -0,0 +1,113 @@
+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();
+  matrix.elements = obj.matrix;
+  const position = new Vector3();
+  const rotation = new Euler();
+  const scale = new Vector3();
+  if (obj.uuid.length > 0) {
+    position.setFromMatrixPosition(matrix);
+    rotation.setFromRotationMatrix(matrix);
+    scale.setFromMatrixScale(matrix);
+  }
+
+  const updateTransform = (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);
+  };
+
+  const updateRotation = (prop: string, value: any) => {
+    updateTransform(prop, degToRad(value));
+  };
+
+  return (
+    <InspectorGroup
+      title='Transform'
+      items={[
+        {
+          title: 'Position X',
+          prop: 'position.x',
+          type: 'number',
+          value: position.x,
+          onChange: updateTransform,
+        },
+        {
+          title: 'Position Y',
+          prop: 'position.y',
+          type: 'number',
+          value: position.y,
+          onChange: updateTransform,
+        },
+        {
+          title: 'Position Z',
+          prop: 'position.z',
+          type: 'number',
+          value: position.z,
+          onChange: updateTransform,
+        },
+        {
+          title: 'Rotation X',
+          prop: 'rotation.x',
+          type: 'number',
+          value: round(radToDeg(rotation.x)),
+          min: -360,
+          max: 360,
+          step: 0.1,
+          onChange: updateRotation,
+        },
+        {
+          title: 'Rotation Y',
+          prop: 'rotation.y',
+          type: 'number',
+          value: round(radToDeg(rotation.y)),
+          min: -360,
+          max: 360,
+          step: 0.1,
+          onChange: updateRotation,
+        },
+        {
+          title: 'Rotation Z',
+          prop: 'rotation.z',
+          type: 'number',
+          value: round(radToDeg(rotation.z)),
+          min: -360,
+          max: 360,
+          step: 0.1,
+          onChange: updateRotation,
+        },
+        {
+          title: 'Scale X',
+          prop: 'scale.x',
+          type: 'number',
+          value: scale.x,
+          step: 0.01,
+          onChange: updateTransform,
+        },
+        {
+          title: 'Scale Y',
+          prop: 'scale.y',
+          type: 'number',
+          value: scale.y,
+          step: 0.01,
+          onChange: updateTransform,
+        },
+        {
+          title: 'Scale Z',
+          prop: 'scale.z',
+          type: 'number',
+          value: scale.z,
+          step: 0.01,
+          onChange: updateTransform,
+        },
+      ]}
+    />
+  );
+}

package/src/editor/sidePanel/types.ts

@@ -0,0 +1,130 @@
+import RemoteThree from '@/core/remote/RemoteThree';
+import { Color, Object3D } from 'three';
+
+export interface CoreComponentProps {
+  class?: string
+  three: RemoteThree
+}
+
+export interface ChildObjectProps extends CoreComponentProps {
+  child: Object3D
+  three: RemoteThree
+}
+
+export interface SidePanelState {
+  scene?: Object3D
+  three: RemoteThree
+}
+
+export interface MinimumObject {
+  name: string
+  uuid: string
+  type: string
+  children: MinimumObject[]
+}
+
+export interface RemoteMaterial {
+  // Blending
+  blending: number
+  blendSrc: number
+  blendDst: number
+  blendEquation: number
+  blendColor: Color
+  blendAlpha: number
+  // Depth
+  depthFunc: number
+  depthTest: boolean
+  depthWrite: boolean
+  // Stencil
+  stencilWriteMask: number
+  stencilFunc: number
+  stencilRef: number
+  stencilFuncMask: number
+  stencilFail: number
+  stencilZFail: number
+  stencilZPass: number
+  stencilWrite: boolean
+  // Clipping
+  clipIntersection: boolean
+  // Polygon
+  polygonOffset: boolean
+  polygonOffsetFactor: number
+  polygonOffsetUnits: number
+  // ETC
+  dithering: boolean
+  name: string
+  opacity: number
+  premultipliedAlpha: boolean
+  side: number
+  toneMapped: boolean
+  transparent: boolean
+  type: string
+  uuid: string
+  vertexColors: boolean
+  defines: any
+  extensions: any
+  uniforms: any
+  // Colors
+  color?: Color
+  attenuationColor?: Color
+  sheenColor?: Color
+  specularColor?: Color
+}
+
+// Animation Info
+
+export interface AnimationClipInfo {
+  name: string;
+  duration: number;
+  blendMode: number;
+}
+
+// Camera Info
+
+export interface PerspectiveCameraInfo {
+  fov: number
+  zoom: number
+  near: number
+  far: number
+  focus: number
+  aspect: number
+  filmGauge: number
+  filmOffset: number
+}
+
+export interface OrthographicCameraInfo {
+  zoom: number
+  near: number
+  far: number
+  left: number
+  right: number
+  top: number
+  bottom: number
+}
+
+// Light Info
+export interface LightInfo {
+  color: Color
+  intensity: number
+  // Point
+  decay?: number
+  distance?: number
+  // Spot
+  angle?: number
+  penumbra?: number
+  // Hemisphere 
+  groundColor?: Color
+}
+
+export interface RemoteObject {
+  name: string
+  uuid: string
+  type: string
+  visible: boolean
+  matrix: number[] // based on Matrix4.elements
+  animations: AnimationClipInfo[]
+  material?: RemoteMaterial | RemoteMaterial[]
+  perspectiveCameraInfo?: PerspectiveCameraInfo
+  orthographicCameraInfo?: OrthographicCameraInfo
+  lightInfo?: LightInfo
+}

package/src/editor/sidePanel/utils.ts

@@ -0,0 +1,278 @@
+import { AnimationClip, CubeTexture, Line, Material, Mesh, Object3D, Points, RepeatWrapping, Texture } from 'three';
+import { MinimumObject, RemoteMaterial, RemoteObject } from './types';
+
+export function determineIcon(obj: Object3D): string {
+  if (obj.name === 'cameras') {
+    return 'camera';
+  } else if (obj.name === 'interactive') {
+    return 'interactive';
+  } else if (obj.name === 'lights') {
+    return 'light';
+  } else if (obj.name === 'ui') {
+    return 'ui';
+  } else if (obj.name === 'utils') {
+    return 'utils';
+  }
+
+  const type = obj.type;
+  if (type.search('Helper') > -1) {
+    return 'icon_utils';
+  } else if (type.search('Camera') > -1) {
+    return 'camera';
+  } else if (type.search('Light') > -1) {
+    return 'light';
+  }
+  return 'obj3D';
+}
+
+export function stripScene(obj: Object3D): MinimumObject {
+  const min: MinimumObject = {
+    name: obj.name,
+    type: obj.type,
+    uuid: obj.uuid,
+    children: [],
+  };
+  obj.children.forEach((child: Object3D) => {
+    min.children.push(stripScene(child));
+  });
+  return min;
+}
+
+function cleanUniforms(obj: any) {
+  const newObj = {};
+  for (const i in obj) {
+    const value = obj[i].value;
+    newObj[i] = { value: value };
+    if (value === null) {
+      newObj[i].value = { src: '' };
+    } else if (value.isTexture) {
+      newObj[i].value = { src: value.image.src };
+    }
+  }
+  return newObj;
+}
+
+function skipPropertyName(value: string): boolean {
+  switch (value) {
+    case 'blendSrcAlpha':
+    case 'blendDstAlpha':
+    case 'blendEquationAlpha':
+    case 'clippingPlanes':
+    case 'shadowSide':
+    case 'precision':
+      return true;
+  }
+  return false;
+}
+
+function stripMaterialData(material: Material): RemoteMaterial {
+  const materialData = {};
+  for (const i in material) {
+    if (i.substring(0, 1) === '_' || i.substring(0, 2) === 'is') continue;
+    if (skipPropertyName(i)) continue;
+
+    const type = typeof material[i];
+    const value = material[i];
+    switch (type) {
+      case 'boolean':
+      case 'number':
+      case 'string':
+        materialData[i] = value;
+        break;
+      case 'object':
+        if (value !== null) {
+          materialData[i] = value;
+          if (value.isTexture) {
+            if (value instanceof Texture) {
+              // materialData[i] = { src: convertImageToBase64(value.image) };
+              const textureSource = value.source.toJSON();
+              // @ts-ignore
+              materialData[i] = { src: textureSource.url };
+            } else if (value instanceof CubeTexture) {
+              console.log('env map');
+              console.log(value.source.data);
+              console.log(value.source.toJSON());
+              materialData[i] = { src: '' };
+            }
+          } else if (i === 'uniforms') {
+            materialData[i] = cleanUniforms(materialData[i]);
+          }
+        } else {
+          materialData[i] = { src: '' };
+        }
+        break;
+    }
+  }
+
+  return materialData as RemoteMaterial;
+}
+
+export function convertImageToBase64(imgElement: HTMLImageElement): string {
+  // Create a canvas element
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+
+  // Set the canvas dimensions to match the image
+  canvas.width = imgElement.width;
+  canvas.height = imgElement.height;
+
+  // Draw the image onto the canvas
+  ctx!.drawImage(imgElement, 0, 0);
+
+  // Get the Base64 representation of the image from the canvas
+  return canvas.toDataURL('image/png');
+}
+
+export function stripObject(obj: Object3D): RemoteObject {
+  obj.updateMatrix();
+
+  const stripped: RemoteObject = {
+    name: obj.name,
+    type: obj.type,
+    uuid: obj.uuid,
+    visible: obj.visible,
+    matrix: obj.matrix.elements,
+    animations: [],
+    material: undefined,
+    perspectiveCameraInfo: undefined,
+    orthographicCameraInfo: undefined,
+    lightInfo: undefined,
+  };
+
+  // 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)) {
+      const data: RemoteMaterial[] = [];
+      mesh.material.forEach((material: Material) => {
+        data.push(stripMaterialData(material));
+      });
+      stripped.material = data;
+    } else {
+      stripped.material = stripMaterialData(mesh.material);
+    }
+  } else if (type.search('points') > -1) {
+    const mesh = obj as Points;
+    if (Array.isArray(mesh.material)) {
+      const data: RemoteMaterial[] = [];
+      mesh.material.forEach((material: Material) => {
+        data.push(stripMaterialData(material));
+      });
+      stripped.material = data;
+    } else {
+      stripped.material = stripMaterialData(mesh.material);
+    }
+  } else if (type.search('line') > -1) {
+    const mesh = obj as Line;
+    if (Array.isArray(mesh.material)) {
+      const data: RemoteMaterial[] = [];
+      mesh.material.forEach((material: Material) => {
+        data.push(stripMaterialData(material));
+      });
+      stripped.material = data;
+    } else {
+      stripped.material = stripMaterialData(mesh.material);
+    }
+  } else if (type.search('camera') > -1) {
+    if (obj.type === 'PerspectiveCamera') {
+      stripped.perspectiveCameraInfo = {
+        fov: obj['fov'],
+        zoom: obj['zoom'],
+        near: obj['near'],
+        far: obj['far'],
+        focus: obj['focus'],
+        aspect: obj['aspect'],
+        filmGauge: obj['filmGauge'],
+        filmOffset: obj['filmOffset'],
+      };
+    } else if (obj.type === 'OrthographicCamera') {
+      stripped.orthographicCameraInfo = {
+        zoom: obj['zoom'],
+        near: obj['near'],
+        far: obj['far'],
+        left: obj['left'],
+        right: obj['right'],
+        top: obj['top'],
+        bottom: obj['bottom'],
+      };
+    }
+  } else if (type.search('light') > -1) {
+    stripped.lightInfo = {
+      color: obj['color'],
+      intensity: obj['intensity'],
+      decay: obj['decay'],
+      distance: obj['distance'],
+      angle: obj['angle'],
+      penumbra: obj['penumbra'],
+      groundColor: obj['groundColor'],
+    };
+  }
+
+  return stripped;
+}
+
+export function getSubItem(child: any, key: string): any {
+  const keys = key.split('.');
+  const total = keys.length;
+  switch (total) {
+    case 1:
+      return child[keys[0]];
+    case 2:
+      return child[keys[0]][keys[1]];
+    case 3:
+      return child[keys[0]][keys[1]][keys[2]];
+    case 4:
+      return child[keys[0]][keys[1]][keys[2]][keys[3]];
+    case 5:
+      return child[keys[0]][keys[1]][keys[2]][keys[3]][keys[4]];
+    case 6:
+      return child[keys[0]][keys[1]][keys[2]][keys[3]][keys[4]][keys[5]];
+  }
+  return undefined;
+}
+
+export function setItemProps(child: any, key: string, value: any) {
+  const keys = key.split('.');
+  const total = keys.length;
+  switch (total) {
+    case 1:
+      child[keys[0]] = value;
+      break;
+    case 2:
+      child[keys[0]][keys[1]] = value;
+      break;
+    case 3:
+      child[keys[0]][keys[1]][keys[2]] = value;
+      break;
+    case 4:
+      child[keys[0]][keys[1]][keys[2]][keys[3]] = value;
+      break;
+    case 5:
+      child[keys[0]][keys[1]][keys[2]][keys[3]][keys[4]] = value;
+      break;
+  }
+}
+
+export function textureFromSrc(imgSource: string): Promise<Texture> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const texture = new Texture(img);
+      texture.wrapS = RepeatWrapping;
+      texture.wrapT = RepeatWrapping;
+      texture.needsUpdate = true;
+      resolve(texture);
+    };
+    img.onerror = reject;
+    img.src = imgSource;
+  });
+}

package/src/editor/utils.ts

@@ -0,0 +1,117 @@
+import { Material, Mesh, Object3D, PositionalAudio, Texture } from 'three';
+
+export function capitalize(value: string): string {
+  return value.substring(0, 1).toUpperCase() + value.substring(1);
+}
+
+export function clamp(min: number, max: number, value: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function distance(x: number, y: number): number {
+  const d = x - y;
+  return Math.sqrt(d * d);
+}
+
+export function randomID(): string {
+  return Math.round(Math.random() * 1000000).toString();
+}
+
+export function isColor(obj: any) {
+  return (
+    obj.r !== undefined &&
+    obj.g !== undefined &&
+    obj.b !== undefined
+  );
+}
+
+export function colorToHex(obj: any) {
+  const r = Math.round(obj.r * 255);
+  const g = Math.round(obj.g * 255);
+  const b = Math.round(obj.b * 255);
+
+  const toHex = (value: number) => {
+    const hex = value.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  const red = toHex(r);
+  const green = toHex(g);
+  const blue = toHex(b);
+
+  return '#' + red + green + blue;
+}
+
+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_${totalThreeObjects}`;
+    totalThreeObjects++;
+  }
+  // inherit parent's UUID for hierarchy
+  if (object.parent !== null) uuid = `${object.parent.uuid}.${uuid}`;
+  object.uuid = uuid;
+
+  // 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/example/CustomEditor.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { Events, app, threeDispatcher } from './constants';
+import Editor from '../editor/Editor';
+import Dropdown from '../editor/components/Dropdown';
+import SidePanel from '../editor/sidePanel/SidePanel';
+import MultiView from '../editor/multiView/MultiView';
+// Scenes
+import BaseScene from './three/BaseScene';
+import Scene1 from './three/Scene1';
+import Scene2 from './three/Scene2';
+
+// Referenced Scenes
+const scenes: Map<string, any> = new Map();
+scenes.set('Scene1', Scene1);
+scenes.set('Scene2', Scene2);
+
+export default function CustomEditor() {
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    const onLoad = () => {
+      threeDispatcher.removeEventListener(Events.LOAD_COMPLETE, onLoad);
+      setLoaded(true);
+    };
+    threeDispatcher.addEventListener(Events.LOAD_COMPLETE, onLoad);
+    return () => {
+      threeDispatcher.removeEventListener(Events.LOAD_COMPLETE, onLoad);
+    };
+  }, []);
+
+  return (
+    <Editor
+      header={[
+        <Dropdown
+          title='Scenes'
+          key='Scenes'
+          options={[
+            {
+              type: 'option',
+              title: 'Scene 1',
+              value: 'scene1',
+            },
+            {
+              type: 'option',
+              title: 'Scene 2',
+              value: 'scene2',
+            },
+          ]}
+          onSelect={(value: string) => {
+            app.send({
+              target: 'app',
+              event: 'selectComponent',
+              data: {
+                dropdown: 'Scenes',
+                value,
+              },
+            });
+          }}
+        />
+      ]}>
+        <>
+        {loaded && (
+          <>
+            <MultiView
+              three={app.three}
+              scenes={scenes}
+              onSceneUpdate={(scene: any) => {
+                // Custom callback for animation updates
+                const baseScene = scene as BaseScene;
+                baseScene.update();
+              }}
+            />
+            <SidePanel three={app.three} />
+          </>
+        )}
+        </>
+      </Editor>
+  );
+}