three.js

 
 

JavaScript Library for 3D File Formats

Open source JavaScript library for reading, writing, and rendering WebGL, FBX, Collada as well as OBJ file formats

three.js is an open source easy to use, pure JavaScript 3D library that gives software developers the capability to render WebGL files. The three.js library offers loaders for numerous file formats like FBX, Collada as well as OBJ but the recommended format for importing and exporting data is glTF. The great thing about glTF file format is that it is compact and can be easily transmitted.

The library supports several features related to 3D models such as creating a scene, loading 3D models, creating text, drawing lines setting a camera, create a geometric cube, adds cube to the scene, rendering the scene, adds viewport to element, and many more.

Previous Next

Getting Started with three.js

The easiest way to install three.js is by using NPM. Use the following command for a smooth installation.

Install three.js via NPM

npm install --save three 

Create 3D Scene using JavaScript

The open source library three.js supports creating 3D scene. To display anything with three.js you require scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and use the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to the need.

Loading 3D Models via JavaScript

The three.js library allows loading 3D models with just a couple of lines of JavaScript code. 3D models are available in hundreds of file formats. E model comes with different purposes, miscellaneous features, and varying complexity. First, you need to have a loader and after that, you will be able to load the scene.

Draw Lines in a Diagram

The library three.js supports drawing lines or circles. To start with you need to set up the renderer, scene, and camera. After that, you need to define material and can use LineBasicMaterial or LineDashedMaterial. After material, you will need geometry with some vertices. Lines are drawn between each consecutive pair of vertices.