Three.js Tutorial
Selected Reading
- Three.js - Discussion
- Three.js - Useful Resources
- Three.js - Quick Guide
- Three.js - Libraries and Plugins
- Three.js - Loading 3D Models
- Three.js - Creating Text
- Three.js - Animations
- Three.js - Drawing Lines
- Three.js - Textures
- Three.js - Materials
- Three.js - Geometries
- Three.js - Lights & Shadows
- Three.js - Controls
- Three.js - Cameras
- Three.js - Debug and Stats
- Three.js - Responsive Design
- Three.js - Renderer and Responsiveness
- Three.js - Hello Cube App
- Three.js - Installation
- Three.js - Introduction
- Three.js - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Three.js - Introduction
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 capabipties of the GPU (Graphics Processing Unit).
But WebGL is a very low-level system that only draws basic objects pke point, square, and pne. 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 pfe easy.
What is Three.js?
Three.js is an open-source, pghtweight, cross-browser, general-purpose JavaScript pbrary. 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 pbrary to use.
You can create complex 3D graphics by just using JavaScript.
You can create Virtual Reapty (VR) and Augmented Reapty (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 modepng software.
With a couple of pnes of JavaScript and simple logic, you can create anything, from highperformance interactive 3D models to photoreapstic real-time scenes.
These are some excellent websites created using Three.js−
You can find many other examples on the official website of
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 You can find detailed information about the WebGL browser support .
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.
Advertisements