Introduction To 3D In HTML5 With Three.js

Introduction

With the introduction of HTML5, we are able to do infinite things on the web, like playing audio, video, etc. The question is - Can we develop 3D content that can be run on the browser? It would be so cool if we could develop 3D games, a 3D logo, or a complete 3D website, with the web technology and run it on the browser.

The answer is: Yes, we can. HTML5 offers a 3D library called WebGL - it stands for a web graphics library.

But, the problem is that the web developer does not know about 3D and to create something in 3D, one should have the basic knowledge of 3D in theory as well as in programming. Well! That is not an easy thing and takes a lot of time to learn and create something.

What you need

A text editor
A browser with html5 compatibility
Basic knowledge of HTML
Basic knowledge of CSS
Basic knowledge of JavaScript
Basic knowledge of 3D (optional)

Introduction to 3D in three.js

A 3D world consists of multiple numbers of elements, but only some of them are necessary to initiate a 3D world. These elements are-

Camera (to see the objects -acts as an eye)
A Scene
An Object - cube, cylinder, bottle, a ship, etc.
Renderer - responsible for showing the objects

In three.js, an object has three parts-

Material - e.g.- color.
Geometry - e.g- cube, cylinder.
Mesh - it takes geometry and material and forms an object.

For example, if you want a cube which is a geometry of color-red (the material), then the mesh will take the geometry (cube) and paint it with a red color.

A Simple Scene

Initialize four basic variables.

var Camera;
var Renderer;
var Scene;
var Cube;
Now let's create a basic scene
function InitScene()
{
Scene = new THREE.Scene();
//creating the camera
var Fov=75; //it acts like camera lens
var AspectRatio=window.innerWidth / window.innerHeight;
var Near=1; //Set camera to see the objects- how much near
var Far=10000; //set camera to see the objects- how much far
Camera = new THREE.PerspectiveCamera( Fov, AspectRatio, Near,Far);
Camera.position.z = 1000;
//creating a render of size equal to our screen size
Renderer = new THREE.WebGLRenderer();
Renderer.setSize( window.innerWidth, window.innerHeight );
geometry = new THREE.BoxGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 'red'} );
Cube = new THREE.Mesh( geometry, material );
Scene.add( Cube);
document.body.appendChild( Renderer.domElement );
}

Update the scene.

function UpdateScene()
{
//calling again UpdateScene to update the objects
requestAnimationFrame( UpdateScene );
//Render the objects
Renderer.render( Scene, Camera );
}

Now, we need to call the above method.

//first call init method
InitScene();
//call update method which will (render)create an object on the screen
UpdateScene();

After running the above code, you will see that it creates a red cube, inside our scene.

But, a 3D world does not look good without animation. So, let's rotate our cube. In order to see the rotation effect, we will have to write our code inside the UpdateScene method because this is the part that is rendering the object. So, let's update the UpdateScene method.

function UpdateScene()
{
//calling again UpdateScene to update the objects
requestAnimationFrame( UpdateScene );
//Update the object rotation
Cube.rotation.x += 0.01;
Cube.rotation.y += 0.02;
//Render the objects
Renderer.render( Scene, Camera );
}

Wow! You have just created a 3D world in the browser.

What You Can Do

You can create a 3D game with JavaScript and three.js.
You can make your website more cool with 3D.
You can create a UI in 3D.
And much more...

9 Comments

Join the conversation! Your thoughts help the community grow.

Subash10y ago
Great one
Raja T10y ago
Nice,Thanks for sharing
Prasanna Murali10y ago
Nice post
Shobana J10y ago
NICE ONE
Muhammad Aqib Shehzad10y ago
Nice one
Humayun Kabir Mamun10y ago
Nice...
Ujjwal Gupta10y ago
Thank you guyz
kalu singh rao10y ago
Excellent
Nigel Fernandes10y ago
Interesting