fix character.material gui warning

culdo · Jan 4, 2025 · 7eecd43 · 7eecd43
1 parent 6f69689
commit 7eecd43
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 23 deletions.
diff --git a/app/components/three-world/ModelController/material/index.tsx b/app/components/three-world/ModelController/material/index.tsx
@@ -4,7 +4,7 @@ import useGlobalStore from "@/app/stores/useGlobalStore";
 import usePresetStore from "@/app/stores/usePresetStore";
 import { buildGuiItem, buildMaterialGuiItem } from "@/app/utils/gui";
 import { button, folder, useControls } from "leva";
-import { Schema } from "leva/dist/declarations/src/types";
+import { OnChangeHandler, Schema } from "leva/dist/declarations/src/types";
 import _ from "lodash";
 import { use, useEffect, useMemo, useRef, useState } from "react";
 import * as THREE from "three";
@@ -25,34 +25,24 @@ function Material({ type, modelPromise }: { type: string, modelPromise: Promise<
 
     const [controllers, setContollers] = useState<Schema>()
 
-    function updateTexture(material: { [x: string]: any; needsUpdate: boolean; }, materialKey: string, textures: { [x: string]: any; none?: null; skin?: THREE.Texture; }) {
-        return function (key: string | number) {
+    function updateTexture(material: { [x: string]: any; needsUpdate: boolean; }, materialKey: string, textures: Record<string, any>) {
+        const handler: OnChangeHandler = (key: string) => {
             material[materialKey] = textures[key];
             material.needsUpdate = true;
-        };
+        }
+        return [handler, textures] as const;
     }
 
     const skin = textureLoader.load("https://raw.githubusercontent.com/ray-cast/ray-mmd/master/Materials/_MaterialMap/skin.png");
     skin.wrapS = THREE.RepeatWrapping;
     skin.wrapT = THREE.RepeatWrapping;
     skin.repeat.set(80, 80);
 
-    const normalMaps: any = {
-        none: null,
+    const normalMaps = {
+        none: null as null,
         skin
     };
-    const normalMapsKeys = Object.keys(normalMaps)
-
-    const saveMaterial = () => {
-        const target = materials[targetMaterialIdx]
-        const targetJson = target.toJSON()
-        delete targetJson.map
-
-        material[target.name] = targetJson
-
-        usePresetStore.setState({ material: { ...material } })
-    }
-
+
     const needsUpdate = (material: THREE.Material) => {
         return () => {
             material.needsUpdate = true;

diff --git a/app/utils/gui.ts b/app/utils/gui.ts
@@ -119,7 +119,7 @@ function buildFlexGuiItem<T>(path: string, handler?: OnChangeHandler) {
     }
 }
 
-function buildMaterialGuiItem<T>(key: keyof THREE.MeshPhysicalMaterial | `userData.${string}`, handler?: OnChangeHandler, min = 0, max = 1) {
+function buildMaterialGuiItem<T>(key: keyof THREE.MeshPhysicalMaterial | `userData.${string}`, handlerOrArgs?: OnChangeHandler | readonly [OnChangeHandler, Record<string, any>], min = 0, max = 1) {
     const character = useGlobalStore.getState()["character"]
     const targetMaterialIdx = usePresetStore.getState()["targetMaterialIdx"]
 
@@ -134,8 +134,16 @@ function buildMaterialGuiItem<T>(key: keyof THREE.MeshPhysicalMaterial | `userDa
     const initValFromMaterial = targetProp instanceof THREE.Color ? `#${targetProp.getHexString()}` : targetProp
     const initialValue = _.get(usePresetStore.getState(), configPath) ?? initValFromMaterial
 
-    const onChange: OnChangeHandler = (value, path, options) => {
-        if (!options.initial) {
+    let handler: OnChangeHandler;
+    let options: Record<string, any>;
+    if(Array.isArray(handlerOrArgs)) {
+        [handler, options] = handlerOrArgs
+    } else if(typeof handlerOrArgs == "function") {
+        handler = handlerOrArgs
+    }
+
+    const onChange: OnChangeHandler = (value, path, context) => {
+        if (!context.initial) {
             usePresetStore.setState((prevState) => {
                 _.set(prevState, configPath, value)
                 return { ...prevState }
@@ -150,7 +158,7 @@ function buildMaterialGuiItem<T>(key: keyof THREE.MeshPhysicalMaterial | `userDa
             _.set(targetMaterial, key, value)
         }
         if (handler) {
-            handler(value, path, options)
+            handler(value, path, context)
         }
     }
     if(typeof initialValue == "number") {
@@ -161,7 +169,15 @@ function buildMaterialGuiItem<T>(key: keyof THREE.MeshPhysicalMaterial | `userDa
             onChange,
             transient: false as const
         }
-    } 
+    }
+    if(options) {
+        return {
+            value: initialValue as T,
+            onChange,
+            transient: false as const,
+            options
+        }
+    }
     return {
         value: initialValue as T,
         onChange,