Demo

3D Space

About   |   Features   |   Technologies   |   Requirements   |   Starting   |   License   |   Author

🎯 About

An interactive, 3D rendering of space at night with Earth, the Sun, the Moon, stars and an astronaut laid out to show the vastness of space. This application uses ThreeJS for realistic 3D rendering, GSAP for smooth scroll triggered animations and text, 3D model animations, postprocessing techniques including ThreeJS layers, UnrealBloom for city lights and the sun, OutlinePass for Earth's atmosphere.

View the site live at: https://cynthia-3d-space.netlify.app/

✨ Features

✔️ Smooth GSAP scroll triggered animations and text;
✔️ 3D web technology using ThreeJS for realistic planet modelling with bump and texture maps;
✔️ 3D model animations;
✔️ Postprocessing scene effects including camera layers, flickering city lights, and Earth's atmosphere;
✔️ Dazzling rendering of the Sun using Lensflare technique;
✔️ Interactive mouse movement of the stars;

🚀 Technologies

The following tools were used in this project:

• ThreeJS
• Node.js
• React
• GSAP

✅ Requirements

Before starting 🏁, you need to have Git and Node installed.

🏁 Starting

# Clone this project
$ git clone https://github.com/cynthiachiu/3D-Space

# Access
$ cd 3D-Space

# Install dependencies
$ npm install

# Run the project
$ npm start

# The server will initialize in the <http://localhost:3000>

📝 License

This project is under license from MIT. For more details, see the LICENSE file.

Made with ❤️ by cynthiachiu

 

Back to top