Create your first 3d scene with Three.js 🪄

Hi Everyone, my name is Devang Saklani and Today I'm going to teach you how you can create your first 3d scene with the help of Threejs.

First of all, What is Threejs?

Three. js is a JavaScript library used to create and run / display animated 3D graphics in a web browser using WebGL. It also acts as an Api for WebGL.
It uses <canvas> element to display the scene.

It has made displaying 3d objects in Web browsers far easy. As compared to writing native WebGL, ThreeJS is super easy as well as performant.

Setting up the Basic Environment

Our first step would be to setup a basic environment for our website. We will use ThreeJS npm package and Webpack to bundle it, but you can also use the cdn link for the package.

I won't tell you how to use Threejs with CDN in this project but you can read official installation docs to use this method

Clone this starter webpack template: Github link
and run

npm install
or
yarn

The cloned repo folder structure should be like this:

To start webpack server run npm run dev or yarn dev

Creating Basic Scene

First let's discuss what are we going to do:

1. Firstly we will import three from the package
2. Then we will initialize a new ThreeJS Scene
3. A new camera (for viewing the scene)
4. Creating a 3d cube (our 3d object)
5. Setting up the renderer and the animate function

It is as easy as it sounds! Let's start

• Installation:

npm i three
or 
yarn add three

Now, in script.js

• Import Threejs:

import  *  as THREE from  "three";

• Create a new ThreeJS Scene

const scene =  new THREE.Scene();

• Camera for viewing scene

const camera =  new THREE.PerspectiveCamera(
    75, // field of view
    innerWidth / innerHeight, // aspect ratio of the canvas / screen
    0.1, 500  // near and far clipping plane respectively
);
camera.position.set(0, 0, 3); // Changing the default position of the camera

To know more about these properties follow the official docs
or read this guide

• Setting up our cube object

const geometry =  new THREE.BoxGeometry(); // Creating a new Geometry
const material =  new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Giving it a material
const cube =  new THREE.Mesh(geometry, material); // Combining both things

scene.add(cube); // adding it to the scene

by this time nothing will appear on the screen because nothing is rendered yet, So let's initiate a renderer

• Creating a renderer

const renderer =  new THREE.WebGL1Renderer();   // Creating renderer
renderer.setSize(innerWidth, innerHeight); // Size of canvas element
renderer.setPixelRatio(devicePixelRatio); // Yes pixel-ratio of the screen
document.body.appendChild(renderer.domElement); // Adding canvas element to the html 

• Now comes the final step: Rendering!!

function  animate() {
renderer.render(scene, camera); // Rendering single frame
cube.rotation.x +=  0.01;       // Rotating on the x and y axis
cube.rotation.y +=  0.01;       // Adding simple animation to our object
controls.update() // Required for smooth camera movement
requestAnimationFrame(animate); // Calling this function again to repeat the process 
}
animate();

What's happening is we are creating a self-calling function that will call itself around 60 times a second (depends on the user's Screen and CPU) and will create and display a frame on each render.
In the third line we will rotate the cube to get some simple animations on the scene.

The screen should look like this:

• Wanna add controls to the scene? In order to add Mouse Controls to the Scene we will use OrbitControls

import  { OrbitControls }  from  "three/examples/jsm/controls/OrbitControls";// import at the top

//  ... camera, renderer

const controls =  new  OrbitControls(camera, renderer.domElement); // Creating controls
controls.enableDamping =  true; // Enabling the smooth camera movement effect

If any error occurs just leave a comment below I'll surely try to reply ASAP.

That's it, You've finally created your first ThreeJS scene! Congratulations! 🎉

Well this was pretty basic, Now lets add something interesting!

Change MeshBasicMaterial to MeshNormalMaterial.
The screen should look like this:

Read more about materials here: Official docs or here

The final script should look like this:

Check it live here: click here

You can add more cubes, spheres, triangles as well as your Custom bleder models! in ThreeJS.

This is the most recent website I build using ThreeJS: click here and TBH it's pretty basic and easy.

If you are interested in learning ThreeJS I'd recommend reading the official docs or going to Threejs Fundamentals and if you're really interested in WebGL and ThreeJS I'd recommend you to watch this course by Bruno Simon. He is one of the finest ThreeJS developers.

Thanks for reading this post and if you got any errors, just leave a comment below or mail me.

A post by Devang Saklani. Hope my efforts were of any help.😇