Creating a galaxy made of particles with Three.js
Back to top
Install Vite, a development server with live reload capability.
-
To install:
npm create vite@latest
-
To run (from your local directory):
npm run dev
Back to top
-
Prerequisite:
- Make sure Node and NPM are installed on your computer. You can download both at nodejs.org (NPM is included in your Node installation).
- Please see
.nvmrc
file at the root ofthreejs-galaxy-particles
repo. - Using nvm, a Node Version Manager is recommended as it helps you manage and switch between different Node versions with ease. It provides a command-line interface where you can install different versions with a single command, set a default, switch between them, etc.
-
In GitHub click on the repository nammed threejs-galaxy-particles
-
Clone the repository locally. Run
git clone https://github.com/sctlcd/threejs-galaxy-particles.git
-
Install all modules listed as dependencies in package.json
cd threejs-moon npm i
note: in this app
- three - JavaScript 3D library
- lil-gui - an interface for changing the properties of any JavaScript object at runtime
- GreenSock Animation Platform - GSAP - JavaScript library for building high-performance animations that work in every major browser
-
Install Vite, a development server with live reload capability.
-
To install:
npm create vite@latest
-
To run (from your local directory):
npm run dev
-
Back to top
threejs-galaxy-particles live website is currently deployed on Firebase using the main
branch on GitHub. Once you have the project setup locally, you can proceed to deploy it remotely.
-
Install Firebase CLI Tools, firebase-tools
npm install -g firebase-tools
-
Create firebase.json and .firebaserc at the root of your project with the following content:
firebase.json
:{ "hosting": { "public": "dist", "ignore": [], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }
.firebaserc
:{ "projects": { "default": "<YOUR_FIREBASE_ID>" } }
-
After running
npm run build
, deploy using the commandfirebase deploy
.
=> live link: https://threejs-galaxy-particles.web.app/
Back to top
- favicon.ico - Flaticon | copyright Royyan Wijaya
- - | copyright
Back to top