@tomorrowevening/hermes 0.0.2 → 0.0.4

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

@@ -0,0 +1,124 @@
+import { Euler, Matrix4, Vector3 } from 'three';
+import InspectorGroup from '../InspectorGroup';
+import { RemoteObject } from "../../types";
+import RemoteThree from '@/core/remote/RemoteThree';
+import { setItemProps } from '../../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 items: any[] = [
+    {
+      title: 'Position',
+      items: [
+        {
+          title: 'X',
+          prop: 'position.x',
+          type: 'number',
+          value: position.x,
+          onChange: updateTransform,
+        },
+        {
+          title: 'Y',
+          prop: 'position.y',
+          type: 'number',
+          value: position.y,
+          onChange: updateTransform,
+        },
+        {
+          title: 'Z',
+          prop: 'position.z',
+          type: 'number',
+          value: position.z,
+          onChange: updateTransform,
+        },
+      ],
+    },
+    {
+      title: 'Rotation',
+      items: [
+        {
+          title: 'X',
+          prop: 'rotation.x',
+          type: 'number',
+          value: rotation.x,
+          min: -Math.PI,
+          max: Math.PI,
+          step: 0.01,
+          onChange: updateTransform,
+        },
+        {
+          title: 'Y',
+          prop: 'rotation.y',
+          type: 'number',
+          value: rotation.y,
+          min: -Math.PI,
+          max: Math.PI,
+          step: 0.01,
+          onChange: updateTransform,
+        },
+        {
+          title: 'Z',
+          prop: 'rotation.z',
+          type: 'number',
+          value: rotation.z,
+          min: -Math.PI,
+          max: Math.PI,
+          step: 0.01,
+          onChange: updateTransform,
+        },
+      ],
+    },
+    {
+      title: 'Scale',
+      items: [
+        {
+          title: 'X',
+          prop: 'scale.x',
+          type: 'number',
+          value: scale.x,
+          step: 0.01,
+          onChange: updateTransform,
+        },
+        {
+          title: 'Y',
+          prop: 'scale.y',
+          type: 'number',
+          value: scale.y,
+          step: 0.01,
+          onChange: updateTransform,
+        },
+        {
+          title: 'Z',
+          prop: 'scale.z',
+          type: 'number',
+          value: scale.z,
+          step: 0.01,
+          onChange: updateTransform,
+        },
+      ],
+    },
+  ];
+
+  return (
+    <InspectorGroup
+      title="Transform"
+      items={items}
+    />
+  );
+}

package/src/editor/sceneHierarchy/types.ts

@@ -1,10 +1,121 @@
-import { Object3D } from 'three'
+import RemoteThree from '@/core/remote/RemoteThree';
+import { Color, Object3D } from 'three';
 
-export type ChildObjectProps = {
+export interface CoreComponentProps {
+  class?: string
+  three: RemoteThree
+}
+
+export interface ChildObjectProps extends CoreComponentProps {
   child: Object3D
+  three: RemoteThree
+}
+
+export interface SceneHierarchyState {
+  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
+}
+
+// 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 type SceneHierarchyState = {
-  open: boolean
-  scene: Object3D | null
+export interface RemoteObject {
+  name: string
+  uuid: string
+  type: string
+  visible: boolean
+  matrix: number[] // based on Matrix4.elements
+  material?: RemoteMaterial | RemoteMaterial[]
+  perspectiveCameraInfo?: PerspectiveCameraInfo
+  orthographicCameraInfo?: OrthographicCameraInfo
+  lightInfo?: LightInfo
 }

package/src/editor/sceneHierarchy/utils.ts

@@ -1,25 +1,221 @@
-import { Object3D } from 'three'
+import { Camera, CubeTexture, Light, Material, Mesh, Object3D, OrthographicCamera, PerspectiveCamera, RepeatWrapping, Texture } from 'three';
+import { MinimumObject, RemoteMaterial, RemoteObject } from './types';
 
 export function determineIcon(obj: Object3D): string {
   if (obj.name === 'cameras') {
-    return 'camera'
+    return 'camera';
   } else if (obj.name === 'interactive') {
-    return 'interactive'
+    return 'interactive';
   } else if (obj.name === 'lights') {
-    return 'light'
+    return 'light';
   } else if (obj.name === 'ui') {
-    return 'ui'
+    return 'ui';
   } else if (obj.name === 'utils') {
-    return 'utils'
+    return 'utils';
   }
 
-  const type = obj.type
+  const type = obj.type;
   if (type.search('Helper') > -1) {
-    return 'icon_utils'
+    return 'icon_utils';
   } else if (type.search('Camera') > -1) {
-    return 'camera'
+    return 'camera';
   } else if (type.search('Light') > -1) {
-    return 'light'
+    return 'light';
   }
-  return 'obj3D'
+  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,
+  };
+
+  if (obj instanceof Mesh) {
+    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 (obj instanceof Camera) {
+    if (obj instanceof 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 instanceof 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 (obj instanceof Light) {
+    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 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/scss/_debug.scss

@@ -1,7 +1,4 @@
-$maxInput: 160px;
-
 body {
-
   .tp-dfwv,
   .tp-dfwv button,
   .tp-dfwv input {
@@ -14,38 +11,31 @@ body {
 }
 
 .tp-dfwv {
+  left: 50%;
+  top: 0;
+  max-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  transform: translateX(-50%);
+  width: 400px;
+  z-index: 100;
+
   .tp-lblv {
     position: relative;
   }
 
   .tp-lblv_v {
     display: inline-block;
-    max-width: $maxInput;
 
     .tp-ckbv {
       width: 20px;
     }
 
-    .tp-txtv,
-    .tp-sldtxtv {
-      max-width: $maxInput;
-    }
-
-    .tp-lstv {
-      width: $maxInput;
-    }
-
     .tp-fpsv {
       width: 280px;
     }
   }
 
-  .tp-lblv-nol {
-    .tp-btnv {
-      width: 280px;
-    }
-  }
-
   .tp-btnv_b {
     padding: 0 5px;
   }

package/src/editor/scss/_dropdown.scss

@@ -12,6 +12,7 @@
   button {
     backdrop-filter: blur(2px);
     background-color: $BAR_COLOR;
+    border: none;
     color: rgba($color: #FFF, $alpha: 0.5);
     font-size: 12px;
     padding: 5px 10px;