Importing png texture inside scene coming black

Here is the code I am using to import the png texture:

    // Create a plane to display the image
            var plane = BABYLON.MeshBuilder.CreatePlane("imagePlane", { width: 1, height: 1 }, scene);
            plane.position = new BABYLON.Vector3(0, 0, 2); // Adjust position as needed

            // Create a material with the image texture
            var planeMaterial = new BABYLON.StandardMaterial("imageMaterial", scene);
            planeMaterial.diffuseTexture = new BABYLON.Texture("/products/tshirt1.png", scene);
            plane.material = planeMaterial;

The result:

I only want the png image and no background, what do i need to do in my code, please guide.

Do you have any errors in the console?

There is 404 error, check the path to the texture image


@SAURABH_CHADHA please create repros in the playground to help us help you :slight_smile: sharing code is most of the time not enough

1 Like

SInce this:

(await scene).getMaterialByName("imageMaterial").diffuseTexture = new BABYLON.Texture("products/tshirt1.png")

loads the texture correctly but doesn’t display it but this does:

(await scene).getMaterialByName("imageMaterial").emissiveTexture = new BABYLON.Texture("products/tshirt1.png")

it means two things:

  1. the right path to your texture is products/tshirt1.png and not /products/tshirt1.png
  2. you lights are not correctly set up

If someone is curious how did I get there:


But it should load like this

You have to do this next time!

However here is the solution:

And here in the DOCS as well:


Noted. I will take care of it

Thanks it is working.


You are awesome @roland

1 Like