Three.JS Standard Installation 2024 (ft. Vite)
If you’re looking to get started with Three.JS in 2024, you’re in the right place! In this article, we’ll walk you through the standard installation process, with a focus on using Vite as our build tool.
Step 1: Install Node.js and npm
Before we can get started with Three.JS and Vite, we need to make sure we have Node.js and npm installed on our system. You can download and install them from here.
Step 2: Create a new project
Next, let’s create a new project directory and navigate into it:
mkdir my-threejs-project
cd my-threejs-project
Step 3: Initialize a new npm project
Now, let’s initialize a new npm project in our directory:
npm init -y
Step 4: Install Three.JS and Vite
Next, let’s install Three.JS and Vite as dependencies in our project:
npm install three vite
Step 5: Create a basic Three.JS scene
Now that we have Three.JS and Vite installed, let’s create a basic Three.JS scene in a new file called index.js:
// index.js
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const animate = () => {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
Step 6: Update your package.json scripts
Finally, update your package.json file with the following scripts:
"scripts": {
"dev": "vite",
"build": "vite build"
}
Step 7: Start the development server
You’re all set! To start the development server and view your Three.JS scene, run the following command:
npm run dev
And there you have it – a basic Three.JS scene set up using Vite as our build tool. Happy coding!
https://threejs.org/docs/index.html#manual/en/introduction/Installation
I did these steps like you, but the final step (with "npx vite" command) I clicked on the link to the local host and it said
"cant find the localhost". Plz help me, thanks a bunch <3
Do i have to repeat those steps everytime i create new project ?
Abd thank you ❤❤
when i opend the web its just show the website with nothing how can i fix that
Great! Thanks 😍
Thanks 🙂
Thank you very much!
👍👍💌🤟🏩Nice!
Nice tutorial! 👍👍👍