Texture won't load - Three.js

Question

I'm trying to load a texture for my mesh using three.js, but instead of loaded texture I'm getting plain black object. I did it as it is in three.js docs (https://threejs.org/docs/?q=texture#api/en/loaders/TextureLoader - Example) and also tried different solutions but nothing worked. Here is the code

//Creating The Sun model
const sunGeometry = new THREE.SphereGeometry(16, 30, 30);
const texture = new THREE.TextureLoader().load('assets/images/sun.jpg');
const sunMaterial = new THREE.MeshBasicMaterial({ map: texture }); // not working
//const sunMaterial = new THREE.MeshBasicMaterial({ color: 'skyblue' }); //working
const sun = new THREE.Mesh(sunGeometry, sunMaterial);

//Adding The Sun to the Scene
scene.add(sun);

renderer.render(scene, camera);

Setting a mesh color works perfectly fine tho. Also tried using urls, no difference. I'm using Angular and that code is in a constructor
Edit: image path is correct

M - · Accepted Answer · 2022-10-11 21:54:59Z

1

You're calling renderer.render(scene, camera); immediately after creating your Mesh, but at that time the texture hasn't loaded yet. Textures can take a fraction of a second to load, so by the time they're loaded the rendering has already taken place. If you're calling render() at 60 frames per second, you probably won't notice this delay, but if you're calling it only once, then you'll get a black material.

If you only want to call render() once after the texture has loaded, you should just use the onLoad callback in the method outlined in the code example of the docs page.

answered Oct 11, 2022 at 21:54

M -

28.7k12 gold badges56 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

siwakw7 Over a year ago

Thanks, it worked. I just simply put render to onload callback and everything works:)

Collectives™ on Stack Overflow

Texture won't load - Three.js

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related