Do you ever wonder how these graphics and games are run on a web-browser? What is the technology behind it?It is not as simple as using just HML and CSS. Previously, we used WebGL for graphics. WebGL(Web graphics Library) is JavaScript API which is used for rendering the 3-dimensional objects, 2-dimensional objects and Graphics on the Web-Browser.

What is Three.js?

---

Three.js is an open source JavaScript library that is used to display the graphics, 3D and 2D objects on the web browser. It uses WebGL API behind the scenes. Three.js allow you to use your GPU(Graphics Processing Unit) to render the Graphics and 3D objects on a canvas in the web browser. Since we are using JavaScript, we can also interact with other HTML elements. Three.js was released by Ricardo Cabello in April 2010.

Why do we use Three.js?

---

• Since Three.js is open source, we can easily watch the source code and understand the functionality of the code(functions).
• When we use WebGL for Graphics then it doesn’t support most of the browsers but Three.js supports most of the browsers.
• It doesn’t require any third party plugin to run the code.
• You just need to work on only one programming language JavaScript and off course HTML.

Following features of Three.js

---

• Effects: Anaglyph, cross-eyed, and parallax barrier.
• Scenes: add and remove objects at run-time; fog
• Cameras: perspective and orthographic; controllers: trackball, FPS, path and more
• Animation: armatures, forward kinematics, inverse kinematics, morph, and keyframe
• Lights: ambient, direction, point, and spot lights; shadows: cast and receive
• Materials: Lambert, Phong, smooth shading, textures, and more
• Shaders: access to full OpenGL Shading Language (GLSL) capabilities: lens flare, depth pass, and extensive post-processing library
• Objects: meshes, particles, sprites, lines, ribbons, bones, and more - all with Level of detail
• Geometry: plane, cube, sphere, torus, 3D text, and more; modifiers: lathe, extrude, and tube
• Data loaders: binary, image, JSON, and scene
• Utilities: full set of time and 3D math functions including frustum, matrix, quaternion, UVs, and more
• Export and import: utilities to create Three.js-compatible JSON files from within: Blender, openCTM, FBX, Max, and OBJ
• Support: API documentation is under construction. A public forum and wiki is in full operation.
• Examples: Over 150 files of coding examples plus fonts, models, textures, sounds, and other support files
• Debugging: Stats.js,[14] WebGL Inspector, Three.js Inspector
• Virtual and Augmented Reality via WebXR