Rendering web images in Javascript with three.js

If you like to use Javascript and you want to render your web images, there is a library on Github called three.js, which is a great tool that could be very useful if you want to embed vector images in your web design and manage your website reputation.

It is a lightweight and easy to use library based on WebGL, and provides rendering for many of the most common vector image formats, for example: Canvas 2D, SVG and CSS3D. To start using three.js, we simply create a scene and add the geometric shapes we want for our project.

Introduction to three.js

First, to render your web images you must to create an html that contains a canvas element, then import the three.js library.

For this example, we need to create a vectorial image scene with javascript code. This is where the library is used, and its classes allow you to create an image with great methods to manipulate it within a native html element such as canvas.

Scene creation and rendering

The follow elements are crucial for adding a scene inside a canvas using three.js. For example, if we want to add a scene with perspective, we can use a snippet code similar to the following:

var myscene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.2, 800 );
 
var render = new THREE.WebGLRenderer();
render.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( render.domElement );

The attributes specified in PerspectiveCamera mean:

• View field (degrees of image extent at a time)
• Aspect ratio (width of element divided by height)
• Close and far clipping plane, where the processing of these elements is carried out.

Once we define the scene, we proceed to work on its geometry and materials. Geometry refers to the structure of the object and the materials to the texture that covers that geometry.

Also we can also add an animation. This is possible due three.js contains many methods in its documentation to manipulate images and their textures.

To summarize the geometry and animation part, we use the example contained in the documentation:

import * as THREE from 'js/three.module.js';
 
var camera, myscene, render;
var geom, material, mesh;
 
init();
animation();
 
function init() {
 
 camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.02, 20 );
 camera.position.z = 1;
 
 myscene = new THREE.Scene();
 
 geom = new THREE.BoxGeometry( 0.4, 0.4, 0.4 );
 material = new THREE.MeshNormalMaterial();
 
 mesh = new THREE.Mesh( geom, material );
 myscene.add( mesh );
 
 renderer = new THREE.WebGLRenderer( { antialias: true } );
 render.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );
 
}
 
function animation() {
 
 requestAnimationFrame( animation );
 
 mesh.rotation.x += 0.01;
 mesh.rotation.y += 0.02;
 
 renderer.render( myscene, camera );
 
}

This section of code goes between the <script> </script> elements located in the html shown at the beginning. From the previous code, we have the key lines to show the visual effects of the images, which will be reflected in the canvas element that we define.

document.body.appendChild (renderer.domElement);

This piece of code adds the element into the DOM, and the follow code performs the rendering

renderer.render (myscene, camera);