Local Texture Not Showing with Node.js

Questions
,
1

Please have a look at the following files:

texture_not_showing_with_node_js.zip (472.5 KB)

The “src/stone_diffuse.jpg” texture does not show on the ground plane with Node.js server and there is no error on the console, but it will appear with WAMP server.

(Edit) To reproduce it:

  • Open the project folder with VS Code
  • Install the dependencies with “npm install” command
  • Run it with “npm start” command

(Edit) The following environment texture does not appear with Node.js as well and it comes with “Not a babylon environment map” error, but it will appear with WAMP server:

not_a_babylon_env_map_error_with_node_js.zip (2.7 MB)

How to fix it?

2

Do you have any console error messages which can throw some light on your problem?

3

I have tried to change the texture path, but there is no console error with Node.js.

4

I tried the environment texture below, which does not appear with Node.js as well and it comes with “Not a babylon environment map ” error, but it will appear with WAMP server:

https://forum.babylonjs.com/uploads/short-url/57LT7CMT1B5PwjKxCKtgACOUVDh.zip

5

When I set that env file in my environment, I get the following error.

Cannot read properties of undefined (reading ‘replace’)

6

Do you use Node.js, Vue.js or WAMP environment?

I can use the “sky.env” with WAMP, but I get “Not a babylon environment map” error with Node.js.

I use VS Code and “npm start” command to play the scene.

7

Yes, I use next.js.

I took the test again with not_a_babylon_env_map_error_with_node_js.zip as you listed.

As a result, the creation of the texture fails, and the declaration of the inspector (even just the import) starts giving errors.
Also, the url, path, etc. for model import are unknown.

I think the reason for this may be a problem with the structure of wepack - build, etc.

Something to look at as an example

8

It’s a problem with the settings of parcel I think.

If you try to get any resource (http://localhost:1234/XXXX), parcel will always serve the index.html page. So, http://localhost:1234/src/stone_diffuse.jpg will also return this page and not the picture.

cc @RaananW who should be able to help here.

9

It’s weird, because I can use another “.env” file in the same Node.js environment

10

Yes, localhost:1234/src/stone_diffuse.jpg doesn’t show the bitmap image

11

i’m sorry, i might have missed it - is there some product reproduction I can test out?

This might be the server configuration is wrong. However, I am pretty sure that the src folder is not published by the server. There should be some form of static hosting, but for sure not the src folder.

13

Hi, please test the files below:

(“src/stone_diffuse.jpg ” texture does not show on the ground plane with Node.js server and there is no error on the console)
https://forum.babylonjs.com/uploads/short-url/jtb0B6Nkg4zZ7csnZz1gvSzUTeX.zip

( environment texture does not appear with Node.js as well and it causes “Not a babylon environment map ” error)
https://forum.babylonjs.com/uploads/short-url/57LT7CMT1B5PwjKxCKtgACOUVDh.zip

To reproduce it:

  • Open the project folder with VS Code
  • Install the dependencies with “npm install” command
  • Run it with “npm start” command
14

Parcel doesn’t support static file hosting. you will ned to get the URL using an import and use it when loading. i.e.:

at the top:

import stoneDiffuse from "./stone_diffuse.jpg";

and then:

const diffuseTex = new Texture(
  stoneDiffuse ,
  scene
);

Then it works:

image
image822×751 58.1 KB

4 Likes
15

Thanks so much! It works