reverse Y for texture

src/components/Editor.jsx

@@ -18,9 +18,10 @@ import JsonAttributes from "./JsonAttributes"
 import { TokenBox } from "./token-box/TokenBox"
 import { LanguageContext } from "../context/LanguageContext"
 import MenuTitle from "./MenuTitle"
+import { setTextureToChildMeshes } from "../library/utils"
 
 
-export default function Editor({uploadTexture,confirmDialog,animationManager, blinkManager, lookatManager, effectManager, jsonSelectionArray}) {
+export default function Editor({uploadTextureURL,confirmDialog,animationManager, blinkManager, lookatManager, effectManager, jsonSelectionArray}) {
   const {
     currentTraitName, 
     setCurrentTraitName, 
@@ -34,7 +35,9 @@ export default function Editor({uploadTexture,confirmDialog,animationManager, bl
     manifestSelectionIndex, 
     moveCamera,
     avatar,
-    setDisplayTraitOption
+    setDisplayTraitOption,
+    currentVRM,
+    setCurrentVRM
   } = useContext(SceneContext);
 
   const { isMute } = useContext(AudioContext)
@@ -47,7 +50,6 @@ export default function Editor({uploadTexture,confirmDialog,animationManager, bl
   } = useContext(SoundContext)
 
   const [cameraFocused, setCameraFocused] = React.useState(false)
-  const [currentVRM, setCurrentVRM] = React.useState(null)
 
   // options are selected by random or start
   useEffect(() => {
@@ -62,10 +64,10 @@ export default function Editor({uploadTexture,confirmDialog,animationManager, bl
   }, [templateInfo])
 
   useEffect(()=>{
-    if (uploadTexture != null){
-      console.log(uploadTexture);
+    if (uploadTextureURL != null && currentVRM != null){
+      setTextureToChildMeshes(currentVRM.scene,uploadTextureURL)
     }
-  },[uploadTexture])
+  },[uploadTextureURL])
 
 
   const selectOption = (option) => {

src/library/utils.js

@@ -28,6 +28,41 @@ export async function prepareModel(templateInfo){
     return loadModel(trait)
   }));
 }
+export async function setTextureToChildMeshes(scene, textureFile){
+  console.log(scene);
+  console.log(textureFile);
+
+  const textureLoader = new THREE.TextureLoader();
+
+  // Load the image as a texture
+  const texture = await textureLoader.load(textureFile);
+  console.log(texture)
+  texture.flipY = false;
+  texture.needsUpdate = true;
+
+  // Traverse through the child meshes in the scene
+  scene.traverse((object) => {
+    if (object instanceof THREE.Mesh) {
+      const materials = !Array.isArray(object.material) ? [object.material] : object.material
+      // Assign the texture to the material
+      for (let i = 0; i < materials.length; i++) {
+        if (materials[i] instanceof THREE.ShaderMaterial) {
+          materials[i].uniforms.map = texture
+          materials[i].uniforms.shadeMultiplyTexture = texture;
+        }
+        else{
+          materials[i].map = texture
+        }
+        console.log(materials[i]);
+        materials[i].needsUpdate = true
+
+      }
+    }
+  });
+
+  // get all mesh children from scene and apply texture to standard material
+
+}
 
 export function getFileNameWithoutExtension(filePath) {
   // Get the base file name without the extension

src/pages/Appearance.jsx

@@ -43,7 +43,7 @@ function Appearance({
   }
 
   const [jsonSelectionArray, setJsonSelectionArray] = React.useState(null)
-  const [uploadTexture, setUploadTexture] = React.useState(null)
+  const [uploadTextureURL, setUploadTextureURL] = React.useState(null)
 
   const next = () => {
     !isMute && playSound('backNextButton');
@@ -96,7 +96,8 @@ function Appearance({
   }
 
   const handleImageDrop = (file) => {
-    setUploadTexture(file);
+    const path = URL.createObjectURL(file);
+    setUploadTextureURL(path);
   }
 
   const handleFilesDrop = async(files) => {
@@ -188,7 +189,7 @@ function Appearance({
         effectManager={effectManager}
         confirmDialog={confirmDialog}
         jsonSelectionArray={jsonSelectionArray}
-        uploadTexture = {uploadTexture}
+        uploadTextureURL = {uploadTextureURL}
       />
       <div className={styles.buttonContainer}>
         <CustomButton