Black textures and missing loaded models

Questions
, ,
1

Hello, as the title says i’m really struggling with displaying my own resources in to a three js project.
I’ve managed to set up a local project with a local server with node js/vite, i built a really basic scene with a cube and a plane and i can already test it with a localhost.

The issues arise when i try to use some textures or custom model imported as GLB file placed in my public folder, basically the models and the textures are not rendered.

The console is not printing any error or warning and under the network tab all the mentioned resources seem to be loaded without status errors.

I’ve also created a light and an ambient light just to ensure that is not a lighting issue and so, if i load a flat coloured cube it works perfectly but if i load a texture instead of the colour i can only see the black silhouette of the model.

Could anybody help me? I really want to study three.js since i’m already a Unity technical artist and i’d like to expand my 3D knowledge but this situation is driving me nuts, i thought it was just a matter of 3D developmnent/coding but i have to admit that from the web side everything is really tricky…

Thanks in advance and best regards

2

hello @supaworst
Could you show me loading part of the code in detail? or screenshot of the material of the mesh in console?
some reasons may be exist.

3

Hi, thanks for your quick reply. This is my code, i’ve commented some stuff because i’m in the middle of some tests:

import * as THREE from "three"
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'

//Scene
const scene = new THREE.Scene()
scene.background = new THREE.Color( 0xa0a0a0 )

//Axes helper
const axesHelper = new THREE.AxesHelper( 0.5 );
axesHelper.position.set(-1,0,0)
scene.add( axesHelper );


//Ambient Light
const ambient = new THREE.AmbientLight( 0x404040 )
scene.add(ambient)

//Directional Light
const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.z = 10
directionalLight.position.y = 10
scene.add( directionalLight );

//Models

///Plane

const planeP = new THREE.PlaneGeometry(10,10,10)


//const planeMat = new THREE.MeshBasicMaterial({color: 0xff0000})
const textureLoader = new THREE.TextureLoader()
const colorMap = textureLoader.load ( 'Test.png' )
const planeMat = new THREE.MeshBasicMaterial({map: colorMap})
const plane = new THREE.Mesh(planeP, planeMat)
plane.rotation.x = -Math.PI / 2  
plane.position.set = (0,0,0)
scene.add(plane)

///Cube

const cubeP = new THREE.BoxGeometry(1,1,1)
const cubeMat = new THREE.MeshStandardMaterial({color: 0x00ff00, side: THREE.FrontSide})
const cube = new THREE.Mesh(cubeP, cubeMat)
cube.position.set (-3,0.5,0) 
scene.add(cube)



///Imported

/*const loader = new GLTFLoader()

loader.load( '/models/Duck.glb',

	function ( gltf ) {
		const globalScale = 0.1
		const object = gltf.scene	
		object.scale.set(globalScale, globalScale ,globalScale)
		object.position.set(0,2,0)
		scene.add(object)

		gltf.animations; // Array<THREE.AnimationClip>
		gltf.scene; // THREE.Group
		//gltf.scene.scale.set(100, 100 ,100)
		//gltf.scene.position.z = 1
		gltf.scenes; // Array<THREE.Group>
		gltf.cameras; // Array<THREE.Camera>
		gltf.asset; // Object
		
		console.log(object)
		},

	// called while loading is progressing
	function ( xhr ) {

		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	},
	// called when loading has errors
	function ( error ) {

		console.log( 'An error happened' );

	}


)*/

//Renderer and camera
const sizes = { width : 800, height : 600}
const camera = new THREE.PerspectiveCamera(60, sizes.width / sizes.height, 0.1, 1000)
camera.position.set (0,3,10)
scene.add(camera)

const canvas = document.querySelector('.webgl') 
console.log(canvas)
const renderer = new THREE.WebGLRenderer({

	canvas : canvas
})

function animate() {
	render();
	requestAnimationFrame( animate );
	}
renderer.setSize(sizes.width , sizes.height)



renderer.render(scene, camera)

I’m attachin you also some images, two captured from the browser with the 3D viewport and the console and another one with my project setup.

BlackIssue
BlackIssue1905×912 85.3 KB

NoIssue
NoIssue1917×917 80.4 KB

projectView
projectView1854×982 111 KB

Thanks again for the support

Best regards

4

Hi @supaworst
yes. thanks for sharing.
It seems that path is wrong in the loading part of the texture.
Let’s fix like this.
const colorMap = textureLoader.load ( ‘./textures/Test.png’ )
thanks.

5

Thanks for you suggestion but it didn’t work. Here is how i changed my code:

image
image1410×404 30.2 KB

It seems to me that for some reasons the browsers decide to not rendering local assets. I’ve tried both on mozilla and chrome and i get the same result.

Can it be a path formatting issue? I can’t understand the difference between ‘./textures/Test.png’ and “./textures/Test.png” in javascript, i’ve tried both with no results…

6

current path is correct and “./textures/Test.png” is the equal to ‘./textures/Test.png’.

And your code has another one issue.
plane.position.set = (0, 0, 0);
this should be fixed like this. plane.position.set(0, 0, 0);

7

Thanks again but unfortunately your fix didn’t work.
Probably i’m missing something regarding the vite setup, i’ll try in the next days other local server solution

8

Ok, i think i’ve found out the real fix to the issue and (of course) it was my fault. Apparently, if i don’t run an animate function at the end of the code in case of using imported resources it ends in not rendering them.

I thought it was not necessary since the models in my case are static but as soon as i’ve addet that part of code everything started to work.

Thanks again for you support!