We can make Three.js work for us by downloading it and extracting the three.min.js file from the build folder to our folder. It is the easiest way of making the Three.js work for us but being the easiest way it has got its own limitations.

Need for a Local Server

Making three.js come to work through the above method is a good and easy way but it has got 2 major limitations-:

When we access three.js from the above method we get access to plenty of "core" classes. There are plenty of classes in these core and we can make many things with them but we don't learn everything. In the future when we will create complex projects we will need access to the OrbitControl class which is not present in the core classes.
When opening an HTML file in the browser, the browser won't let Javascript execute anything, obviously for security reasons. Due to this one won't be able to load local files like textures or models. This thing is good for security reasons. You won't want js file to mess with the code of your HTML file.

But we want our javascript code to run as if there is an online website to do that, we need to run a local server.

There are many ways of handling those issues, but the simplest solution is to use a “build tool” or “bundler”.

Build Tools (also referred to as Bundlers)

A build tool is a script, framework, or any kind of software created specifically for a given programming language to compile code, run tests on it, or do other operations needed for a build.

What is a JavaScript Build Tool?

A javascript build tool provides automation for what we might consider "grunt work" in the process of development. A build tool will automatically perform specific tasks that we would otherwise do manually.

If you want know more about BUILD TOOLS refer to the website -:

https://www.codeinwp.com/blog/best-javascript-build-tools-bundlers/#gref

Now, that we have got a brief idea of build tools, let's talk about some build tools. There are many build tools available these days like webpack, gulp, parcel, vite etc. Out of all the mentioned build tools webpack is the most popular build tool but, we will use Vite. The reason to use Vite is that it is faster to download, faster to run and less prone to bugs.

Vite

Vite is a javascript build tool that is closely associated with Vue.js, the popular react alternative. Vite was created by Evan You, the creator of Vue.js.

Node.js

Node JS is an open-source and cross-platform runtime environment built on Chrome’s V8 JavaScript engine for executing JavaScript code outside of a browser. It provides an event-driven, non-blocking (asynchronous) I/O and cross-platform runtime environment for building highly scalable server-side applications using JavaScript.

To check if node.js is installed on your computer or which version is installed just simply open the terminal and run node -v.

More about the Vite Template

Here are a few things you need to know about the Vite template before we continue:

The Vite configuration is set in the vite.config.js file. If you are curious about how to configure a Vite project, check the Vite website.
You need to run npm install only once after downloading the project.
You need to run npm run dev each time you want to run the server and start coding. Your terminal might seem stuck, but it's perfectly normal, and it means that the server is running.
Press CTRL + C to stop the server. You might need to press the shortcut multiple times on a Windows system or confirm with the letter o.
The only folders you need to explore, are the src/ and the static/ folders.
In the src/ folder, you can find the traditional index.html, script.js, and style.css files.
You can put "static files" in the static/ folder. Those files will be served as if they were available in the root folder (without having to write static/). You can test by adding /door.jpg at the end of the URL (http://localhost:5173/door.jpg). We'll use this to load textures and models later.
The page will automatically reload as you save any of those files.

You can access your local server from any other device on the same network by typing the same URL that looks something like this http://192.168.1.25:5173. It’s very useful to debug on other devices like mobiles. If it’s not working, it’s usually because of your firewall.

A new way of making use of three.js

import * as THREE from 'three'

That's it for this blog. See you all in the next blog.

Anurag's blog