How to make your first Three.js project with Vite+Javascript

Today we will learn what is Three.js and how we can get started with it by making a simple project on it.

Three.js is a JavaScript library for creating and displaying interactive 3D computer graphics in a web browser. It makes use of WebGL, a low-level graphics API for modern web browsers, to render 3D graphics in a browser window. Three.js has a wealth of resources and examples available, making it a great choice for developers looking to create engaging and immersive 3D experiences on the web.

PREREQUISITES:

1. Basic knowledge of HTML, CSS and Javascript.
2. A basic understanding of 3D graphics and concepts, such as scenes, cameras, and meshes.
3. NodeJS installed in your system.

STEPS:

1. Make a Directory for your three.js project and open the command line there and write:

npm init vite

and select vanilla javascript for your project. This will initialize your project folder there.

2. Go inside your project folder:

cd your-project-name

3. Open your project with any code editor you prefer and delete the unnecessary files and data in main.js

4. Install npm in your project and install three.js by the following commands:

npm install
npm install three

5. Now you have everything ready, just add the boilerplate below to your main.js and npm run dev in your terminal.

 import * as THREE from 'three';

       const scene = new THREE.Scene();
             const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
             const renderer = new THREE.WebGLRenderer();
             renderer.setSize( window.innerWidth, window.innerHeight );
             document.body.appendChild( renderer.domElement );

             const geometry = new THREE.BoxGeometry( 1, 1, 1 );
             const material = new THREE.MeshBasicMaterial( { color: "orange" } );
             const cube = new THREE.Mesh( geometry, material );
             scene.add( cube );

           camera.position.z = 3;
           camera.position.y = -0.5;
           camera.position.x = -1;

       renderer.render( scene, camera );

6. This will make a cube on your screen which you have made using Three.js.

7. There are endless possibilities with Three.js, I am also learning it on my journey and you can too. Just keep exploring and we can make wonders.

I have made this article from my own experience and by learning from many documents and articles, if there is any mistake comment below and if you have ideas to improve this article, reach out to me. If you found my blog interesting and want to hire me, email me at fa1319673@gmail.com

👋 If you find this helpful, please click the clap 👏 button below a few times to show your support for the author 👇

🚀Join FAUN Developer Community & Get Similar Stories in your Inbox Each Week