Three.js Interview Questions

 Top 24 Three.js Interview Questions

1) Explain what is Three.js?

Three.js is an open source JavaScript 3D library that enables you to make and display animated, interactive 3D computer graphics on any compatible web browser without having a dependency on proprietary plug-ins.

2) Explain what are the key features of Three.js?

Key features of Three.js include

·        Renderers

·        Scenes

·        Cameras

·        Lights

·        Animations

·        Materials

·        Shaders

·        Objects

·        Geometry

·        Loaders

·        Export/Import

·        Debugging

·        Support

3) Explain what is the difference between WebGL and three.js?

WebGL	Three.js
·        WebGL allows you to control the GPU in more direct way	·        Three.js is built on top of WebGL and allows you to take care of lot of things like what objects to draw each frame
·        It is more an “immediate mode”	·        It is more a “retained mode”
·        It does not have additional support for text, for shaders built, for picking, etc.	·        It does have an additional support for text, for picking, for object hierarchy, etc.

4) Explain how clipping is done in Three.js?

Clipping in Three.js for far and near clipping planes to your camera object, you should use code like

Var camera = new THREE.PerspectiveCamera( fov, aspect , near , far );

The far and near contains a value, for example, near=0.1 and far=10000, so an object between these values will be rendered.

5) Explain the term SkinnedMesh in Three.js?

SkinnedMesh is a 3D object has bones data. These bones then can be used to animate the vertices of the object.

6) Explain what is the easiest way to import 3D model into Three.js?

The easiest ways to import 3D model into Three.js is to convert .obj files into JSON format and then load them into Three.js. For that conversion, you are required convert_obj_three.py script.

7) To move an object on its own axis without gimbal lock what function you can use?

To rotate an object on its own axis without facing gimbal lock issue, you can implement a quaternion.

8) Explain how can you load assets into three.js using File API?

In order to load assets into three.js using file API, you can override or “hot patch” the loaders load() function.  Put your overrides before any other Three.js related code.

9) Explain what is Euler angle? How can you get Euler rotation from Quaternion?

Euler angle: It describe a rotation transformation by rotating an object on its various angles and in specified amounts per axis, and a specified axis order.

To get Euler rotation from Quaternion, enter the code

var rotation = new THREE.Euler().setFromQuaternion( quaternion, eulerorder) ;

10) Explain how can you render a WebGLRenderTarget texture?

The size parameter in rendere.setSize() are used by the renderer to set the viewport when rendering to the screen only.  While when the renderers render to an offscreen render target, the size of the texture rendered to is given by the parameters renderTarget.width and renderTarget.height.

11) List out the plugins available in three.js?

The plugins available in three.js plugin include

·        LensFlare Plugin

·        ShadowMapPlugin

·        SpritePlugin

12) Explain what is PointCloud in three.js?

PoinCloud is a class for displaying particles in the form of variable size points.

13) Explain how to get the absolute position of a vertex in three.js?

To get the absolute position of a vertex in three.js,

·        Make sure that the object’s matrices have been updated –

·        updateMatrixWorld();

·        Then follow these steps

·        var vector = object.geometry.vertices [i].clone ( );

·        applyMatrix4( object.matrixworld);

14) Explain what is ShaderMaterial in three.js?

In three.js ShaderMaterial is a material rendered with custom shaders.  It is a small program written in GLSL to run on the GPU.  You will use a custom shader if you want

·        Implement an effect not included with any of the built-in material

·        Combine many objects into a single Geometry or BufferGeometry to improve performance

·        Associate custom data with individual vertices

15) Mention what are the three types of variables in shaders?

The three types of variables in shaders are

·        Uniforms: features like lighting, fog and shadow maps are stored in Uniforms

·        Attributes: features like vertex color, vertex position and face normal are all example of data that would be stored in attributes

·        Varying: these variables are passed from the vertex shader to the fragment shader

16) Explain what is the use of ObjectLoader in three.js?

In three.js object loader is used for loading a JSON resource, unlike the JSONLoader, this one make use of the .type attributes of objects to map them to their original classes.

17) Explain how to load an animated .x model in three.js?

If your .X is an ascii format, then it would not be hard to parse or convert.

Either export the object as an JSON or use Belnded 2.4x

18) Explain what you need to do to set a transparent background in three.js?

If you want to set a transparent background in three.js , you need to pass in the alpha parameter to the WebGLRenderer constructor.

var renderer= new THREE.WebGLRenderer( { alpha: true} ) ;

Color is default value

renderer.setClearColor( 0x00000, 0 ); // the default

19) Explain in three.js how can you add text to the model?

In three.js you can add text to a model either using property “TextGeometry” and merging them with the other geometry or either through a texture

20) Explain how to update wireframe helpers position?

To update wireframe helpers position, you have to move the mesh, and it will move the Wireframehelper automatically.

Use , set mesh.visible=false to see only the helper.

Note:

In case you want to see only the helper, you can set mesh.visible=false, but the mesh must be included in the scene graph

21) Explain what is Frustum in three.js?

Frustum in three.js are used to determine what is inside the camera’s field of view.  It helps to speed up the rendering process

22) Explain what is ImmediateRenderObject?

ImmediateRenderObject is a base class for immediate rendering objects.

23) Explain how can you rotate a sprite object in three.js?

Rotation of sprite can be set by its material rotation parameter. For example

var material = new THREE.SpriteMaterial ( {

color: 0xffffff,

map: texture,

rotation: math.PI/4;

} );

var sprite= new THREE.Sprite (material);