- Three.js Tutorial
- Three.js - Home
- Three.js - Introduction
- Three.js - Installation
- Three.js - Hello Cube App
- Three.js - Renderer and Responsiveness
- Three.js - Responsive Design
- Three.js - Debug and Stats
- Three.js - Cameras
- Three.js - Controls
- Three.js - Lights & Shadows
- Three.js - Geometries
- Three.js - Materials
- Three.js - Textures
- Three.js - Drawing Lines
- Three.js - Animations
- Three.js - Creating Text
- Three.js - Loading 3D Models
- Three.js - Libraries and Plugins
- Three.js Useful Resources
- Three.js - Quick Guide
- Three.js - Useful Resources
- Three.js - Discussion
Three.js - Introduction
All modern browsers became more powerful and more accessible directly using JavaScript. They have adopted WebGL (Web Graphics Library), a JavaScript API, which allows you to render highperformance interactive 3D and 2D graphics within any compatible web browser using the capabilities of the GPU (Graphics Processing Unit).
But WebGL is a very low-level system that only draws basic objects like point, square, and line. However, programming WebGL directly from JavaScript is a very complex and verbose process. You need to know the inner details of WebGL and learn a complex shader language to get the most out of WebGL. Here comes Three.js to make your life easy.
What is Three.js?
Three.js is an open-source, lightweight, cross-browser, general-purpose JavaScript library. Three.js uses WebGL behind the scenes, so you can use it to render Graphics on an HTML <canvas> element in the browser. Since Three.js uses JavaScript, you can interact with other web page elements, add animations and interactions, and even create a game with some logic.
Why use Three.js?
The following features make Three.js an excellent library to use.
You can create complex 3D graphics by just using JavaScript.
You can create Virtual Reality (VR) and Augmented Reality (AR) scenes inside the browser.
Since it uses WebGL, it has cross-browser support. Many browsers support it.
You can add various materials, textures and animate 3D objects.
You can also load and work on objects from other 3D modeling software.
With a couple of lines of JavaScript and simple logic, you can create anything, from highperformance interactive 3D models to photorealistic real-time scenes.
These are some excellent websites created using Three.js−
You can find many other examples on the official website of three.js
Browser Support
All modern browsers on desktop, as well as on mobile, currently support WebGL. The only browser where you have to take care of is the mobile Opera Mini browser. For IE 10 and older,there is the IEWebGL plugin, which you can get from https://github.com/iewebgl/iewebgl./ You can find detailed information about the WebGL browser support here.
Once you understand what Three.js is, you can continue to the next chapter about setting up a project to start working with Three.js.