Hi there, I'm having some trouble getting a texture to apply correctly to a sphere within a Next.js component.
I've attempted it with the code provided below, but all I see is a black ball rendering instead.
I suspect it might have something to do with the texture loading too late, but I'm not certain.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1 / 1, 0.1, 100);
camera.position.z = 20;
// lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
directionalLight.position.set(-10, 5, 5);
scene.add(directionalLight);
scene.add(ambientLight);
const geometry = new THREE.SphereGeometry(10, 64, 64);
const texture = new THREE.TextureLoader().load("/earth_texture.jpg");
texture.colorSpace = THREE.SRGBColorSpace;
let material = new THREE.MeshPhongMaterial({
map: texture,
shininess: 100,
});
let sphere = new THREE.Mesh(geometry, material);
sphere.castShadow = true;
sphere.receiveShadow = true;
scene.add(sphere);
const renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true,
});
renderer.setSize(500, 500);
containerRef.current?.appendChild(renderer.domElement);
renderer.render(scene, camera);