Change glb texture by uploading image

Questions
1

Hi,

I have rigged avatar (Riggedavatars/newone.glb at main · myinzack/Riggedavatars · GitHub). i want to change the color of the shirt (https://i.ibb.co/nCDjV9M/cloth1-digital-art-x4.jpg)

Pls suggest how can i apply the above image to shirt texture…

https://playground.babylonjs.com/#JHRF6T#1

Thanks
vijay

2

I changed the URL of your model according to Using External Assets In the Playground | Babylon.js Documentation

So the model now can be loaded - https://playground.babylonjs.com/#JHRF6T#2

1 Like
3

Here it is - https://playground.babylonjs.com/#JHRF6T#3

  1. Create a new BABYLON Texture from your image.
  2. Find the mesh where you need to change the texture (with Inspector tool, for example).
  3. Change the albedoTexture of mesh.material to the desired one.

Please note that in the material there is also Bump Texture, which you may delete or change

image
image1340×817 146 KB

Here I removed bump Texture and also helped to the poor man with his right eye (seems he had some problems with it) by making it invisible :slight_smile: - https://playground.babylonjs.com/#JHRF6T#5

4 Likes
4

@labris I love this! Thank you. :heart_eyes:

Being in love with GUI I wanted to add more so I added a real time color picker into the Babylon scene itself (not just in the inspector) so you can change the shirt albedo color. Very simple hook up.

picker.onValueChangedObservable.add(function(value) {
    myTop.material.albedoColor.copyFrom(value);
});

https://playground.babylonjs.com/#JHRF6T#6

3 Likes
5

Thank u so much

1 Like
6

@msDestiny14 Thanks for the help

am just trying to make the avatar full screen i tried with below line @line 26
newMeshes.position = new BABYLON.Vector3(2, 10, 2);
https://playground.babylonjs.com/#JHRF6T#6

Its not wokring.
can u pls suggest how to make it full screen walking avatar so that i view the texture of shirt/trouser clearly

I am newbie pls bear with me

7

You can use the camera framing behavior to automatically position the camera focused on a mesh Camera Behaviors | Babylon.js Documentation (babylonjs.com)

I updated your playground with this: vijay_krishna model | Babylon.js Playground (babylonjs.com)

4 Likes