Three.js + Vite — Basic Scene Tutorial
In a previous article, we saw how to create a basic scene with three.js using simple HTML and JavaScript files.
In that article, I also briefly introduced the technologies that three.js leverages to enable the creation of 3D scenes on our web pages.
If you’re interested, you can find the article at this link:
Vite
In modern web development, it’s now quite uncommon to use simple HTML and JavaScript files. Over time, numerous development tools have emerged to help us better manage our projects, especially as they become more complex and feature-rich.
Vite is one such tool that allows us to organize our projects more efficiently, manage dependencies, compile assets, and handle versioning. Importantly, it enables us to preview our projects as if they were served from an online server, rather than solely through our file system.
This last aspect provides numerous advantages, especially for certain features of three.js, such as loading 3D models from files or utilizing functionalities not directly present in the core of the library.
To use Vite, we need to install Node.js and npm. Installing them is not complicated, and below you’ll find the link to the Node.js website. Once there, click on the green button with the latest recommended version to download the executable for installation.
Once we have Node installed, we can proceed with creating the project.
NB
In this article, I won’t provide a detailed explanation of what Node, npm, or Vite are. If you’re already familiar with these tools, you won’t need further explanations.
If you’ve never used them before, you can still follow all the steps, but you might feel disoriented at times, especially if you’re not accustomed to using the terminal. I recommend delving into these topics before proceeding.
If you want to understand how to use three.js and create a basic scene without a bundler manager, you can read this article.
Vite: Create a project
Open the terminal and navigate to the folder where you want to create the project, then execute the following command:
npm create vite@latestAt this point, you will be prompted with a series of questions necessary to create the project. The first of these is the name to be given to the project. Be careful not to include spaces in the name, as it will be used to create the folder where the project will be generated. I will use the name ‘three-vite-basic-scene’.
The second question, asks whether we want to use any framework or use Vanilla JavaScript. For now, we won’t use a framework, so navigate (if necessary) using the keyboard arrows and select ‘Vanilla’ by pressing Enter.
In the next question, navigate using the arrows to select JavaScript as the language (especially if you’re not familiar with TypeScript), and press Enter.
The project is created, and you are provided with the commands to run.
Navigate into the newly created folder by entering:
cd three-vite-basic-sceneLet’s install all the dependencies by running:
npm installLaunch the local server by running:
npm run dev
By visiting the URL http://127.0.0.1:5173/ where the server is running, you should see a page similar to this one.
Let’s install three.js.
Now, open your project in a text editor, such as Visual Studio Code, and open the integrated terminal. The terminal will open with the project folder as the current directory. Run the following command to install our first dependency, three.js:
npm install --save threeLet’s do some cleanup.
Before proceeding, let’s remove all unnecessary code that Vite generates along with the project.
HTML:
Open the index.html file and delete the div with the id "app" so that you only have the following content inside the <body>:
JavaScript
Let’s move to main.js and delete all its content, leaving only the import statement for the style.css file. Add the code to import the three.js library, which we installed in the previous step.
CSS
Finally, completely delete all the content from the style.css stylesheet. We’ll add some rules later if necessary.
Create the 3D Scene:
In this article, I won’t go into detail on each step. Let’s recreate the same scene as in the previous article, which is also linked at the beginning of the page.
I encourage you to read it if you missed it because it explains in more detail the various elements and the necessary steps for our scene, which we will now carry out.
Scene:
Create the scene.
Cube:
To create the cube’s mesh, we first need to create the geometry and the material we want to apply to the cube.
Now, we can create the mesh and add it to the scene.
Camera:
Let’s now take care of the camera. Create a `PerspectiveCamera` that will be our observation point, from which we will view the scene.
Renderer and Canvas:
The last necessary element is the Renderer. When this element is created, the canvas where our scene is drawn is also created. Remember to add this element to the DOM, or you won’t see anything.
Move the Camera:
Move the camera back to properly frame the cube.
Render
To render the first frame of our scene, take the renderer and invoke the render(…) method.
If everything went smoothly, you should see a result like this on your webpage:
The green square is the cube we created. Since we are viewing it frontally, we only see one of its faces.
Conclusion
In this article, we learned how to create a project using Vite and install three.js to reproduce our first 3D scene.
In the next article, we will learn a bit more about manipulating 3D objects and how to move, rotate, and scale them.
