three.js   

 
 

JavaScript Library for 3D File Formats

Open Source JavaScript API for reading, writing, and rendering WebGL, FBX, Collada as well as OBJ file formats via Free 3D library.

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 very compact and can be easily transmitted and also loading very fast.

The library supports several important 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.  There are different cameras used in three.js library.

.

Previous Next

Getting Started with three.js

The easiest way to install three.js is by using npm. Please use the following command for a smooth installation. 

Install three.js via NPM

npm install --save three 

Create Scene using JavaScript

The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we 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 your need.

Loading 3D Models via JavaScript

The open source three.js library allows software programmers to load 3D models inside their own application with just a couple of lines of JavaScript code. 3D models are available in hundreds of file formats. Every 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 open source library three.js has provided support for drawing lines or circles inside their own JavaScript application. To start with we need to set up the renderer, scene, and camera. After that, you need to define material and can use LineBasicMaterial or LineDashedMaterial. After material, we will need geometry with some vertices. Lines are drawn between each consecutive pair of vertices.