https://github.com/cynthiachiu/3d-space

An interactive, 3D rendering of space at night with Earth, the Sun, the Moon, stars and an astronaut. 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 and OutlinePass.
https://github.com/cynthiachiu/3d-space

3d 3d-model animation astronaut atmospheric gsap gsap-scrolltrigger moon nodejs outlinepass reactjs space stars threejs threejs-layers unrealbloompass

Last synced: 3 months ago
JSON representation

An interactive, 3D rendering of space at night with Earth, the Sun, the Moon, stars and an astronaut. 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 and OutlinePass.

• Host: GitHub
• URL: https://github.com/cynthiachiu/3d-space
• Owner: cynthiachiu
• Created: 2023-02-10T22:34:41.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-14T01:19:35.000Z (about 2 years ago)
• Last Synced: 2025-01-01T11:24:41.631Z (5 months ago)
• Topics: 3d, 3d-model, animation, astronaut, atmospheric, gsap, gsap-scrolltrigger, moon, nodejs, outlinepass, reactjs, space, stars, threejs, threejs-layers, unrealbloompass
• Language: JavaScript
• Homepage: https://cynthia-3d-space.netlify.app/
• Size: 16.8 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 

  


   

  Demo



3D Space




  

  

  

  

  

  

  





  About   |   

  Features   |  

  Technologies   |  

  Requirements   |  

  Starting   |  

  License   |  

  Author






## :dart: 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/

![Alt Text](demo_med.gif)

## :sparkles: Features ##

:heavy_check_mark: Smooth GSAP scroll triggered animations and text;\

:heavy_check_mark: 3D web technology using ThreeJS for realistic planet modelling with bump and texture maps;\

:heavy_check_mark: 3D model animations;\

:heavy_check_mark: Postprocessing scene effects including camera layers, flickering city lights, and Earth's atmosphere;\

:heavy_check_mark: Dazzling rendering of the Sun using Lensflare technique;\

:heavy_check_mark: Interactive mouse movement of the stars;

## :rocket: Technologies ##

The following tools were used in this project:

- [ThreeJS](https://threejs.org/)

- [Node.js](https://nodejs.org/en/)

- [React](https://pt-br.reactjs.org/)

- [GSAP](https://greensock.com/gsap/)

## :white_check_mark: Requirements ##

Before starting :checkered_flag:, you need to have [Git](https://git-scm.com) and [Node](https://nodejs.org/en/) installed.

## :checkered_flag: Starting ##

```bash

# 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 

```

## :memo: License ##

This project is under license from MIT. For more details, see the [LICENSE](LICENSE.md) file.

Made with :heart: by cynthiachiu

 

Back to top