Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Three.js: The Basics

DZone's Guide to

Three.js: The Basics

3D graphics are becoming more and more popular in web development. Learn how to use three.js to create awesome graphics.

· Web Dev Zone ·
Free Resource

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

Three.js is an easy to use, lightweight, JavaScript 3D library. It provides many renderers such as canvas, WebGL, and so on. In this article, I will be using the WebGL renderer.

WebGL (Web Graphics Library) is a JavaScript API that brings hardware-accelerated 3D graphics to the browser without the aid of additional plugins. WebGL runs on your graphics card’s GPU (Graphics Processing Unit), which means that your CPU (Central Processing Unit) can concentrate on other tasks. From a user’s perspective, applications simply run much faster. The three.js library makes it easier to work with WebGL.

So, let’s create some simple 3D graphics using three.js.

Prerequisites

Make sure your browser supports WebGL and you can check WebGL browser compatibility here. Download the latest version of three.js from GitHub and include in your HTML file.

In <body>, define a <script> as shown below.

<body>

  <script>

     // our script goes here..

  < /script>

< /body>

Creating the Scene and the Renderer

The concept of scene is used to define an area where we can place things like geometry, lights, camera, and so on. A renderer is what makes an object appear on the screen. You can have as many scenes as you want, but one renderer can draw only one scene at once.

Three.js provides certain renderers, but I will focus on the WebGL renderer. To get started, let’s define a Scene and a WebGLRenderer.

//define scene

var scene = new THREE.Scene();

//define renderer

var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

// Sets device pixel ratio. This is usually used for HiDPI device to prevent bluring output canvas.

renderer.setPixelRatio( window.devicePixelRatio );

// Sets the clear color and opacity.

renderer.setClearColor( 0x000000, 1 );

document.body.appendChild( renderer.domElement );

Notice that in the last line, we have added the renderer to the body of the HTML document.

Geometry, Materials, and Mesh

Geometry is basically concerned with questions of shape, size, the relative position of figures, and the properties of space.

As the three.js documentation says, “Materials describe the appearance of objects. They are defined in a renderer-independent way, so you don’t have to rewrite materials if you decide to use a different renderer.” This is one of the important aspects of three.js.

Three.js provides some helper functions with which we can create some geometrical shapes. It also provides several materials, but we will use MeshBasicMaterial.

Another thing we need is a Mesh. A mesh is an object that applies a material to a geometry, which we then can insert to our scene, and move around freely.

geometry = new THREE.CircleBufferGeometry(4, 32);

material = new THREE.MeshBasicMaterial( { color: 0x536dfe, wireframe:true } );

var circle = new THREE.Mesh( geometry, material );

scene.add( circle );

geometry = new THREE.BoxBufferGeometry(1, 1, 1);

material = new THREE.MeshBasicMaterial( { color: 0x536dfe, wireframe:true } );

var cube = new THREE.Mesh( geometry, material );

scene.add( cube );

Here, we are using two objects, CircleBufferGeometry and BoxBufferGeometry, to create a circle and cube respectively. Note that the BufferGeometry is more efficient compared to Geometry in terms of GPU usage.

Creating a Camera

The camera plays a crucial role in rendering the objects. It aids the renderer such that the renderer knows from which point of view it must render. There are a few different cameras in three.js. For now, we will use the PerspectiveCamera.

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

And we will set the position of the camera.

camera.position.z = 10;

Render

Since we have all the set up to render, the last step is to render the things that we created above.

var render = function () {

requestAnimationFrame( render );

renderer.render(scene, camera);

};

requestAnimationFrame is similar to setTimeout but you can pass a parameter along to the function that’s being called, such as the current element being animated.

renderer.render will draw the objects on the screen. Now, let’s rotate the cube and circle by adding the following code within render().

circle.rotation.x += 0.01;

circle.rotation.y += 0.01;

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

The above lines will run every frame and give the cube and circle a nice rotation animation.

For the complete source code and final 3D graphics demo, check out my Pen.

Wrapping Up

I think three.js is an amazing library that unlocks the power of WebGL. If you are interested, look at the three.js site which has good documentation and lots of examples.

As there is growing demand for browser based games, 3D graphics has become one of the key topics in the web community. Apple’s WebKit team has proposed a new Community Group at the W3C to discuss the future of 3D graphics on the Web. Check out the article here.

I hope you enjoy working with three.js!

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

Topics:
web dev ,three.js ,webgl ,renders 3d effects

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}