@tomorrowevening/hermes 0.0.27 → 0.0.29

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

@@ -1,51 +1,102 @@
+import { AnimationMixer } from 'three';
 import RemoteThree from '@/core/remote/RemoteThree';
 import InspectorGroup from '../InspectorGroup';
-import { InspectorFieldProps } from '../InspectorField';
 import { AnimationClipInfo, RemoteObject } from '../../types';
-import { setItemProps } from '../../utils';
 
 export default function InspectAnimation(obj: RemoteObject, three: RemoteThree) {
-  const items: InspectorFieldProps[] = [];
-  obj.animations.forEach((value: AnimationClipInfo) => {
+  const items: any[] = [];
+  const animations: any[] = [];
+  let maxDuration = 0;
+  obj.animations.forEach((clipInfo: AnimationClipInfo) => {
     // Add animation
-    items.push({
-      title: 'Name',
-      type: 'string',
-      prop: 'name',
-      value: value.name,
-      disabled: true,
-      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);
-      },
-    });
-    items.push({
-      title: 'Duration',
-      type: 'number',
-      prop: 'duration',
-      value: value.duration,
-      disabled: true,
-      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);
-      },
-    });
-    items.push({
-      title: 'Blend Mode',
-      type: 'number',
-      prop: 'blendMode',
-      value: value.blendMode,
-      disabled: true,
-      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);
-      },
-    });
+    maxDuration = Math.max(maxDuration, clipInfo.duration);
+    if (clipInfo.duration > 0) {
+      animations.push({
+        title: clipInfo.name,
+        items: [
+          {
+            title: 'Duration',
+            type: 'number',
+            value: clipInfo.duration,
+            disabled: true,
+          },
+          {
+            title: 'Blend Mode',
+            type: 'option',
+            disabled: true,
+            options: [
+              {
+                title: 'Normal',
+                value: 2500,
+              },
+              {
+                title: 'Additive',
+                value: 2501,
+              },
+            ],
+          }
+        ]
+      });
+    }
   });
+  items.push({
+    title: 'Animations',
+    items: animations
+  });
+
+  const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
+  let hasMixer = false;
+  if (child !== undefined) {
+    const mixer = child['mixer'] as AnimationMixer;
+    hasMixer = mixer !== undefined;
+    if (hasMixer) {
+      const mixerItems: any[] = [
+        {
+          title: 'Time Scale',
+          type: 'range',
+          value: mixer.timeScale,
+          step: 0.01,
+          min: -1,
+          max: 2,
+          onChange: (_: string, value: any) => {
+            mixer.timeScale = value;
+            three.updateObject(obj.uuid, 'mixer.timeScale', value);
+          },
+        },
+      ];
+      // animations.forEach((animation: any, index: number) => {
+      //   if (obj.animations[index].duration > 0) {
+      //     mixerItems.push({
+      //       title: `Play: ${animation.title}`,
+      //       type: 'button',
+      //       onChange: () => {
+      //         // Stop Previous
+      //         mixer.stopAllAction();
+      //         three.requestMethod(obj.uuid, 'stopAllAction', undefined, 'mixer');
+
+      //         //
+      //         const clip = child.animations[index] as AnimationClip;
+      //         const action = mixer.clipAction(clip);
+      //         action.play();
+      //       }
+      //     });
+      //   }
+      // });
+      mixerItems.push({
+        title: 'Stop All',
+        type: 'button',
+        onChange: () => {
+          mixer.stopAllAction();
+          three.requestMethod(obj.uuid, 'stopAllAction', undefined, 'mixer');
+        }
+      });
+      items.push({
+        title: 'Mixer',
+        items: mixerItems
+      });
+    }
+  }
   return (
-    <InspectorGroup title='Animations' items={items} />
+    <InspectorGroup title='Animation' items={items} />
   );
 }

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

@@ -1,14 +1,16 @@
-import { Color, Texture } from 'three';
+import { AddEquation, AdditiveBlending, BackSide, Color, ConstantAlphaFactor, ConstantColorFactor, CustomBlending, DoubleSide, DstAlphaFactor, DstColorFactor, FrontSide, MaxEquation, MinEquation, MultiplyBlending, NoBlending, NormalBlending, OneFactor, OneMinusConstantAlphaFactor, OneMinusConstantColorFactor, OneMinusDstAlphaFactor, OneMinusDstColorFactor, OneMinusSrcAlphaFactor, OneMinusSrcColorFactor, ReverseSubtractEquation, SrcAlphaFactor, SrcAlphaSaturateFactor, SrcColorFactor, SubtractEquation, SubtractiveBlending, Texture, ZeroFactor } from 'three';
 import InspectorGroup from '../InspectorGroup';
 import { RemoteMaterial, RemoteObject } from '../../types';
 import RemoteThree from '@/core/remote/RemoteThree';
 import { setItemProps, textureFromSrc } from '../../utils';
