Inspiration

Although humans are more accustomed to the familiar, I think we are inherently intrigued by the unknown. Even in childhood, a parent's warning not to do something often sparked interest and curiosity in exactly this obscurity. This need to resolve the uncertain is what fuels the basis of human development. Just consider our innovations in science, intrigue for magic tricks, and interest in categories of entertainment such as crime and science fiction. For me, I've always been fascinated by physics and astronomy. And since many websites also feature fancy space animations using Three.js, I felt that this project was a great way to combine my interest for astromony and programming.

• Lot's of credit to this tutorial which was the foundation of the project and this tutorial on shaders for Three.js.
• This was also a helpful source for understanding equatorial coordinates.
• Here is the link to the Yale Bright Star Catalog which I used to display simulation.
• Click here to experience your sky view virtually!

Demo

Below is the big dipper asterism consisting of 7 stars which is visible in most places in the northern hemisphere. The tip of the spoon also points the north star.

Next is the southern cross constellation consisting of 4 stars visible in most places in the southern hemisphere. These stars are actually featured on the flags of both Australia and New Zealand!

On the simulation, there lines on the grass indicating the cardinal directions. Red is for north and white is for south. There is also a feature to change the viewing latitude and the rotational speed of stars.

Behind the scenes

Coordinates

Equatorial coordinates measure where a star is located in our sky. It is composed of two components, the declination (analogous to latitude) and right ascension (analogous to longitude).

The declination is measured in degrees, arcminutes, and arcseconds. Where the north star is at +90˚, -90˚ for the celestial south pole, and 0˚ at the celestial equator. An arcminute is 1/60th of a degree and an arcsecond is 1/3600th of a degree. These definitions lead to higher accuracy when locating a star in the vast night sky.

The right ascension is the second component fo the equatorial coordinate system. It is measured in hours, minutes and seconds. The justification for this is intuitive. If we think of the sky as a giant sphere enclosing the Earth, then the entire sky about a specific right ascension can be viewed in 24 hours - the time it takes for the Earth to rotate once. Hence, the right ascension increases eastward since the Earth rotates in this direction. Similar to the declination, the minutes and seconds increase accuracy. From this, we can conclude that each hour is equivalent to 15˚ since 360˚/24 = 15˚. To formally define the 0th hour, it's denoted as the point in the sky when the sun crosses the celestial equator during the March equinox.

With that, below is the code for converting the the declination and right ascension to a Three.js vector. The varaible r represents an big arbitrary distance away from the viewer as we want to simulate the the distance of the stars in the perspective of the viewer. The trigonometry was derived from the wikipedia page.

function equatorialToCartesian(ra, de, r) {
    let sign = de[0] === '+' ? 1 : -1;
    const deDeg = sign * (parseFloat(de[1]) + parseFloat(de[2] / 60) + parseFloat(de[3] / 3600));
    const deRad = deDeg * (Math.PI / 180);

    const raDeg = (parseFloat(ra[0]) + parseFloat(ra[1] / 60) + parseFloat(ra[2] / 3600)) * 15;
    const raRad = raDeg * (Math.PI / 180);

    const x = Math.cos(deRad) * Math.cos(raRad) * r;
    const y = Math.cos(deRad) * Math.sin(raRad) * r;
    const z = Math.sin(deRad) * r;

    return new THREE.Vector3(x, y, z);
}

Star Color

Through Yale's Bright Star Catalog, the color of each star is given in the BV color scheme. This is essentially a system of measurement representative of the temperature of a star. To convert this into human-visible colors, I used this code for the conversion.

Setting the Latitude

To simulate the view from a specific latitude, we can simply set the x-axis rotation of the stars to the desired viewing latitude.

Simulating the Rotation

As seen on the wikipedia page for equatorial coordinates, the z-axis extends along the cardinal north direction. Since the Earth rotates counter-clockwise, we can simulate the Earth's rotation by rotating the stars about the z-axis in the counter-clockwise direction.