Learning Three.js

Intro

Three.js is a javascript library that uses to create and visualize interactive 3d and 2d web Graphics. It’s built on top of WebGL (Web Graphic Library) to work as a declarative syntax which makes it easier for designers and developers to manipulate WebGL. For this blog, I put together some helpful three.js resources and tutorial. Here are the lists: are

Some cool resources

• Beginning with 3D WebGL
  This website clearly explains all essential three.js components for beginner and also provides the code snapshot to help you understand and easily keep track of what is going on when you start building a 3D component.
• Interactive 3D Graphics course by Udacity (Free) with 3D WebGL
  This course clarify all fundamental and advance theoretical knowledge and how does each elements in WebGL works (using three.js). It also helps provide the step-by-step guide to of coding in three.js. But, it took forever to finish all the videos.
• WebGl and Three.js: Lighting
  A really thorough and in-depth explanation of light system in Three.js
• Three.js Collective Example from Lee Stemkoski
  He provided too many helpful examples to help beginners play around with color, light, camera, and materials.

Let’s get start to learn more about this 3d visualization library!

Understand all essential components

1. Renderer

Renderer is a WebGL scene renderer that will help creates the craft we created using WebGl.

2. Scenes

It's a canvas of your painting in the web browser which visualize all crafted elements at run-time.

3. Cameras

A camera mimics the behavior of a film camera. Camera is the key component in Three.js because it can help determine the parts of scene that get rendered and you can see on the screen by controlling the position and direction of the camera. There are two main options Orthographic and Perspective. Based on the Rachel’s blog here are the most essential components for the camera object.

• fov
  The vertical field of view. This dictates the size of the vertical space your camera's view can reach.
• aspect
  This is the aspect ratio you use to create the horizontal field of view based off the vertical.
• near
  This is the nearest plane of view (where the camera's view begins).
• far
  This is the far plane of view (where the camera's view ends)

4. Geometry

Geometry is a shaped object that we add to our scene it can be both 2d or 3d models (also called as mesh). The geometry made up from vertices, edges, and faces. Every three vertices or points will form the triangular polygon or faces of the model. Then, the faces will from into the surface based on the shaped of the object.

5. Materials

Geometry is a shaped object that we add to our scene it can be both 2d or 3d models (also called as mesh). The geometry made up from vertices, edges, and faces. Every three vertices or points will form the triangular polygon or faces of the model. Then, the faces will from into the surface based on the shaped of the object.

6. Animation (optional)

This element is optional, but I still feel it’s super essential for the interactive 3d objects. I strongly encourage you to learn how to play with object’s animations. There are three main types of animations which are rotation, scaling, and translation. I recommend Tween.js (animation library) to control the animation in three.js.

Let's build 3d animation using Three.js!

I explained the code in the codepen's comments. Please check it out at This Link