@tomorrowevening/hermes 0.0.37 → 0.0.38

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

@@ -1,113 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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

@@ -1,278 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

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