Drag drop texture trait

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({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({confirmDialog,animationManager, blinkManager, lo
     manifestSelectionIndex, 
     moveCamera,
     avatar,
-    setDisplayTraitOption
+    setDisplayTraitOption,
+    currentVRM,
+    setCurrentVRM
   } = useContext(SceneContext);
 
   const { isMute } = useContext(AudioContext)
@@ -47,7 +50,6 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
   } = useContext(SoundContext)
 
   const [cameraFocused, setCameraFocused] = React.useState(false)
-  const [currentVRM, setCurrentVRM] = React.useState(null)
 
   // options are selected by random or start
   useEffect(() => {
@@ -61,6 +63,12 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
     setCurrentTraitName(null)
   }, [templateInfo])
 
+  useEffect(()=>{
+    if (uploadTextureURL != null && currentVRM != null){
+      setTextureToChildMeshes(currentVRM.scene,uploadTextureURL)
+    }
+  },[uploadTextureURL])
+
 
   const selectOption = (option) => {
     !isMute && playSound('optionClick');

src/components/TraitInformation.jsx

@@ -5,10 +5,11 @@ import { SceneContext } from "../context/SceneContext";
 import Slider from "./Slider";
 import { cullHiddenMeshes } from "../library/utils";
 
-export default function TraitInformation({currentVRM, animationManager, lookatManager}){
+export default function TraitInformation({animationManager, lookatManager}){
     const {
         displayTraitOption,
-        avatar
+        avatar,
+        currentVRM
     } = useContext(SceneContext);
 
     const [cullOutDistance, setCullOutDistance] = useState(0); // set from the values of the trait

src/context/SceneContext.jsx

@@ -40,6 +40,8 @@ export const SceneProvider = (props) => {
   const [currentOptions, setCurrentOptions] = useState([])
   const [displayTraitOption, setDisplayTraitOption] = useState(null)
 
+  const [currentVRM, setCurrentVRM] = React.useState(null)
+
   const [model, setModel] = useState(new THREE.Object3D())
   const [animationManager, setAnimationManager] = useState(null)
   const [camera, setCamera] = useState(null)
@@ -205,6 +207,8 @@ export const SceneProvider = (props) => {
     <SceneContext.Provider
       value={{
         vrmHelperRoot,
+        currentVRM,
+        setCurrentVRM,
 
         awaitDisplay, 
         setAwaitDisplay,

src/library/utils.js

@@ -28,6 +28,42 @@ 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);
+  texture.flipY = false;
+
+  // 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) {
+          if(!materials[i].name.includes("(Outline)")){
+            console.log(materials[i].name);
+            materials[i].uniforms.map.value = texture
+            materials[i].uniforms.shadeMultiplyTexture.value = 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

@@ -26,7 +26,9 @@ function Appearance({
     setIsChangingWholeAvatar,
     toggleDebugMNode,
     templateInfo,
-    setSelectedOptions
+    setSelectedOptions,
+    setCurrentVRM,
+    setDisplayTraitOption,
   } = React.useContext(SceneContext)
 
 
@@ -36,14 +38,16 @@ function Appearance({
     !isMute && playSound('backNextButton');
     resetAvatar()
     setViewMode(ViewMode.CREATE)
+    setDisplayTraitOption(null);
   }
 
   const [jsonSelectionArray, setJsonSelectionArray] = React.useState(null)
-
+  const [uploadTextureURL, setUploadTextureURL] = React.useState(null)
 
   const next = () => {
     !isMute && playSound('backNextButton');
-    setViewMode(ViewMode.BIO)
+    setViewMode(ViewMode.BIO);
+    setDisplayTraitOption(null);
   }
 
   const randomize = () => {
@@ -83,16 +87,25 @@ function Appearance({
   // Translate hook
   const { t } = useContext(LanguageContext)
 
+  const handleAnimationDrop = async (file) => {
+    const animName = getFileNameWithoutExtension(file.name);
+    const path = URL.createObjectURL(file);
+    await animationManager.loadAnimation(path, true, "", animName);
+  }
+
+  const handleImageDrop = (file) => {
+    const path = URL.createObjectURL(file);
+    setUploadTextureURL(path);
+  }
+
   const handleFilesDrop = async(files) => {
     const file = files[0];
     // Check if the file has the .fbx extension
     if (file && file.name.toLowerCase().endsWith('.fbx')) {
-      const animName = getFileNameWithoutExtension(file.name);
-      console.log('Dropped .fbx file:', file);
-      const path = URL.createObjectURL(file);
-      console.log("path")
-      await animationManager.loadAnimation(path, true, "", animName);
-      // Handle the dropped .fbx file
+      handleAnimationDrop(file);
+    } 
+    if (file && (file.name.toLowerCase().endsWith('.png') || file.name.toLowerCase().endsWith('.jpg'))) {
+      handleImageDrop(file);
     } 
 
     const filesArray = Array.from(files);
@@ -174,6 +187,7 @@ function Appearance({
         effectManager={effectManager}
         confirmDialog={confirmDialog}
         jsonSelectionArray={jsonSelectionArray}
+        uploadTextureURL = {uploadTextureURL}
       />
       <div className={styles.buttonContainer}>
         <CustomButton