Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Polygonal modeling and Three.js – Part 3

Sunday, April 6th, 2014 by Servage

ADDING TO THE MESH

Because the mesh is covered by the chosen material and rendered in a view with lighting, aesthetic applications can be done to the top of the mesh. Using textures, you can overlay bitmaps to parts of the object to illustrate it. This is an extremely functional way to bring the models to life, and as long as the structure is created with care, it can look flawless on top of the meshes. Shaders can also be applied using a special type of material that shades the object specifically, regardless of the lighting.

Three.js

Now that we understand the fundamentals of 3-D development using polygonal meshes, we can apply them in the Three.js library. Arguably, the greatest part of the Three.js library is the ability to create fantastic scenes purely from experimentation. In this spirit, we’ll develop a simple demo of a rolling rock to showcase some of the basics we’ve learned and the various implementations we can make, with the expectation that you can take it from there.

START THE PROJECT

First, you’ll want to set up your HTML and canvas, and include the library in your document.

<html>
  <head>
    <title>My first Three.js app</title>
    <style>
      canvas { width: 600px; height: 600px; }
    </style>
  </head>
  <body>
    <script src="three.min.js"></script>

    <!-- <script src="Detector.js"></script> -->
    <!-- <script src="stats.min.js"></script> -->

    <script>

       // Three.js code here

    </script>
  </body>
</html>

Two other JavaScript libraries that are worth looking into but not required for this demo are commented out in the snippet above.

Detector.js is included in the Three.js examples and detects whether WebGL is supported. It works similar to the Modernizr library in implementation.

Stats.js is a JavaScript performance monitor created by the same Mr.doob who created the Three.js library. It appends a small box that indicates both frames per second and the time needed to render a frame. This can be extremely helpful during development because 3-D animations can be extremely taxing on system resources. Monitoring this box keeps you informed in real time on what models or actions are causing low frame rates in your scene.

As we begin to set up the scene, note how much work the API is doing for us; most of our work at the beginning involves no more than setting up the constructors and properties. We will be using the library to set up the scene in the same way that it would be set up in 3-D software.

Create the renderer.

Initiate the scene.

Create and position the cameras.

Set up the mesh by combining a new material and new geometry.

Create and position the light source.

Write a function that will render the scene in each frame.

ADDING THREE.JS OBJECTS

Before setting up the scene, we need to declare a renderer, set its size, and append it to the window so that we can see what we’re working on.

var renderer = new THREE.WebGLRenderer();

renderer.setSize(600,600);

document.body.appendChild(renderer.domElement);

If you decided to include the Detector.js that was mentioned, you can instead use the following line to check for WebGL support and include a degradation to the canvas renderer if it is not.

var renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer();

Now that the renderer is included, let’s initiate the scene:

var scene = new THREE.Scene();

Then the camera:

// Syntax
 var camera = new THREE.PerspectiveCamera([fov], [aspect ratio], [near], [far]);
 // Example

 

var camera = new THREE.PerspectiveCamera(45, 600/600 , 0.1, 1000);

Note that each camera uses a separate constructor. Because we plan to view the scene in three dimensions, we’re using the perspective camera. The first of the properties is the field of view in degrees; so, our view would be at a 45° angle. The aspect ratio is next and is written as width/height. This could obviously be written as 1 here because our scene is going to fit our 600 × 600-pixel canvas. For a 1200 × 800-pixel scene, it would be written as 1200/800 or 12/8; and if you want the aspect to constantly fit the window, you could also write window.innerWidth / window.innerHeight. The near and far properties are the third and fourth, giving near and far limits to the area that is rendered.

Placing the camera requires only setting the z-position.

camera.position.z = 400;

We now need to create a mesh to place in the scene. Three.js eliminates the need to create basic meshes yourself, by including the creation of these in its API by way of combining the geometry and material. The only property we must specify is the radius of the geometry.

var geometry = new THREE.SphereGeometry(70);

While it has defaults, specifying the width and height of the segments is also common. Adding segments will increase the smoothness of the mesh but also decrease performance. Because this is only a rock, I’m not too worried about smoothness, so we’ll set a low number of segments. The segment properties are the next two after the radius, so add them the same way.

var geometry = new THREE.SphereGeometry(70,10,10);

To create a mesh out of this new geometry, we still need to add a material to it. Because we want this rock to really show off the light coming from our perspective camera, we’ll add the shiny phong material. Adding this material is as simple as calling it and setting the color property. Notice that the hex color requires the 0x prefix, indicating that it is a hex value.

var material = new THREE.MeshPhongMaterial( { color: 0xe4e4e4 } );

In Three.js, the actual mesh is created by combining the geometry and material. To do this, we just have to call the Mesh constructor and add both the geometry and material variables as arguments.

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

Now that the mesh is declared, we can add it to the scene.

scene.add(sphere);

Recalling the introduction, a mesh needs a light source in order to be viewed properly. Let’s create a white light in the same way we initiated the mesh; then we’ll specify exactly where we want the light to be placed and add it to the scene in the same way we added the mesh.

var pointerOne = new THREE.PointLight(0xffffff);

The positions can be written in one of two ways, depending on what you are trying to accomplish.

// Separately:

pointerOne.position.x = -100;
pointerOne.position.y = -90;
pointerOne.position.z = 130;

// Or combined:

 

pointerOne.position.set(-100,-90,130);

 

// Add to the scene the same way as before.

 

scene.add(pointerOne);

 

Polygonal modeling and Three.js – Part 3, 3.0 out of 5 based on 2 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.