Textureloader does not load texture even when texture is in same folder as HTML and JS scene files

Questions
, ,
1

New to threejs.
Followed the Option 1 install guide at threejs.org

Configuration
Ubuntu 22.04
Nodejs 21.1
Vite

textureLoader does not seem to work and breaks the scene. If I comment out the textureLoader code block like below, and go with a simple MeshBasicMaterial, the scene renders. The moon texture ‘moon_1024’ is in the same folder as the HTML and JS file for the scene.

--------------snippet-----------------------------------------------------------------------------
const textureLoader = new THREE.TextureLoader();
const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS, 16, 16);
const moonMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );

/*
const moonMaterial = new THREE.MeshPhongMaterial( {
shininess: 5,
map: textureLoader.load( ‘moon_1024.jpg’ )
} );
moonMaterial.map.colorSpace = THREE.SRGBColorSpace;
*/
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
moon.position.set(5,5,5)
scene.add( moon );

2

  1. Please elaborate on what “breaks” means.

  2. If the entire javascript breaks - check devtools console (in the browser, not in the terminal) and see what the errors say. In 99.9% they say precisely what the issue is (likely unrelated to three.js, and more related to the vite project setup.)

3

static files must go into /public always.

from the three docs

  • public/
    The public/ folder is sometimes also called a “static” folder, because the files it contains are pushed to the website unchanged. Usually textures, audio, and 3D models will go here.
4

Sorry, for a bit vague desription of the issue.

Not loading texture, using basic shader material. Smaller white sphere is rendered as it should be.
Selection_036.bmp (393.7 KB)

Attempting to load a texture. The smaller sphere in front of the larger green sphere is rendered black i.e. the desired moon texture is not rendered.
Selection_037.bmp (448.9 KB)

5

Yes, as part of my troubleshooting, I’ve read about assets should be in the Vite public folder. One thing I noticed is /public is missing from my project file tree. See below screenshot of the file system.

Selection_038.bmp (1.7 MB)

6

Just revisiting this thread.
As pointed out in my last reply the /public folder is missing. I’m assuming textures don’t load since a /public folder is missing.
I followed the instructions per the link below, Option 1. No mention of a /public folder. Did I miss a step? Perhaps the install did not completey fully? Welcome thoughts on how to correct this situation.

Blockquote
three.js docs

Blockquote

three.js

npm install --save three

Blockquote

vite

npm install --save-dev vite

Blockquote
npx vite

7

Why are you loading multiple materials anyway ? just test with meshbasicmaterial first.

Also, if you are just testing your code, the textures dont need to be in public folder. Just make it easily accessible somewhere.

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/moontexture.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
8

Using the code snippet by Akroob fixed the no render of the material assigned to the moon object. The texture “moon-1024.jpg” is in the same folder as the other scene files.

Selection_039.bmp (619.6 KB)

  1. What that means is something is wrong with implementation of the MeshPhongMaterial in the code block below or some other issue.

Blockquote
const moonMaterial = new THREE.MeshPhongMaterial( {
shininess: 5,
map: textureLoader.load( ‘moon_1024.jpg’ )
} );
moonMaterial.map.colorSpace = THREE.SRGBColorSpace;

After some research I found a website which says a light must be added to the scene. I added a three point light and tested and the MeshPhongMaterial renders correctly.

Selection_040.bmp (265.1 KB)
Lesson learned.

  1. Regarding use of a /public folder. As posted earlier my project file tree does not have a /public folder and as Akroob points all that is needed is the textures to be available and call the correct path.
    Question: Is all the discussion I’ve seen about a /public folder applicable only to a live web server?
9

Just create the public folder. The three docs are a bit strange, you don’t use vite like that normally, you init it with npm create vite, and it will create all the necessary folders and files, see Getting Started | Vite

@donmccurdy maybe this should be amended. Things like that must be super confusing for beginners. wouldn’t it be better to follow vites own docs here? I know it was done to avoid the placeholder files it creates but these serve as a guide.

10

My (very much untested!) feeling is that npm create vite obscures the setup steps and discourages users who already have a project in progress from switching to Vite. Maybe I’m an outlier on this, I know every framework and dependency has their own npm create templates now… If anyone disagrees and would like to update the installation tutorial to use npm create vite, please feel free, I do not feel strongly either way.

… or maybe it’s time for npm create three? :thinking:

11

As mentioned in the previous post, the issue was caused by me not understanding the scene lighting requirements for the MeshPhongMaterial - not due to folder structure.

Apparently, in a local environent (like mine e.g. node, vite) a /public folder is not necessary (??). I did check out the link Getting Started | Vite. Adding to my confusion is the statement:

Blockquote
One thing you may have noticed is that in a Vite project, index.html is front-and-central instead of being tucked away inside public. This is intentional: during development Vite is a server, and index.html is the entry point to your application.

Selection_041.bmp (1.9 MB)

What would be the motivation of adding a /public folder to my local project file tree?

12

The /public folder is still the most common place to put static resources like textures (.png, jpeg, …) and models (.glb, .fbx, …), so you’ll most likely want one eventually, though it isn’t required.