Importing textures with webpack

Questions
1

Hi,

I’m going through Babylon101 (Materials) using webpack but I’m having troubles adding a material texture. Probably importing the wrong lib because I have manually imported the texture with success via the Inspector.

When using webpack, I call Constructors a bit differently:

myMaterial.diffuseTexture = new Texture("PATH TO IMAGE", scene);

instead of

myMaterial.diffuseTexture = new BABYLON.Texture("PATH TO IMAGE", scene);

Until now, I could find what file to import for example, the standardMaterial

 import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";

but I don’t know what to import to load textures. I’ve tried many in the @babylonjs/core/Materials or @babylonjs/materials… I only get this error:

BJS - [17:36:49]: Error while trying to load image: ./assets/background.png logger.js:45:17
    _ErrorEnabled webpack:///./node_modules/@babylonjs/core/Misc/logger.js?:45
    errorHandler webpack:///./node_modules/@babylonjs/core/Misc/tools.js?:601

Thank you for your help!

2

Hey, try this:
import { Texture } from “@babylonjs/core/Materials/Textures/texture”;

3

Hi,

thank you for your answer. I found something a bit strange in my webpack rig and must have look… maybe it solve my problem…

4

I know what’s going wrong but I don’t know how to fix it.

To help me, you can:

Then just with npm start and npm run build, you’ll see what I see: all the config files are there.

Current, there are two unexpected issues with linking images.

  1. From ./src/index.js: to link “test.png” I need to write

img.src = “./src/assets/test.png” (line 9)

instead of

img.src = “./assets/test.png” (which is the relative path).

  1. When building the app (npm run build), the javascript does not change the path and the name which is an error: my webpack config renames each files to avoid a caching problem. In fact, the mentioned URL remains unchanged and even the path is wrong! :astonished:

Thank you at least for reading this!

5

Hi again!

I solved my problem about webpack’s image paths.

The problem was that webpack could not resolve this:

cubeMat.diffuseTexture = new Texture(“./assets/background.png”, scene);

Apparently, with webpack you have to import images before using them otherwise it will not compile correctly.

import img2 from “./assets/background.png”;

…

cubeMat.diffuseTexture = new Texture(img2, scene);

I’m a newbie with webpack so it was not obvious to me.

Have a nice day!

1 Like