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 loads 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, creating a geometric cube, adding a cube to the scene, rendering the scene, adding viewport to element, and many more. There are different cameras used in three.js library.
At A Glance
An overview of three.js features.
- Create 3D scenes
- Loading 3D models
- Draw lines
- Read/Write FBX
- Read/Write Collada
- Convert 3D scenes
- Export data in glTF
- component handling
- handle textures
three.js supports popular 3D file formats listed below.
Platform Independence
three.js can be run on any modern JavaScript bundler, the most popular choice is webpack.
- JavaScript
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 a 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 using 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 the material and can use LineBasicMaterial or LineDashedMaterial. After the material, we will need geometry with some vertices. Lines are drawn between each consecutive pair of vertices.
