Creating ... using Three.js.
Back to top
- Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.cd threejs-classic-techniques npm i npm run dev
Back to top
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:5173 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Builds the app for production to the dist
folder.
It correctly bundles in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
This dist
folder can be deployed to any of your preferred platforms (see Deployment – Run locally).
Note: vite preview
is intended for previewing the build locally and not meant as a production server
Once you've built the app, you may test it locally by running
npm run build
npm run preview
The vite preview
command will boot up a local static web server that serves the files from dist
at http://localhost:4173
. It's an easy way to check if the production build looks OK in your local environment.
You may configure the port of the server by passing the --port flag as an argument.
{
"scripts": {
"preview": "vite preview --port 8080"
}
}
Now the preview
command will launch the server at http://localhost:8080
Back to top
-
Prerequisite (on Windows):
- Make sure Node.js and NPM are installed on your computer. You can download both at nodejs.org (Once you install a version of Node, the corresponding version of NPM is installed for you. So you don’t need to install NPM separately). The Node.js version recommended to install is the long-term support version (LTS).
- Checking node version
node -v
- Please see
.nvmrc
file at the root ofthreejs-classic-techniques
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.
- Installing the LTS version of Node
nvm install lts
- Installing a specific version of Node. E.g
nvm install 20.9.0
nvm install node-version-number
- Checking nvm has been installed:
If nvm was installed correctly, this command will show you the nvm version installed.
nvm -v
- Seeing the list of Node versions you have installed on your Windows machine
nvm list
- Using a specific version of Node, run either
- to use the latest version
nvm use latest
- to use the long-term support version
nvm use lts
- to use any other version you have installed
nvm use version-number
- Make sure Node.js and NPM are installed on your computer. You can download both at nodejs.org (Once you install a version of Node, the corresponding version of NPM is installed for you. So you don’t need to install NPM separately). The Node.js version recommended to install is the long-term support version (LTS).
-
In GitHub click on the repository nammed threejs-classic-techniques
-
Clone the repository locally. Run
git clone https://github.com/sctlcd/threejs-classic-techniques.git
-
Install all modules listed as dependencies and devDependencies in package.json
cd threejs-classic-techniques npm i
note: in this app
-
Runs the app in the development mode. Open http://localhost:5173 to view it in the browser.
cd threejs-classic-techniques npm run dev
Back to top
threejs-classic-techniques 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.
-
Create a Firebase account and/or log in to your Firebase account
-
On the top right corner click
Go to console
-
Click
Add project
, give it a name (your github repo name so here threejs-classic-techniques) and follow the various steps -
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": "build", "ignore": [], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }
.firebaserc
:{ "projects": { "default": "<YOUR_FIREBASE_ID>" } }
-
On the
main
branch, after runningnpm run build
, deploy using the commandfirebase deploy
.
=> live link: https://threejs-classic-techniques.web.app/
Back to top
- favicon.ico - | copyright
- - | copyright
Back to top