@tomorrowevening/hermes 0.0.2 → 0.0.4

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

@@ -0,0 +1,72 @@
+import RemoteThree from "@/core/remote/RemoteThree";
+import { ToolEvents, debugDispatcher } from "@/editor/global";
+import { useEffect } from "react";
+import { Scene, Texture } from "three";
+import { setItemProps, textureFromSrc } from "../utils";
+
+export interface SceneInspectorProps {
+  scene: Scene
+  three: RemoteThree
+}
+
+export default function SceneInspector(props: SceneInspectorProps) {
+  const onGetObject = (evt: any) => {
+    const child = props.scene.getObjectByProperty('uuid', evt.value);
+    if (child !== undefined) props.three.setObject(child);
+  };
+
+  const setChildProps = (uuid: string, key: string, value: any) => {
+    const child = props.scene.getObjectByProperty('uuid', uuid);
+    if (child !== undefined) setItemProps(child, key, value);
+  };
+
+  const onUpdateObject = (evt: any) => {
+    const msg = evt.value;
+    const { key, value, uuid } = msg;
+    setChildProps(uuid, key, value);
+  };
+
+  const onCreateTexture = (evt: any) => {
+    const data = evt.value;
+    textureFromSrc(data.value).then((texture: Texture) => {
+      setChildProps(data.uuid, data.key, texture);
+      setChildProps(data.uuid, `material.needsUpdate`, true);
+    });
+  };
+
+  const onGetScene = () => {
+    props.three.setScene(props.scene);
+  };
+
+  const onRequestMethod = (evt: any) => {
+    const { key, uuid, value } = evt.value;
+    const child = props.scene.getObjectByProperty('uuid', uuid);
+    if (child !== undefined) {
+      try {
+        child[key](value);
+      } catch (err: any) {
+        console.log('Error requesting method:');
+        console.log(err);
+        console.log(key);
+        console.log(value);
+      }
+    }
+  };
+
+  useEffect(() => {
+    debugDispatcher.addEventListener(ToolEvents.GET_OBJECT, onGetObject);
+    debugDispatcher.addEventListener(ToolEvents.GET_SCENE, onGetScene);
+    debugDispatcher.addEventListener(ToolEvents.UPDATE_OBJECT, onUpdateObject);
+    debugDispatcher.addEventListener(ToolEvents.CREATE_TEXTURE, onCreateTexture);
+    debugDispatcher.addEventListener(ToolEvents.REQUEST_METHOD, onRequestMethod);
+    return () => {
+      debugDispatcher.removeEventListener(ToolEvents.GET_OBJECT, onGetObject);
+      debugDispatcher.removeEventListener(ToolEvents.GET_SCENE, onGetScene);
+      debugDispatcher.removeEventListener(ToolEvents.UPDATE_OBJECT, onUpdateObject);
+      debugDispatcher.removeEventListener(ToolEvents.CREATE_TEXTURE, onCreateTexture);
+      debugDispatcher.removeEventListener(ToolEvents.REQUEST_METHOD, onRequestMethod);
+    };
+  }, []);
+
+  return null;
+}

package/src/editor/sceneHierarchy/inspector/inspector.scss

