Three.Js Earth Demo

This project is a 3D visualization implemented using Three.js, a JavaScript library for creating WebGL-powered graphics in the browser. It sets up a scene with a rotating Earth-like sphere, a starfield background, and lighting effects to enhance realism. The main script initializes a Three.js scene, configures a perspective camera, and utilizes a WebGLRenderer to display the objects. The Earth model is created using an IcosahedronGeometry, textured with an Earth map image, and wrapped with a wireframe overlay for a subtle effect. Additionally, OrbitControls are integrated to allow user interaction, enabling smooth camera movement around the scene.

A separate module, getStarfield.js, generates a dynamic starfield background. It randomly distributes a specified number of stars in a spherical pattern around the scene using Three.js BufferGeometry. Each star is assigned a position, color, and slight variations in brightness, enhancing the depth of the 3D environment. The stars are rendered as points using PointsMaterial, which applies a small circular texture for each star. This modular approach keeps the code organized and allows the starfield to be easily reused or modified.

The project is structured to run in a browser using modern ES module imports. The index.html file includes an import map to fetch Three.js and its examples from a CDN, eliminating the need for local dependencies. The scene is rendered within the browser’s viewport, dynamically adjusting to the window size. The animation loop continuously updates the Earth’s rotation and re-renders the scene to maintain smooth motion. With a well-organized setup, modular components, and interactive controls, this project serves as a strong foundation for expanding into more complex 3D visualizations or interactive web experiences.