DEV Community

Cover image for Create your first 3d scene with Three.js πŸͺ„
Devang Saklani
Devang Saklani

Posted on

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?

Threejs logo

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
Enter fullscreen mode Exit fullscreen mode

The cloned repo folder structure should be like this:
Folder structure
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
Enter fullscreen mode Exit fullscreen mode

Now, in script.js

  • Import Threejs:
import  *  as THREE from  "three";
Enter fullscreen mode Exit fullscreen mode
  • Create a new ThreeJS Scene
const scene =  new THREE.Scene();
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode
  • 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();
Enter fullscreen mode Exit fullscreen mode

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:

cube

  • 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
Enter fullscreen mode Exit fullscreen mode

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! πŸŽ‰
Congratulations

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

Change MeshBasicMaterial to MeshNormalMaterial.
The screen should look like this:
cube with colors
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.
scene

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.πŸ˜‡

Top comments (0)