Featured Demos: ThreeJS

Introduction

All the present models on the MapMint 3D viewer homepage, are built completely with ThreeJS library. The main motive of this section is to give a glimpse of experiencing the rendering on 3D models on the user’s webpage.

ThreeJS - Multipurpose, cross browser 3D Library for rendering models.

The current version of this library includes WebGL renderer along with WebGPU, SVG and CSS3D renderers.

Setup

Importing Modules

The first step includes importing the necessary modules, here we use OrbitControls, OBJLoader, MTLLoader, GLTFLoader along with ThreeJS for controlling the model views as per the user and loading files of different extensions mainly .obj, .mtl, .gltf respectively.

Creating the scene

In order to be able to display anything with the ThreeJS Library, we have to set up the environment: scene, camera and renderer.

Camera:

• The PerspectiveCamera involves parameters like Field of View (FOV): It is the extent of the view visible at any moment on the screen. The value here is present in degrees.
• The second argument is the aspect ratio.
• The next two arguments present are near clipping and far clipping plane. This generally means that the objects further away from the camera than the value of far or closer than near will not be rendered. These values can be tweaked a bit for variation in the performance of applications.

Renderer:

With the WebGL Renderer instance in the script, the size for the app to be rendered is also set.

Positioning

The Camera class is the abstract base class for generating the camera. Through this the user views the rendered models on the browser. This class is not inherited to be called directly so generally PerspectiveCamera or OrthographicCamera is needed.

User Controls

The OrbitControl module allows the camera to orbit around the target, here the target is the model considered. The parameters include camera and domElement. The first is the camera to be controlled and the latter one is the HTML element for the event listeners: used to detect various mouse and key actions.

• enableDampling: The first is set to True to add inertia, i.e a sense of weight to controls
• enableZoom: This argument is also set to True for zooming of the camera.