HOW TO SETUP THREE.JS PROJECT

3 min readJan 5, 2024

Three.js

Three.js is a powerful and versatile JavaScript library for creating stunning 3D graphics and interactive web experiences. In order to get started with Three.js, you need to set up a project that includes the necessary files and dependencies. In this blog blog, we’ll walk you through the steps to set up a basic Three.js project.

Vite

Vite is a modern build tool that provides fast and efficient development experience for web applications. In this blog blog, we’ll walk you through the steps to set up a Three.js project using Vite.

Step 1: Install Node JS

The first step is to install Node JS. You can install Node JS.

Step 2: Create a new project

The next step is to create a new project using Vite. You can create a new project using npm or yarn, after running this command you will be prompted to select template and language. Select ‘Vanilla’ as the template for your project. And then select ‘JavaScript’ as the language for your project.

npm create vite my-project

Step 3: Install Three.js

The next step is to install Three.js. First go to my-project directory. Then you can install Three.js using npm or yarn. Here’s how to install Three.js using npm or yarn:

npm install three

Step 4: Set up the Project Structure

Remove counter.js and javascript.svg. Replace the index.html and style.css file with the following code:

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js Project</title>
    </head>
    <body>
    <script type="module" src="/main.js"></script>
    </body>
</html>

* {
    box-sizing: border-box;
}

body,
html {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

Step 4: Setup Three.js

To setup the Three.js, open the main.js file and replace with the following code:

import './style.css'
import * as THREE from 'three';

// Initialize Three.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(2, 2, 4);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Render the scene
renderer.render(scene, camera);

Step 5: Start the development server

To start the development server, navigate to the project folder in your terminal and run the following command:

npm run dev

This will start the development server on port 3000. You can now open your browser and navigate to http://localhost:3000 to view your Three.js project.

Conclusion

Good news! You’ve successfully set up a Three.js project using Vite. Now you can start building your Three.js project. If you have any questions, please feel free to comment here. I’m always happy to help.