Blog Archive

Theme images by Storman. Powered by Blogger.


Tuesday, August 30, 2016

Three.Js Latest Interview Questions For Freshers And Experienced.

Three.Js Latest Interview Questions For Freshers And Experienced. Most Frequently Asked Three.Js Interview Questions And Answers. Top 20 Three.Js Interview Questions With Answers.


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.

7-20-2015 3-20-41 PM

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

0 on: "Three.Js Latest Interview Questions For Freshers And Experienced."