ThreeJS — The easiest local development environment setup with Vite

Coming from a CG background and considering bringing my CG knowledge to the web, the first thing I wanted to try was the ThreeJS library.

The ThreeJS library was created by Ricardo Cabello (Mr.doob) and is an open-source JavaScript library for creating 3D web applications. It uses WebGL to render 3D graphics in the browser.

I’m assuming those reading this article already know the basic programming concepts in JavaScript and are already using npm. If not, bare with me, install nodejs, and copy-paste the following commands into your terminal.

There are several ways to import ThreeJS into a project. I’m excluding the possibility of using a CDN or writing the ThreeJS JavaScript code in the <script> tag of the index.html.

Setting up a proper local developing environment has the most sense in any case, even for newbies like me.

I tried different options, including Webpack, which is very hard to configure. Instead of cloning a template repository with a pre-configured Webpack config (which, of course, exists)

I’m going with Vite, which is the fastest and easiest option I’ve found.

Vite is awesome, and it’s a simple and super-fast powerful development tool. In this case, we are using it to create a local development server.

Init a Vite project with npm from the terminal

npm init vite

Give the Project a name and select Vanilla JS as the framework and variant

√ Project name: … threejs-vite
√ Select a framework: » vanilla
√ Select a variant: » vanilla

Enter the directory project…

cd threejs-vite

… and run npm install

npm install

If you plan to import custom .gltf geometry files, encoder like Draco for .glb, you’ll need to include them in the Vite configuration file.

Create a vite.config.js file

touch vite.config.js

Set up a static resources folder to keep things organized.

mkdir public

Finally, you can modify the vite.config.js file in your editor like this…

export default {
 assetsInclude: ["**/*.glb", "**/*.gltf", "**/*.wasm"],
 publicDir: ["public"]
}

Or launch the following command, which is basically the same:

echo "export default { assetsInclude: ['**/*.glb', '**/*.gltf', '**/*.wasm'], publicDir: ['public'] }" > vite.config.js

Now Launch npm run dev to start the server

npm run dev

and visit http://localhost:3000/ in your browser. You should see:

Now edit your ./main.js file with some ThreeJS JavaScript code, or wait for the following tutorial on How to set up a ThreeJS basic scene.

Stay tuned!