Three JS for absolute beginners

Why do we need 3D and Geometric shapes in our design?
Design in 2017 will continue the trends that materialized in 2016 while adding some new influences, but the feeling is well known and familiar and you may have seen it in the past couple of years.

3D is definitely heading our way and we are going to see its influence in all design fields. With the VR/AR revolution rapidly building momentum, this domain is evolving pretty fast.

Also Geometric Shapes, Patterns, Lines and Circles. This trend started in 2016 and will definitely continue in 2017. You can personalize a website simply by adding some modern shapes, either flat or with a soft shadow.


How to create and display animated 3D computer graphics in a web browser?

Use three.js

three.js??
Three.js is easy to use, lightweight, JavaScript 3D library. The library provides CSS3D and WebGL renderers.

WEBGL doesn’t ring a bell?
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 elements.

Okay does it support all browsers?
Even though this is becoming less and less of a problem, some devices or browsers may still not support WebGL. The following method allows you to check if it is supported and use CanvasRenderer if it is not.
Add Detector.js to your javascript and run the following before attempting to render anything.
renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer();

How to get started?
Basic Procedure

  • Creating the scene
  • Rendering the scene
  • Animating the object


Where is the HTML part?

That’s all. All the code below goes into the empty <script> tag.

Creating the scene
To actually be able to display anything with three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.


Here we use PerspectiveCamera. Camera that uses perspective projection. This projection mode is designed to mimic the way the human eye sees. It is the most common projection mode used for rendering a 3D scene.

  • The first attribute is the field of view.
  • The second one is the aspect ratio.
  • The next two attributes are the near and far clipping plane.

Next up is the renderer. This is where the magic happens. In addition to the WebGLRenderer we use here, three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don’t have WebGL support for some reason.

In addition to creating the renderer instance, we also need to set the size at which we want it to render our app. Last but not least, we add the renderer element to our HTML document. This is a <canvas> element the renderer uses to display the scene to us.

Geometry and Material
To create a cube, we need a BoxGeometry. This is an object that contains all the points (vertices) and fill (faces) of the cube. In addition to the geometry, we need a material to color it. All materials take an object of properties which will be applied to them.

Mesh
A mesh is an object that takes a geometry, and applies a material to it, which we then can insert to our scene, and move freely around.

var cube = new THREE.Mesh( geometry, material );

By default, when we call scene.add(), the thing we add will be added to the coordinates (0,0,0). This would cause both the camera and the cube to be inside each other. To avoid this, we simply move the camera out a bit.

scene.add( cube );
camera.position.z = 5;

Rendering the scene

Render loop will create a loop that causes the renderer to draw the scene 60 times per second. requestAnimationFrame has a number of advantages.
Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.

This will be run every frame (60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the render loop.

Congratulations! You have now completed your first three.js application. It’s simple.

For complete code and result check JS Fiddle Link