How to properly assign diffuse texture in an imported mesh

Questions
,
1

image
image1366×768 149 KB

image
image1366×768 64 KB

Hi guys it’s taking me some time to figure this thing out but I know it is simple.maybe ? I made my 3d in blender export it as a glb file import it in my babylonjs project I did some smart uv or simple uv and did many textures but every time I assign the diffuse texture to the texture that I made in blender it wont place the texture properly in my project. here’s what I did.

const TheTreaz = await this.importMesh(scene, “./models/”, “treasure.glb”)
TheTreaz.meshes[1].parent = null
// TheTreaz.meshes[0].dispose()
treasure = TheTreaz.meshes[1]
log(TheTreaz)
treasure.position = new Vector3(7,0,0)
treasure.rotationQuaternion = null

    const mat = new StandardMaterial("treasureMat")
    const myTreasureTex = new Texture(`./images/modeltex/treasure${0}.jpg`, scene)
    mat.diffuseTexture = myTreasureTex
    treasure.material = mat
    TheTreaz.meshes[0].material = mat

everything wont work maybe some of you already encounter this problem. my goal here is to assign different texture in my treasure mesh. so I will make 3 textures(old looking, new looking and a gold looking textures

2

Hi,

Can’t really tell just looking at the pictures, have you tried setting the texture invertY = true ?

You could try to repro the issue with a more obvious case, such as a cube with text drawn on each colored face, it will give you more information about what happens.

1 Like
3

On spheres and boxes assigning diffuse Textures has no problems at all, I tried updating my babylon js packages but still result are same. I did unwrap my 3d model in blender and then did some texture painting again. saved the texture and then export the unwrapped 3d model again in babylon and assign the texture on the 3d model but still It doesn’t fit correctly. I can make a playground out of this but I have no use of basics shapes. hmmm Is there any uv or texture options for this ?I tried inverting the texture but it is still the same

4

Assuming this (in magenta) is what Blender SmartUV unwrapped as the lid
image

Flipping your texture along the Y Axis gives this
image

We notice the magenta zone looks a lot like what you have in your scene.

Which is why I’m 90% sure that adding this line will solve the issue (unless it’s what you’ve already tried “inverting the texture” ?)

mat.diffuseTexture.invertY = !mat.diffuseTexture.invertY

The idea of using simple shapes and debug texture is that it helps troubleshooting what goes wrong in the export pipeline.
It doesn’t mean using BabylonJS built-in primitives (nor replacing your models with primitives in your project ^^), because they don’t have UV mapping issues. It means to draw / export / import a simple model and a simple debug texture the same way you do with the chest, so you can notice more easily what happens.

Good luck ! Uvs never work the first time :slight_smile:

1 Like
5

Sven thank you so much, I think it’s the inverting I really feel like it is simple. I figured it out and It’s just on my code so normally I set a texture like this: new Texture(“url”, scene) but when I tried mat.diffuseTexture = new Texture(./images/modeltex/treasure${rarity}.jpg, scene, false, false) I put false false on the 3rd and 4th parameter then it works. I don’t know why maybe because the 4th parameter is by default true ? the invert thing. Thankfully it works now. thanks for helping me out ! I really appreciate it.

image
image506×524 33.3 KB

1 Like