Object disappearing when mapping texture

[JustLexxy]

I have a mesh composed of a BoxGeometry and a MeshLambertMaterial, nothing more simple. However, when i put my texture into the map property of the material, the object disappears, with no error messages.

I don't exactly know how your path tracing works, but from what i saw it would show the object with the texture, like it does on normal threejs, unless there's a different way of mapping a texture on a object?

[gkjohnson]

You should use MeshStandardMaterial as the examples do. Also please provide more information on your bug and a reproduce-able example as the bug template requests.

[JustLexxy]

I took the code from your areaLight example, and added a BoxGeometry. In the material properties, i added "map: texture", texture refering to a texture loader, loading the texture i want to use, like i've done countless times in normal three.js.

The box shows as expected when there's no texture mapped onto it, but disappears whenever i try to add a texture.

code for the box:

const texture = new THREE.TextureLoader().load('textures/specie_OAKWEQS.png');

const redBoxGeom = new THREE.BoxBufferGeometry( 1, 1, 1 );
const redBoxMat = new THREE.MeshPhysicalMaterial( { 
    color: new THREE.Color( 0xFF0000 ), 
    map: texture
} );
const redBox = new THREE.Mesh( redBoxGeom, redBoxMat );
group.add( redBox );

[gkjohnson]

Are you waiting for the texture to finish loading before initializing the path tracing scene?

[JustLexxy]

I think so? I add the box/texture right between the floor and the 2 area lights, which are before the creation of the PathTracingSceneWorker, so i would guess it gets loaded before, but i'm not sure since my JavaScript knowledge is a bit limited.

[gkjohnson]

This is why I need full example code. When calling new THREE.TextureLoader().load('textures/specie_OAKWEQS.png'); the texture is not immediately loaded. You must wait for it to finish loading in order for it to be ready to update the texture array for rendering. The simplest way to do this is to use async / await and finish loading the texture before initializing the scene:

const texture = await new THREE.TextureLoader().loadAsync('textures/specie_OAKWEQS.png');

[JustLexxy]

I tried adding what you said but now it's stuck on the loading, do i need to add anyhting else? It also gives me this error in the console:

[gkjohnson]

Unfortunately I don't have the bandwidth to provide help with server setup or general three.js or Javascript questions. It looks like the could not be found when loading - you'll have to look into your network tab to see what's going on. I recommend making sure the scene and texture loads without pathtracing first. The three.js discourse forums may be helpful here.

[JustLexxy]

ohh okay i'm new to node.js so the problem might come from there, i'll look into it. thanks a lot for your help!