Texture on imported mesh mapped incorrectly

Hi~!

I am using the Dude.babylon sample model provided in the Babylon Mesh Library page.

When dragging these assets to

Sandbox, it shows all the colors correctly like this.

However, when running codes on my server-side project,

import * as BBJS from 'babylonjs'

export class ModelSceneBuilder {
    protected canvas: any;
    protected engine: any;
    protected scene: any;
    protected camera: any;

    constructor(canvas:any) {
        this.canvas = canvas
    }

    async init() {
        this.engine = new BBJS.Engine(this.canvas, true, { preserveDrawingBuffer: true, stencil: true })
        this.scene = new BBJS.Scene(this.engine)
        this.camera = new BBJS.FreeCamera('cam1', new BBJS.Vector3(50, 180, 150), this.scene)
        this.camera.setTarget(BBJS.Vector3.Zero())
        this.camera.attachControl(this.canvas, false)
        const light = new BBJS.HemisphericLight('light1', new BBJS.Vector3(0, 1, 0), this.scene)
        light.intensity = 0.4

        this.engine.runRenderLoop(() => {
            this.scene.render()
        })
    }

    async loadModel(rootURL:string, fileName:string, textureSrc:string) {
        const isPlugInAvailable = BBJS.SceneLoader.IsPluginForExtensionAvailable(".gltf")
        console.log('Plugin Availability For GLTF ====>', isPlugInAvailable);

        return new Promise((resolve, reject) => {
            BBJS.SceneLoader.ImportMesh('', rootURL, fileName, this.scene, (meshes:any) => {

                setTimeout(() => {
                    resolve(meshes)
                }, 1000)

            })
        })
    }
}

Screen Shot 2022-08-03 at 6.05.46 PM

textures are mapped totally incorrectly.

As far as I know, even when the size of the texture is wrong, it should still be mapped on the mesh, but with different ratio. This one though, is mapped totally off :frowning:

Anybody has experienced anything like this?

Hello! I see in your project you’re checking the GLTF plugin, but the Dude file is a .babylon… did you convert it to GLTF for your local project? :slight_smile:

Oh~ I’m sorry. Were you referring to

  const isPlugInAvailable = BBJS.SceneLoader.IsPluginForExtensionAvailable(".gltf")
  console.log('Plugin Availability For GLTF ====>', isPlugInAvailable);

this part?

I used it for testing GLTF import and forgot to remove it, but I only used it for testing if GLTF plugin is correctly implemented.

So I’m trying to import a .babylon based model and it was imported as expected, but the textures coming with it are mapped incorrectly :frowning:

Got it! Can you share the entire project with us?

Oh, hmm… Unfortunately, I am not the owner of the project and it is on private so I cannot share the whole codes with you :frowning:

But hmm… it’s weird that it works on Playground, but just not on the server side project of that I am working on

Yep pretty weird, that’s why I wanted to check the project if possible :frowning: Do you think you could create another project and have just the code that imports the babylon there? Having a simpler project is even more efficient for debugging :slight_smile:

Oh, right right. Why didn’t I think of that. I shall try it for debugging anyway. Let me recreate a problem within a smaller sized project then share :smiley:

1 Like