DH2320: Lab 1 - WebGL and Three.js

This lab was an introduction to WebGL and Javascript 3D-Library Three.js. My experience of using the two is that it was much easier getting in to Three.js. The sample code given was straight forward and not as dense as the WebGL. Also Three.js has a lot of built-in methods which are extremely easy to use. 

For example: new THREE.CubeGeometry( 2, 2, 2 );  will generate the geometry for a cube with size 2.

Make the first cube look as the second one:

This was pretty straight forward as instructions were exact. In short i needed to change some different parameters. However, it was good to see hoe the two scenes worked and how they differ. 

Adding a tetraherdon:

This was a harder task since it requiered me to "think" in 3D which I was not used to.

In WebGl you have to manually define the vertices of an object. I drew a XYZ-system on paper to try to see where the points should be placed. A tetrahedron has 4 faces, all of which are spanned within 3 vertices, and there is a total of 4 vertices in the tetrahedron.

However I was unsure about edge length and so on. I used information from wikipedia[Link]

where it says that:

The following Cartesian coordinates define the four vertices of a tetrahedron with edge length 2, centered at the origin:

(±1, 0, −1/√2)

(0, ±1, 1/√2)

To understand how the vertices should be connected I tried to think of each vertices as defines by which faces it spanned:

verticesTetra = [

        // Red Face

        1, 0,  -1/Math.sqrt(2), //Red - Yellow - Pink

         -1, 0,  -1/Math.sqrt(2), //Red- Yellow -Green

         0,  1,  1/Math.sqrt(2), // Red Green Pink

        //Yellow face

        1, 0,  -1/Math.sqrt(2), //Red - Yellow - Pink

        -1, 0,  -1/Math.sqrt(2), //Red- Yellow -Green

         0,  -1,  1/Math.sqrt(2), //Yellow-Green-Pink

        // Green face

         0,  -1,  1/Math.sqrt(2), //Yellow-Green-Pink

        -1, 0,  -1/Math.sqrt(2), //Red- Yellow -Green

          0,  1,  1/Math.sqrt(2), // Red Green Pink

        // Pink face

        1, 0,  -1/Math.sqrt(2), //Red - Yellow - Pink

         0,  1,  1/Math.sqrt(2), // Red Green Pink

          0,  -1,  1/Math.sqrt(2), //Yellow-Green-Pink

    ];

So there are 4 vertices and they are all connecting to three of the vertices.

For Three.js there is a method THREE.TetrahedronGeometry() which helps with creating the geometry of the object, very helpful. However, I had some problem figuring out how to make sure that the size of the tetrahedron was the same as the in the WebGL scene. The THREE.TetrahedronGeometry() method takes one argument, radius of a circumsphere which fits the tetradhedron. Again, according to wikipedia the radius is given by:

  where a = edge length. 

Since edge length of the tetrahedron i used for WebGL was 2, I used a=2.