I'm trying to map a picture of the earth at night to a sphere with three.js, but I can't get it working. Everytime I refresh the page the image hasn't mapped to the sphere and in the console I get error 404 (Not Found). I've tried a lot of different ways to reference my image, but none of them worked.
This is my javascript code:
import './style.css'
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
camera.position.z = 3;
scene.add(camera);
const textureLoader = new THREE.TextureLoader();
const nightMapEarth = textureLoader.load("assets/nightmapearth.jpg");
const sphereGeometry = new THREE.SphereGeometry(0.7);
const material = new THREE.MeshBasicMaterial({
map: nightMapEarth,
});
const earth = new THREE.Mesh(sphereGeometry, material);
scene.add(earth);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.append(renderer.domElement);
function animate() {
window.requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();