+import { capitalize } from '@/editor/utils';
 
 export function acceptedMaterialNames(name: string): boolean {
   return !(
     name === 'alphaHash' ||
     name === 'alphaToCoverage' ||
     name === 'attenuationDistance' ||
+    name === 'blendDstAlpha' ||
     name === 'colorWrite' ||
     name === 'combine' ||
     name === 'defaultAttributeValues' ||
@@ -22,7 +24,6 @@ export function acceptedMaterialNames(name: string): boolean {
     name === 'precision' ||
     name === 'premultipliedAlpha' ||
     name === 'shadowSide' ||
-    name === 'side' ||
     name === 'toneMapped' ||
     name === 'uniformsGroups' ||
     name === 'uniformsNeedUpdate' ||
@@ -32,7 +33,6 @@ export function acceptedMaterialNames(name: string): boolean {
     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' ||
@@ -48,6 +48,15 @@ export function prettyName(name: string): string {
     case 'aoMap': return 'AO Map';
     case 'aoMapIntensity': return 'AO Map Intensity';
     case 'attenuationColor': return 'Attenuation Color';
+    case 'blendAlpha': return 'Blend Alpha';
+    case 'blendColor': return 'Blend Color';
+    case 'blendDst': return 'Blend Dst';
+    case 'blendDstAlpha': return 'Blend Dst Alha';
+    case 'blendEquation': return 'Blend Equation';
+    case 'blendEquationAlpha': return 'Blend Equation Alpha';
+    case 'blending': return 'Blending';
+    case 'blendSrc': return 'Blend Src';
+    case 'blendSrcAlpha': return 'Blend Src Alpha';
     case 'bumpMap': return 'Bump Map';
     case 'bumpScale': return 'Bump Scale';
     case 'clearcoatMap': return 'Clearcoat Map';
@@ -98,6 +107,7 @@ export function prettyName(name: string): string {
     case 'sheenRoughness': return 'Sheen Roughness';
     case 'sheenRoughnessMap': return 'Sheen Roughness Map';
     case 'shininess': return 'Shininess';
+    case 'side': return 'Side';
     case 'size': return 'Size';
     case 'sizeAttenuation': return 'Size Attenuation';
     case 'specular': return 'Specular';
@@ -124,6 +134,7 @@ export function clampedNames(name: string): boolean {
   return (
     name.toLowerCase().search('intensity') > -1 ||
     name === 'anisotropyRotation' ||
+    name === 'blendAlpha' ||
     name === 'bumpScale' ||
     name === 'clearcoatRoughness' ||
     name === 'displacementBias' ||
@@ -158,6 +169,205 @@ export function uploadLocalImage(): Promise<string> {
   });
 }
 
+// Material side
+
+const materialSideOpts: any[] = [
+  {
+    title: 'Front',
+    value: FrontSide,
+  },
+  {
+    title: 'Back',
+    value: BackSide,
+  },
+  {
+    title: 'Double',
+    value: DoubleSide,
+  },
+];
+
+// Blending
+
+const blendingOpts: any[] = [
+  {
+    title: 'No Blending',
+    value: NoBlending,
+  },
+  {
+    title: 'Normal',
+    value: NormalBlending,
+  },
+  {
+    title: 'Additive',
+    value: AdditiveBlending,
+  },
+  {
+    title: 'Subtractive',
+    value: SubtractiveBlending,
+  },
+  {
+    title: 'Multiply',
+    value: MultiplyBlending,
+  },
+  {
+    title: 'Custom',
+    value: CustomBlending,
+  }
+];
+
+const blendingEquationOpts: any[] = [
+  {
+    title: 'Add',
+    value: AddEquation,
+  }, 
+  {
+    title: 'Subtract',
+    value: SubtractEquation,
+  }, 
+  {
+    title: 'Reverse Subtract',
+    value: ReverseSubtractEquation,
+  },
+  {
+    title: 'Min',
+    value: MinEquation,
+  }, 
+  {
+    title: 'Max',
+    value: MaxEquation,
+  },
+];
+
+// Blending Equations (Source)
+const blendSourceOpts: any[] = [
+  {
+    title: 'Zero',
+    valye: ZeroFactor,
+  },
+  {
+    title: 'One',
+    valye: OneFactor,
+  },
+  {
+    title: 'Src Color',
+    valye: SrcColorFactor,
+  },
+  {
+    title: 'One Minus Src Color',
+    valye: OneMinusSrcColorFactor,
+  },
+  {
+    title: 'Src Alpha',
+    valye: SrcAlphaFactor,
+  },
+  {
+    title: 'One Minus Src Alpha',
+    valye: OneMinusSrcAlphaFactor,
+  },
+  {
+    title: 'Dst Alpha',
+    valye: DstAlphaFactor,
+  },
+  {
+    title: 'One Minus Dst Alpha',
+    valye: OneMinusDstAlphaFactor,
+  },
+  {
+    title: 'Dst Color',
+    valye: DstColorFactor,
+  },
+  {
+    title: 'One Minus Dst Color',
+    valye: OneMinusDstColorFactor,
+  },
+  {
+    title: 'Src Alpha Saturate',
+    valye: SrcAlphaSaturateFactor,
+  },
+  {
+    title: 'Constant Color',
+    valye: ConstantColorFactor,
+  },
+  {
+    title: 'One Minus Constant Color',
+    valye: OneMinusConstantColorFactor,
+  },
+  {
+    title: 'Constant Alpha',
+    valye: ConstantAlphaFactor,
+  },
+  {
+    title: 'One Minus Constant Alpha',
+    valye: OneMinusConstantAlphaFactor,
+  },
+];
+
+// Blending Equations (Destination)
+const blendDestinationOpts: any[] = [
+  {
+    title: 'Zero',
+    valye: ZeroFactor,
+  },
+  {
+    title: 'One',
+    valye: OneFactor,
+  },
+  {
+    title: 'Src Color',
+    valye: SrcColorFactor,
+  },
+  {
+    title: 'One Minus Src Color',
+    valye: OneMinusSrcColorFactor,
+  },
+  {
+    title: 'Src Alpha',
+    valye: SrcAlphaFactor,
+  },
+  {
+    title: 'One Minus Src Alpha',
+    valye: OneMinusSrcAlphaFactor,
+  },
+  {
+    title: 'Dst Alpha',
+    valye: DstAlphaFactor,
+  },
+  {
+    title: 'One Minus Dst Alpha',
+    valye: OneMinusDstAlphaFactor,
+  },
+  {
+    title: 'Dst Color',
+    valye: DstColorFactor,
+  },
+  {
+    title: 'One Minus Dst Color',
+    valye: OneMinusDstColorFactor,
+  },
+  {
+    title: 'Constant Color',
+    valye: ConstantColorFactor,
+  },
+  {
+    title: 'One Minus Constant Color',
+    valye: OneMinusConstantColorFactor,
+  },
+  {
+    title: 'Constant Alpha',
+    valye: ConstantAlphaFactor,
+  },
+  {
+    title: 'One Minus Constant Alpha',
+    valye: OneMinusConstantAlphaFactor,
+  },
+];
+
+function updateFieldOptions(obj: any, options: any[]) {
+  obj.needsUpdate = true;
+  obj.type = 'option';
+  obj.options = options;
+}
+
 export function inspectMaterialItems(material: RemoteMaterial, object: RemoteObject, three: RemoteThree): any[] {
   const items: any[] = [];
   for (const i in material) {
@@ -173,14 +383,34 @@ export function inspectMaterialItems(material: RemoteMaterial, object: RemoteObj
         value: value,
         min: undefined,
         max: undefined,
+        needsUpdate: propType === 'boolean',
         onChange: (prop: string, value: any) => {
           three.updateObject(object.uuid, `material.${prop}`, value);
-          if (propType === 'boolean') three.updateObject(object.uuid, 'material.needsUpdate', true);
+          if (newField.needsUpdate) 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);
         },
       };
+
+      switch (i) {
+        case 'blending':
+          updateFieldOptions(newField, blendingOpts);
+          break;
+        case 'blendDst':
+          updateFieldOptions(newField, blendDestinationOpts);
+          break;
+        case 'blendEquation':
+          updateFieldOptions(newField, blendingEquationOpts);
+          break;
+        case 'blendSrc':
+          updateFieldOptions(newField, blendSourceOpts);
+          break;
+        case 'side':
+          updateFieldOptions(newField, materialSideOpts);
+          break;
+      }
+
       if (clampedNames(i)) {
         newField.value = Number(value);
         // @ts-ignore
@@ -192,7 +422,33 @@ export function inspectMaterialItems(material: RemoteMaterial, object: RemoteObj
         // @ts-ignore
         newField.step = 0.01;
       }
+
+      const isShader = propType === 'string' && (i === 'vertexShader' || i === 'fragmentShader');
+      if (isShader) {
+        newField['disabled'] = false;
+        newField['latest'] = newField.value;
+        newField.onChange = (_: string, updatedValue: string) => {
+          newField['latest'] = updatedValue;
+        };
+      }
       items.push(newField);
+
+      if (isShader) {
+        items.push({
+          title: `${capitalize(i)} - Update`,
+          type: 'button',
+          onChange: () => {
+            three.updateObject(object.uuid, `material.${i}`, newField['latest']);
+            three.updateObject(object.uuid, 'material.needsUpdate', true);
+            // Local update
+            const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+            if (child !== undefined) {
+              setItemProps(child, `material.${i}`, newField['latest']);
+              child['material'].needsUpdate = true;
+            }
+          },
+        });
+      }
     } else if (propType === 'object') {
       if (value.isColor) {
         items.push({
@@ -294,6 +550,7 @@ export function inspectMaterialItems(material: RemoteMaterial, object: RemoteObj
                     title: vTitle,
                     type: 'number',
                     value: floatValue,
+                    step: 0.01,
                     onChange: (_: string, updatedValue: any) => {
                       const id = `material.uniforms.${n}.value.${vProp}`;
                       three.updateObject(object.uuid, id, updatedValue);

package/src/editor/sidePanel/utils.ts

@@ -220,6 +220,26 @@ export function stripObject(obj: Object3D): RemoteObject {
   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;

package/src/editor/utils.ts

@@ -1,5 +1,9 @@
 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));
 }

package/types/core/remote/RemoteThree.d.ts

@@ -6,7 +6,7 @@ export default class RemoteThree extends BaseRemote {
     scene?: Scene;
     getObject(uuid: string): void;
     setObject(value: any): void;
-    requestMethod(uuid: string, key: string, value?: any): void;
+    requestMethod(uuid: string, key: string, value?: any, subitem?: string): void;
     updateObject(uuid: string, key: string, value: any): void;
     createTexture(uuid: string, key: string, value: any): void;
     setScene(value: Scene): void;

package/types/editor/global.d.ts

@@ -1,5 +1,5 @@
 import { EventDispatcher } from 'three';
-export declare const debugDispatcher: EventDispatcher<import("three").Event>;
+export declare const debugDispatcher: EventDispatcher<{}>;
 export declare const ToolEvents: {
     CUSTOM: string;
     SELECT_DROPDOWN: string;

package/types/editor/sidePanel/inspector/InspectorField.d.ts

@@ -1,4 +1,4 @@
-export type InspectorFieldType = 'string' | 'number' | 'boolean' | 'range' | 'color' | 'button' | 'image';
+export type InspectorFieldType = 'string' | 'number' | 'boolean' | 'range' | 'color' | 'button' | 'image' | 'option';
 export interface InspectorFieldProps {
     title: string;
     type: InspectorFieldType;
@@ -8,6 +8,7 @@ export interface InspectorFieldProps {
     max?: number;
     step?: number;
     disabled?: boolean;
+    options?: any[];
     onChange?: (prop: string, value: any) => void;
 }
 export default function InspectorField(props: InspectorFieldProps): import("react/jsx-runtime").JSX.Element;

package/types/editor/sidePanel/utils.d.ts

@@ -4,5 +4,6 @@ export declare function determineIcon(obj: Object3D): string;
 export declare function stripScene(obj: Object3D): MinimumObject;
 export declare function convertImageToBase64(imgElement: HTMLImageElement): string;
 export declare function stripObject(obj: Object3D): RemoteObject;
+export declare function getSubItem(child: any, key: string): any;
 export declare function setItemProps(child: any, key: string, value: any): void;
 export declare function textureFromSrc(imgSource: string): Promise<Texture>;

package/types/editor/utils.d.ts

@@ -1,4 +1,5 @@
 import { Material, Object3D, Texture } from 'three';
+export declare function capitalize(value: string): string;
 export declare function clamp(min: number, max: number, value: number): number;
 export declare function distance(x: number, y: number): number;
 export declare function randomID(): string;