How to load texture dynamically to character

Questions
,
1

I want to load the textures like clothes etc. to a character dynamically like by picking up the texture manually and load it in character

Something like this:

image
image1920Ă—1080 90.7 KB

Any ideas ??

Thank you

2

There’s been discussion of this on the forum, you may want to take a look at: How to bind separate glb file such as cloth etc to armature? - Questions - Babylon.js (babylonjs.com)

1 Like
3

You can directly modify the texture applied to the mesh.

clothe.material.diffuseTexture = new BABYLON.Texture(yourDiffuseTexture, this.scene);

When you click on an image of clothe, retrieve the reference of the texture with the path and apply it to the character.

All textures must be in the same folder as the character as well.

4

Think you mixed up the order a little:
clothe.material.diffuseTexture = new BABYLON.Texture(url, this.scene);

Textures have names, but from the constructor, it is also the url. Good news is image file can be anywhere. The bad news is the image must perfectly match, as far as where everything is.

6

@JCPalmer I am not able to get it,
I want to load the texture like clothes, etc., dynamically either in gltf or after loading of gltf from sceneloader.ImportMeshAsync.

Reference video link:
https://drive.500apps.com/3e86836a

Here is my code:

 SceneLoader.ImportMeshAsync("", path, object.name, scene).then((result) => {
      var mesh = result.meshes[0];
      if (object.position) mesh.position = new Vector3(object.position.x, object.position.y, object.position.z);
      if (object?.is_movable) {
        mesh.speed = 5;
        Camera.createArcCamera(scene, this.canvas, object.position);
        Movement.addCharacterMovement(scene, mesh, camera);
      }
      // Scaling
      if (object.scaling) {
        if (object.scaling.x) mesh.scaling.x = object.scaling.x;
        if (object.scaling.y) mesh.scaling.y = object.scaling.y;
        if (object.scaling.z) mesh.scaling.z = object.scaling.z;
      }

      // Add Rotation - we support only Y axis
      if (object.rotation) {
        mesh.rotation = new Vector3(0, eval(object.rotation.y), 0);
      }

      if (object.custom_texture) {
        var texture = new Texture("male-2-texture-1", scene);
        var material = new StandardMaterial("material", scene);
        material.diffuseTexture = texture;
        mesh.material = material;
      }
    });

playground:

7

@JCPalmer I had quoted the url “yourtextureDiffuse” to say that it was the image url. I shouldn’t have put them on. And I shouldn’t have put url after clothe.material.diffuseTexture
(I corrected my post, thanks for pointing it out.)

On the other hand I have just seen that it is to modify the image of a gltf. But gltf doesn’t recognize StandardMaterial, so it won’t work.

gltf uses PBR material. So you have to do this (it seems to me) :
clothe.material.albedoTexture.url = "data:"+clotheTextureDiffuse;

8

Something like this:

SceneLoader.ImportMeshAsync("", path, object.name, scene).then((result) => {
    var meshRoot = result.meshes[0]; // The meshes[0] is a _root_, there is no material in gltf (use meshes[1] to access it)
    var mesh = result.meshes[1];
	  
	//...
	  
    if (object.custom_texture)
	{ 
		var clotheTextureDiffuse = "path/male-2-texture-1.jpg";
		//subMaterials[?] : Assuming your garment texture is on sub-material 1
        mesh.material.subMaterials[1].albedoTexture.url = "data:"+clotheTextureDiffuse;
    }
});
2 Likes