1. Products
  2.   3D
  3.   JavaScript
  4.   three.js  

three.js  

 
 

JavaScript Library for Working with 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.it supports 3D Scenes Creation, Gamma Correction & more.

What is three.js Library?

Have you heard about three.js? It’s a cool open-source 3D library made in simple JavaScript. With it, developers like you can display WebGL files easily. The library has loaders for various file formats such as FBX, Collada, and OBJ. But the best format to use for importing and exporting data is glTF. What’s awesome about glTF is that its super small, making it easy to send, and loads really quickly. Plus, it offers key functions for working with 3D models like scene creation, loading models, adding 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. and more.

Three.js is a powerful tool that lets you easily create and control 3D objects, scenes, and animations. A great thing about this library is how flexible it is. You can start with simple shapes and go all the way to intricate models from other places, letting you turn your ideas into reality. Whether you're a seasoned veteran or a newcomer to the world of 3D graphics, it invites you to join the journey and explore the endless possibilities of the third dimension.

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 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. Here is a simple example that shows how software developers can create a 3D scene using JavaScript commands.

How to Create 3D scenes inside JavaScript Applications?

// Create a scene
const scene = new THREE.Scene();

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. The following example shows, how software developers can load 3D models inside their own JavaScript applications.

How to Load 3D Model inside JavaScript Apps?

// import a loader, 

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

// Add model to your scene

const loader = new GLTFLoader();

loader.load( 'path/to/model.glb', function ( gltf ) {

	scene.add( gltf.scene );

}, undefined, function ( error ) {

	console.error( error );

} );

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. Here is an example that shows how to draw a line or a circle inside JavaScript applications.

How to Draw Line in a Diagram using JavaScript API?

//Load Scene

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );

const scene = new THREE.Scene();

//create a blue LineBasicMaterial
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

//Add Geometry with vertices

const points = [];
points.push( new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );

const geometry = new THREE.BufferGeometry().setFromPoints( points );

//Draw Line

const line = new THREE.Line( geometry, material )

scene.add( line );
renderer.render( scene, camera );
 English