How 3D Graphics Created by The JS Library

Table of Contents

Evolution of JS Library

Three.Js is a 3D Js library that was firstly introduced by Ricardo Cabello in 2010 to the GitHub library, due to his involvement in demoscene (an extremely adequate small computer program that produces some animated graphics and audiovisual effects. It was first written in Actionscript then later ported into javascript. Three.js was designed with the rendering code as a module instead of the core itself. Ricardo contributed also to SVGrenderer, Canvasrenderer, and API design.

As WebGL was introduced (which stands for Web Graphics Library) It became easier to write scripts and see results output as visual graphics and animation effects. With the use of WebGL, Three.js allows your browser to render smooth 3D animation, and being cross-browser it provides immense leverage of multi-dimensional objects across the web.

Why it Becomes Widespread Technology

Three.Js is one type of a single JavaScript file and includes features like effects, scenes, cameras, lights, sky, materials, meshes, shaders, animations, and 3D objects. Using WebGL in Three.js, you can render interactive 3D and 2D graphics in web browsers without the use of plugins.

It is easy to use Three.JS in your web browser. The only thing you need to do is to make an HTML file including script tags along with three.js files in the JS directory and then open it in whatever browser you use.

Code Formatting and Syntax

 <!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>My first three.js app</title>
       <style>
       body { margin: 0; }
       </style>
   </head>
       <body>
            <script src="js/three.js"></script>
            <script>
                                   // Our Javascript will go here.
            </script>
            </body>
 </html>

If you really want to display anything with three.js, library you need three things: scene, camera, and renderer, so that we can render the scene with a camera. although three.js has many cameras like:-

ArrayCamera
CubeCamera
OrthographicCamera
PerspectiveCamera
StereoCamera

But we took a perspective camera for just our demo cube shape scene.

Given below code helps you to create a demo scene of a cube:-

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

To make a cube you need to add the following code also:-

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

After that, you need something more to appear on your computer, but what is it…???

Well, it’s called Rendering or rendering an element. Because you have just created a shape but to view it as an output you have to render it. For this, you need to add the following function:-

<html>
<body>
<script>
function animate() {
            	requestAnimationFrame( animate );
            	renderer.render( scene, camera );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
}
animate();
</script>
</body>
</html>

Some key features of Three.JS which make it so popular amongst interactive 3D animated websites and applications

Scenes:-

Scenes allow you to set up what thing you want to do and where this thing is to be rendered by Three.js. It is where you place objects, lights, and cameras and you can also add & remove objects at run-time. Post-Processing is done for creating effects or filters for your whole scene. It can transform the feel of your scene and mimic interesting visual effects.

Cameras:-

The library of Three.js provides two different cameras: an orthographic camera and a perspective camera. One can apply an Abstract base class filter for cameras and every time you build a new camera it automatically builds a class and class should always be genetic when you build a new camera.

Making a Mesh:-

It acts as a skeleton that makes up the figure of the 3D objects. Faces, edges, and vertices make up the meshes of a polygonal model. Three.Js has Primitives which are geometric meshes like Spheres, Planes, Cubes, and Cylinders. API design, Canvas Renderer, and SVGRenderer these three designs that can make a mesh and an effect to display an outline around a mesh.

Lights:-

The light in Three.js helps to revert an ambient light, even though a lambert material applied we have no light in the scene because if you rendered the scene you would see a red circle with the same color of the background.

Scaling:-

You can measure a set of objects for this you will need a helper variable called t for counting the forgotten time and then add it right before the render () function. Also, you can zoom in on the camera or measure the object that changes the pixels which you have just drawn.

Render:-

If you use a loop in your scene you should always use requestAnimationFrame. It is the easiest and most innovative method to handle animation in the browser. Any kind of shader that needs multiple passes (such as a blur of the image, tint, saturation) render will do it in whatever texture you want.

Materials:-

Materials help to make the appearance of objects in the browser. With the help of material one can write shades for everything that is being rendered, shaders are different than render but they are written in GLSL (OpenGL Shader Language) which informs GPU how it is to look.