Sphere not rendering in my threejs

Questions
1

Hello everyone. First time three.js user here. Im trying to make and interactive webapp for a hackathon but my sphere doesnt render and it just shows a black screen. Can someone pls tell me why this is happening. Sry if my eng is bad.
java script

// Create the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Add ambient lighting
const AmbientLightlight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

// Function to create planets and celestial bodies
function createCelestialBody(size, textureUrl, position) {
const geometry = new THREE.SphereGeometry(size, 20, 20);
const material = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load(textureUrl)
});
const body = new THREE.Mesh(geometry, material);
body.position.set(position.x, position.y, position.z);
scene.add(body);
return body;
}

// Add example planets (Earth and Mars)
const earth = createCelestialBody(1, ‘earth-daymap hosted at ImgBB — ImgBB’, { x: 5, y: 0, z: 0 });
const mars = createCelestialBody(0.8, ‘mars hosted at ImgBB — ImgBB’, { x: 20, y: 0, z: 0 });

// Animate the scene (simple rotation for the planets)
function animate() {
requestAnimationFrame(animate);
earth.rotation.y += 0.01; // Earth rotation
mars.rotation.y += 0.01; // Mars rotation
renderer.render(scene, camera);
}

camera.position.z = 20; // Set camera distance
camera.lookAt(15,0,0);
animate(); // Start animation

// Handle window resizing
window.addEventListener(‘resize’, () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});

2

You have a few problems in your code… names, quotes, possible camera placements, lighting issues… First, I would change the names and quotes (not curly). Try this:

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

//…

const earth = createCelestialBody(
    5, 
    'https://i.ibb.co/your-earth-texture.jpg', 
    { x: -10, y: 0, z: 0 }
);
const mars = createCelestialBody(
    3, 
    'https://i.ibb.co/your-mars-texture.jpg', 
    { x: 10, y: 0, z: 0 }
);

//…

window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
});
1 Like
4

Here is something that works, which is a combination of my code + the code from posts + planets and environment textures from three.js repository. It’s a standalone HTML file.

Astronomically inaccurate but still good looking with somewhat realistic terrain and a Milky Way as a background. The whole scene and each body rotate slowly so try not to get dizzy.

For those who might be interested in some other three.js Earth example that includes clouds, here is another user’s codepen link.

Celestial Bodies.zip (1.6 KB)

1 Like