@@ -0,0 +1,150 @@
+$icon_folder: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAB1CAYAAADN5fjJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAzklEQVR4nO3bwQqCUBBA0Yz+/5dt1eYRkVfKWZyzUgi5zEJSxm3f99tU96sDPhFXiavEVeIqcZW4anTcYzmf8P9pex2Mnpy4Slwlrhodt96Et7e/usjoyYmrxFXiKnGVuEpcJa4SV4mrxFXiKnGVuEpcJa4SV4mrxFXiKnGVuEpcJa4SV4mrxFXiqtFx69LLUd9sKuZFmtGTE1eJq8RV4ipx1T+2+o9e01b/aeIqcZW46uxWvweckcRV4ipxlbhqdNzZl4c//cJu9ORGxz0BUl8I9T4qXncAAAAASUVORK5CYII=');
+
+#Inspector {
+  .field {
+    align-items: center;
+    background-color: #222;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    min-height: 21px;
+    overflow: hidden;
+    padding: 1px;
+    
+    label {
+      line-height: normal;
+      margin: 0 10px;
+      max-width: 180px;
+      user-select: none;
+      width: fit-content;
+      min-width: 20px;
+      text-align: center;
+    }
+
+    input {
+      block-size: 11px;
+      flex: 1%;
+      margin: 0;
+      padding: 4px;
+      outline: none;
+      &.min {
+        height: 11px;
+        flex: none;
+        width: 30px;
+        margin-right: 1px;
+      }
+      &.color {
+        flex: none;
+        width: 60px;
+      }
+    }
+
+    input[type="checkbox"] {
+      flex: none;
+    }
+
+    input[type="color"] {
+      block-size: revert;
+      height: 21px;
+      padding-block: revert;
+      padding: 0;
+      margin: 0;
+    }
+
+    input[type="number"], input[type="range"] {
+      appearance: none;
+      height: 11px;
+    }
+
+    input[type="range"]::-webkit-slider-runnable-track {
+      border: none;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+      appearance: none;
+      background-color: #666;
+      height: 17px;
+      width: 17px;
+      transition: 0.2s linear background-color;
+      &:hover {
+        background-color: #999;
+      }
+    }
+
+    textarea {
+      background-color: #191919;
+      font-size: 10px;
+    }
+
+    img {
+      border: 1px dotted #333;
+      cursor: pointer;
+      object-fit: contain;
+      max-width: 100%;
+      min-width: 50px;
+      min-height: 30px;
+      max-height: 50px;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    button {
+      background-color: #333;
+      border-top: 1px dotted #444;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      text-align: center;
+      transition: 0.2s background-color linear;
+      width: 100%;
+      &:hover {
+        background-color: #444;
+      }
+    }
+
+    &.block {
+      label {
+        display: block;
+        line-height: 21px;
+        max-width: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  .group {
+    background-color: #191919;
+    margin: 2px 0;
+    h4 {
+      display: inline;
+      font-weight: bold;
+      pointer-events: none;
+      width: fit-content;
+    }
+    .toggleBtn {
+      background-color: #191919;
+      background-image: $icon_folder;
+      background-position: 1px 1px;
+      background-repeat: no-repeat;
+      background-size: 15px 45px;
+      display: inline-block;
+      height: 15px;
+      opacity: 0.8;
+      overflow: hidden;
+      margin: 0 0 0 5px;
+      padding-left: 20px;
+      width: calc(100% - 7px);
+      transition: all 0.15s linear;
+      &:hover {
+        background-color: #222;
+        opacity: 1;
+      }
+    }
+    .fieldItems {
+      border-top: 1px dotted #333;
+      overflow-y: auto;
+      user-select: none;
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+import RemoteThree from '@/core/remote/RemoteThree';
+import InspectorGroup from '../InspectorGroup';
+import { RemoteObject } from "../../types";
+import { setItemProps } from '../../utils';
+
+function prettyName(name: string): string {
+  switch (name) {
+    case 'fov': return 'FOV';
+    case 'zoom': return 'Zoom';
+    case 'near': return 'Near';
+    case 'far': return 'Far';
+    case 'focus': return 'Focus';
+    case 'aspect': return 'Aspect';
+    case 'filmGauge': return 'Film Gauge';
+    case 'filmOffset': return 'Film Offset';
+    case 'left': return 'Left';
+    case 'right': return 'Right';
+    case 'top': return 'Top';
+    case 'bottom': return 'Bottom';
+  }
+  return name;
+}
+
+export function InspectCamera(object: RemoteObject, three: RemoteThree): any {
+  const items: any[] = [];
+
+  if (object.perspectiveCameraInfo !== undefined) {
+    for (const i in object.perspectiveCameraInfo) {
+      items.push({
+        title: prettyName(i),
+        prop: i,
+        type: 'number',
+        step: 0.01,
+        value: object.perspectiveCameraInfo[i],
+        onChange: (prop: string, value: any) => {
+          three.updateObject(object.uuid, prop, value);
+          three.requestMethod(object.uuid, 'updateProjectionMatrix');
+
+          const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+          if (child !== undefined) {
+            setItemProps(child, prop, value);
+            child['updateProjectionMatrix']();
+          }
+        }
+      });
+    }
+  } else if (object.orthographicCameraInfo !== undefined) {
+    for (const i in object.orthographicCameraInfo) {
+      items.push({
+        title: prettyName(i),
+        prop: i,
+        type: 'number',
+        step: 0.01,
+        value: object.perspectiveCameraInfo![i],
+        onChange: (prop: string, value: any) => {
+          three.updateObject(object.uuid, prop, value);
+          three.requestMethod(object.uuid, 'updateProjectionMatrix');
+
+          const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+          if (child !== undefined) {
+            setItemProps(child, prop, value);
+            child['updateProjectionMatrix']();
+          }
+        }
+      });
+    }
+  }
+
+  return (
+    <InspectorGroup
+      title="Camera"
+      items={items}
+    />
+  );
+}

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

@@ -0,0 +1,62 @@
+import InspectorGroup from '../InspectorGroup';
+import { RemoteObject } from "../../types";
+import RemoteThree from '@/core/remote/RemoteThree';
+import { setItemProps } from '../../utils';
+import { Color } from 'three';
+
+function prettyName(value: string): string {
+  switch (value) {
+    case 'color': return 'Color';
+    case 'intensity': return 'Intensity';
+    case 'decay': return 'Decay';
+    case 'distance': return 'Distance';
+    case 'angle': return 'Angle';
+    case 'penumbra': return 'Penumbra';
+    case 'groundColor': return 'Ground Color';
+  }
+  return value;
+}
+
+export function InspectLight(obj: RemoteObject, three: RemoteThree) {
+  const items: any[] = [];
+  if (obj.lightInfo !== undefined) {
+    for (const i in obj.lightInfo) {
+      const value = obj.lightInfo[i];
+      if (value === undefined) continue;
+
+      if (value.isColor !== undefined) {
+        items.push({
+          title: prettyName(i),
+          prop: i,
+          type: 'color',
+          value: value,
+          onChange: (prop: string, value: any) => {
+            const color = new Color(value);
+            three.updateObject(obj.uuid, prop, color);
+            const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
+            if (child !== undefined) setItemProps(child, prop, color);
+          }
+        });
+      } else {
+        items.push({
+          title: prettyName(i),
+          prop: i,
+          type: typeof value,
+          value: value,
+					step: typeof value === 'number' ? 0.01 : undefined,
+          onChange: (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);
+          }
+        });
+      }
+    }
+  }
+  return (
+    <InspectorGroup
+      title="Light"
+      items={items}
+    />
+  );
+}

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

@@ -0,0 +1,340 @@
+import { Color, Texture } from 'three';
+import InspectorGroup from '../InspectorGroup';
+import { RemoteMaterial, RemoteObject } from "../../types";
+import RemoteThree from '@/core/remote/RemoteThree';
+import { setItemProps, textureFromSrc } from '../../utils';
+
+export function acceptedMaterialNames(name: string): boolean {
+  return !(
+    name === 'alphaHash' ||
+    name === 'alphaToCoverage' ||
+    name === 'attenuationDistance' ||
+    name === 'colorWrite' ||
+    name === 'combine' ||
+    name === 'defaultAttributeValues' ||
+    name === 'depthFunc' ||
+    name === 'forceSinglePass' ||
+    name === 'glslVersion' ||
+    name === 'linewidth' ||
+    name === 'normalMapType' ||
+    name === 'precision' ||
+    name === 'premultipliedAlpha' ||
+    name === 'shadowSide' ||
+    name === 'side' ||
+    name === 'toneMapped' ||
+    name === 'uniformsGroups' ||
+    name === 'uniformsNeedUpdate' ||
+    name === 'userData' ||
+    name === 'vertexColors' ||
+    name === 'version' ||
+    name === 'wireframeLinecap' ||
+    name === 'wireframeLinejoin' ||
+    name === 'wireframeLinewidth' ||
+    name.slice(0, 5) === 'blend' ||
+    name.slice(0, 4) === 'clip' ||
+    name.slice(0, 7) === 'polygon' ||
+    name.slice(0, 7) === 'stencil' ||
+    name.slice(0, 2) === 'is'
+  );
+}
+
+export function niceMaterialNames(name: string): string {
+  switch (name) {
+    case 'alphaMap': return 'Alpha Map';
+    case 'anisotropyRotation': return 'Anisotropy Rotation';
+    case 'aoMap': return 'AO Map';
+    case 'aoMapIntensity': return 'AO Map Intensity';
+    case 'attenuationColor': return 'Attenuation Color';
+    case 'bumpMap': return 'Bump Map';
+    case 'bumpScale': return 'Bump Scale';
+    case 'clearcoatNormalScale': return 'Clearcoat Normal Scale';
+    case 'clearcoatRoughness': return 'Clearcoat Roughness';
+    case 'color': return 'Color';
+    case 'defines': return 'Defines';
+    case 'depthTest': return 'Depth Test';
+    case 'depthWrite': return 'Depth Write';
+    case 'displacementBias': return 'Displacement Bias';
+    case 'displacementMap': return 'Displacement Map';
+    case 'displacementScale': return 'Displacement Scale';
+    case 'dithering': return 'Dithering';
+    case 'emissive': return 'Emissive';
+    case 'emissiveIntensity': return 'Emissive Intensity';
+    case 'envMap': return 'Environment Map';
+    case 'envMapIntensity': return 'Environment Map Intensity';
+    case 'extensions': return 'Extensions';
+    case 'flatShading': return 'Flat Shading';
+    case 'fragmentShader': return 'Fragment Shader';
+    case 'fog': return 'Fog';
+    case 'gradientMap': return 'Gradient Map';
+    case 'ior': return 'IOR';
+    case 'iridescenceIOR': return 'Iridescence IOR';
+    case 'iridescenceThicknessRange': return 'Iridescence Thickness Range';
+    case 'lights': return 'Lights';
+    case 'lightMap': return 'Light Map';
+    case 'lightMapIntensity': return 'Light Map Intensity';
+    case 'map': return 'Map';
+    case 'matcap': return 'Matcap';
+    case 'metalness': return 'Metalness';
+    case 'name': return 'Name';
+    case 'normalMap': return 'Normal Map';
+    case 'normalScale': return 'Normal Scale';
+    case 'opacity': return 'Opacity';
+    case 'reflectivity': return 'Reflectivity';
+    case 'refractionRatio': return 'Refraction Ratio';
+    case 'roughness': return 'Roughness';
+    case 'sheenColor': return 'Sheen Color';
+    case 'sheenRoughness': return 'Sheen Roughness';
+    case 'shininess': return 'Shininess';
+    case 'specular': return 'Specular';
+    case 'specularColor': return 'Specular Color';
+    case 'specularIntensity': return 'Specular Intensity';
+    case 'thickness': return 'Thickness';
+    case 'transparent': return 'Transparent';
+    case 'type': return 'Type';
+    case 'uuid': return 'UUID';
+    case 'uniforms': return 'Uniforms';
+    case 'vertexShader': return 'Vertex Shader';
+    case 'visible': return 'Visible';
+    case 'wireframe': return 'Wireframe';
+  }
+  return name;
+}
+
+export function clampedNames(name: string): boolean {
+  return (
+    name.toLowerCase().search('intensity') > -1 ||
+    name === 'anisotropyRotation' ||
+    name === 'bumpScale' ||
+    name === 'clearcoatRoughness' ||
+    name === 'displacementBias' ||
+    name === 'displacementScale' ||
+    name === 'metalness' ||
+    name === 'opacity' ||
+    name === 'reflectivity' ||
+    name === 'refractionRatio' ||
+    name === 'roughness' ||
+    name === 'sheenRoughness' ||
+    name === 'thickness'
+  );
+}
+
+export function uploadLocalImage(): Promise<string> {
+  const inputElement = document.createElement('input');
+  inputElement.type = 'file';
+  return new Promise((resolve: any, reject: any) => {
+    inputElement.addEventListener('change', function() {
+      if (inputElement.files  === null) {
+        reject();
+      } else {
+        const selectedFile = inputElement.files[0];
+        const reader = new FileReader();
+        reader.onload = function(e: any) {
+          resolve(e.target.result);
+        };
+        reader.readAsDataURL(selectedFile);
+      }
+    });
+    inputElement.click();
+  });
+}
+
+export function inspectMaterialItems(material: RemoteMaterial, object: RemoteObject, three: RemoteThree): any[] {
+  const items: any[] = [];
+  for (const i in material) {
+    if (!acceptedMaterialNames(i)) continue;
+
+    const propType = typeof material[i];
+    const value = material[i];
+    if (propType === 'boolean' || propType === 'number' || propType === 'string') {
+      const newField = {
+        title: niceMaterialNames(i),
+        prop: i,
+        type: propType,
+        value: value,
+        min: undefined,
+        max: undefined,
+        onChange: (prop: string, value: any) => {
+          three.updateObject(object.uuid, `material.${prop}`, value);
+          if (propType === 'boolean') three.updateObject(object.uuid, 'material.needsUpdate', true);
+          // Local update
+          const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+          if (child !== undefined) setItemProps(child, `material.${prop}`, value);
+        },
+      };
+      if (clampedNames(i)) {
+        newField.value = Number(value);
+        // @ts-ignore
+        newField.type = 'range';
+        // @ts-ignore
+        newField.min = 0;
+        // @ts-ignore
+        newField.max = 1;
+        // @ts-ignore
+        newField.step = 0.01;
+      }
+      items.push(newField);
+    } else if (propType === 'object') {
+      if (value.isColor) {
+        items.push({
+          title: niceMaterialNames(i),
+          prop: i,
+          type: 'color',
+          value: value,
+          onChange: (prop: string, value: any) => {
+            const newValue = new Color(value);
+            three.updateObject(object.uuid, `material.${prop}`, newValue);
+            // Local update
+            const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+            if (child !== undefined) setItemProps(child, `material.${prop}`, newValue);
+          },
+        });
+      } else if (Array.isArray(value)) {
+        const subChildren: any[] = [];
+        for (const index in value) {
+          subChildren.push({
+            title: `${index}`,
+            type: `${typeof value[index]}`,
+            value: value[index],
+            onChange: (prop: string, value: any) => {
+              three.updateObject(object.uuid, `material.${i}`, value);
+              // Local update
+              const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+              if (child !== undefined) setItemProps(child, `material.${i}`, value);
+            },
+          });
+        }
+        items.push({
+          title: niceMaterialNames(i),
+          items: subChildren,
+        });
+      } else {
+        const subChildren: any[] = [];
+        for (const n in value) {
+          const propValue = value[n];
+          const propValueType = typeof propValue;
+          switch (propValueType) {
+            case 'boolean':
+            case 'number':
+            case 'string':
+              if (n === 'src') {
+                items.push({
+                  title: niceMaterialNames(i),
+                  type: 'image',
+                  value: propValue,
+                  onChange: (prop: string, value: any) => {
+                    three.createTexture(object.uuid, `material.${i}`, value);
+                    // Local update
+                    const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+                    if (child !== undefined) {
+                      textureFromSrc(value).then((texture: Texture) => {
+                        setItemProps(child, `material.${i}`, texture);
+                        setItemProps(child, `material.needsUpdate`, true);
+                      });
+                    }
+                  },
+                });
+              } else {
+                subChildren.push({
+                  title: `${niceMaterialNames(n)}`,
+                  prop: `material.${i}.${n}`,
+                  type: `${typeof material[i][n]}`,
+                  value: value[n],
+                  onChange: (prop: string, value: any) => {
+                    three.updateObject(object.uuid, `material.${i}.${n}`, value);
+                    // Local update
+                    const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+                    if (child !== undefined) setItemProps(child, `material.${i}.${n}`, value);
+                  },
+                });
+              }
+              break;
+            case 'object':
+              // Uniform textures
+              if (propValue.value !== undefined && propValue.value.src !== undefined) {
+                subChildren.push({
+                  title: niceMaterialNames(n),
+                  type: 'image',
+                  value: propValue.value.src,
+                  onChange: (prop: string, value: any) => {
+                    three.createTexture(object.uuid, `material.${i}.${n}.value`, value);
+                    // Local update
+                    const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+                    if (child !== undefined) {
+                      textureFromSrc(value).then((texture: Texture) => {
+                        setItemProps(child, `material.${i}.${n}.value`, texture);
+                      });
+                    }
+                  },
+                });
+              } else {
+                subChildren.push({
+                  title: n,
+                  type: `${typeof propValue.value}`,
+                  value: propValue.value,
+                  onChange: (prop: string, value: any) => {
+                    three.updateObject(object.uuid, `material.${i}.${n}.value`, value);
+                    // Local update
+                    const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+                    if (child !== undefined) setItemProps(child, `material.${i}.${n}.value`, value);
+                  },
+                });
+              }
+              break;
+          }
+        }
+
+        if (subChildren.length > 0) {
+          items.push({
+            title: niceMaterialNames(i),
+            items: subChildren,
+          });
+        }
+      }
+    } else if (value !== undefined) {
+      console.log('other:', i, propType, value);
+    }
+  }
+
+  // Sort items
+  items.sort((a: any, b: any) => {
+    if (a.title < b.title) return -1;
+    if (a.title > b.title) return 1;
+    return 0;
+  });
+
+  items.push({
+    title: 'Update Material',
+    type: 'button',
+    onChange: () => {
+      three.updateObject(object.uuid, `material.needsUpdate`, true);
+    },
+  });
+
+  return items;
+}
+
+// RemoteMaterial | RemoteMaterial[]
+export function InspectMaterial(object: RemoteObject, three: RemoteThree): any {
+  const material = object.material!;
+  if (Array.isArray(material)) {
+    const items: any[] = [];
+    const total = material.length;
+    for (let i = 0; i < total; i++) {
+      items.push(
+        <InspectorGroup
+          title={`Material ${i}`}
+          items={inspectMaterialItems(material[i], object, three)}
+        />
+      );
+    }
+    return <>{items}</>;
+  } else {
+    return (
+      <InspectorGroup
+        title="Material"
+        items={inspectMaterialItems(material, object, three)}
+      />
+    );
+  }
+  return null;
+}