react-threejs-3d-world

---

Table of Contents

1. Introduction

2. Run the project locally

3. Deployment

   • Deployment – Run locally
   • Deployment – Live website

4. Credits

   • Media

---

Introduction

Creating a desktop 3D world with React, Three.js, React Three Fiber, React Three Drei and React Three Cannon

• on click: the box rises
• on context menu event / click right on the box: the box increases its size
• on pointer over: the box becomes blue
• on pointer out: the box becomes red

Back to top

---

Run the project locally

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

---

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 react-threejs-3d-world 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 react-threejs-3d-world

3. Clone the repository locally. Run

     git clone https://github.com/sctlcd/react-threejs-3d-world.git
   

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

     cd react-threejs-3d-world
     npm i 
   

   note: in this app

   • three - a JavaScript 3D library
   • vite - a built in development server
   • react - JavaScript library for creating user interfaces
   • react-dom - package that serves as the entry point to the DOM and server renderers for React
   • react-three/fiber - React renderer for threejs
   • react-three/drei - collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber
   • react-three/cannon - React hooks for cannon-es to use incombination with @react-three/fiber

5. 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

---

Deployment - Live Website

react-threejs-3d-world 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.

1. Install Firebase CLI Tools, firebase-tools

     npm install -g firebase-tools
   

2. 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>"
       }
     }
   

3. After running npm run build, deploy using the command firebase deploy.

=> live link: https://react-threejs-3d-world.web.app/

Back to top

---

Credits

Media

• favicon.ico - Flaticon | copyright Freepik

Back to top

---