I'm facing an issue while trying to apply a texture to my mesh using three.js. Instead of the expected loaded texture, I am just seeing a plain black object. I followed the examples provided in the three.js documentation ( - Example) and also tried various solutions without success. Here is the code snippet:
//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);
Changing the mesh color works perfectly fine, but applying textures is not successful. I have also checked the image path and everything seems correct.