sctlcd / threejs-first-app

Animated 3D planet and its satellites with Three.js

threejs-first-app

---

Table of Contents

1. Introduction

2. Run the project locally

3. Deployment

   • Deployment – Run locally
   • Deployment – Live website

4. Credits

   • Media

---

Introduction

Creating a planet and its satellites with Three.js

Back to top

---

Run the project locally

Install Node.js five-server, a development server with live reload capability.

• To install:

    # Remove live-server (if you have it)
    npm -g rm live-server
  
    # Install five-server
    npm -g i five-server
  

• To update (from time to time)

    # Update five-server
    npm -g i five-server@latest
  

• To run (from your local directory):

    five-server . -p 8000
  

• Plugins for popular code editors Some code editors have plugins which will spawn a simple server on demand.

  • Five Server for Visual Studio Code.
  • Live Server for Visual Studio Code.
  • Live Server for Atom.

Back to top

---

Deployment

Deployment – Run locally

1. 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 of threejs-first-app 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.

2. In GitHub click on the repository nammed threejs-first-app

3. Clone the repository locally. Run

     git clone https://github.com/sctlcd/threejs-first-app.git
   

4. Install all modules listed as dependencies in package.json

     cd threejs-first-app
     npm i 
   

   note: in this app

   • three - JavaScript 3D library

5. Install Node.js five-server, a development server with live reload capability.

   • To install:

       # Remove live-server (if you have it)
       npm -g rm live-server
     
       # Install five-server
       npm -g i five-server
     

   • To update (from time to time)

       # Update five-server
       npm -g i five-server@latest
     

   • To run (from your local directory):

       five-server . -p 8000
     

   • Plugins for popular code editors Some code editors have plugins which will spawn a simple server on demand.

     • Five Server for Visual Studio Code.
     • Live Server for Visual Studio Code.
     • Live Server for Atom.

Back to top

---

Deployment - Live Website

threejs-first-app live website is currently deployed on GitHub pages using the main branch on GitHub. Once you have the project setup locally, you can proceed to deploy it remotely.

1. In GitHub click on your repository to open it.
2. Find the 'settings' tab and click on it.
3. In the left menu select 'Pages'
4. In Build and deployment section, under 'Source' choose a branch Deploy from a branch, under Branch chose main and /(root) then press the Save button
5. Wait a couple of minutes and refresh the page then you will see a URL to your live site.

=> Live link: https://sctlcd.github.io/threejs-first-app/

Back to top

---

Credits

Media

• favicon.ico - Flaticon | copyright Freepik

• scene background texture - imgur | copyright Jgoodz

• box texture - imgur | copyright SmartassCody

• sphere texture - imgur | copyright kebuenowilly

Back to top

---