body {
font-family: Arial, sans-serif;
padding: 20px;
}
Three.js Project Setup Using Vite
If you’re looking to create a Three.js project with a modern build tool, Vite is a great option. Vite is a next-generation front-end build tool that is fast, reliable, and easy to use. In this article, we’ll walk through the steps to set up a Three.js project using Vite.
Step 1: Install Vite
First, make sure you have Node.js installed on your machine. Then, open a terminal and run the following command to install Vite globally:
npm install -g create-vite
Step 2: Create a New Vite Project
Once Vite is installed, you can create a new project by running the following command in your terminal:
create-vite my-threejs-project --template vanilla
This will create a new Vite project using the vanilla JavaScript template.
Step 3: Install Three.js
Next, navigate into your new project directory and install Three.js using npm:
cd my-threejs-project
npm install three
Step 4: Create a Three.js Scene
Now that Three.js is installed, you can create a new JavaScript file to set up a Three.js scene. For example, you can create a file called app.js and add the following code:
import * as THREE from 'three';
// Create a scene
const scene = new THREE.Scene();
// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
Step 5: Import the Scene into Your HTML
Finally, import your app.js file into the index.html file of your Vite project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Project</title>
</head>
<body>
<script type="module" src="/src/app.js"></script>
</body>
</html>
And that’s it! Now you have a basic setup for a Three.js project using Vite. You can continue to build your project and add more complex 3D scenes and interactions using Three.js and Vite.
God may bless you thank you so much for this, Three js recently has changed how to install the library and it was a little bit difficult to me so I really appreciate this, thank you really because I love this so much
Thanks 💖💖
thank for sharing.
Thank you for this. I'm new to web dev, but decades working in 3D, so I appreciate to-the-point, short and clear tutorials to get started quick. Please keep posting more stuff.