Importing png texture inside scene coming black

Questions
, ,
1

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:

image
image1920×1200 105 KB

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

2

Do you have any errors in the console?

3

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

image
image1900×754 121 KB

2 Likes
4

@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
5

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")

image
image1592×1238 25.2 KB

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:

image
image1920×951 90.4 KB

2 Likes
6

But it should load like this

image
image1920×1200 122 KB

7

You have to do this next time!

However here is the solution:

And here in the DOCS as well:

https://doc.babylonjs.com/features/featuresDeepDive/materials/using/materials_introduction#transparent-texture-examples

2 Likes
8

Noted. I will take care of it

Thanks it is working.

2 Likes
9

You are awesome @roland

1 Like