Week 10 Three js exploration (Part 2)

Here comes the part two for the testing and playing on the three.js coding.

Since the cube is managed to create out at week 8. Therefore, here comes the challenging part! Duplicate it with coding.

Alright. Here is the step for duplicating the cube.

First add

var cubeMesh2  at the very first part

Then add in the code below at the function() part
var geometry2 = new THREE.CubeGeometry( 20, 20, 20);  
var material2 = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );

The reason why to add in cubeMesh2, geometry2 and material2  is because to create another variable for the second cube.

Now add in the coding from below:

cubeMesh2 = new THREE.Mesh(geometry2, material2 );
cubeMesh2.position.z = -80;
cubeMesh2.position.y = -50;
scene.add( cubeMesh2 );

Then, another cube is appeared. But, but, the cube is not moving.

The position of cube need to be adjusted by changing the number of .position.z and .position.y.

To let another cube move around, another code will need to add in:

cubeMesh2.rotation.x += 2 * deltaTime;
cubeMesh2.rotation.y += 3 * deltaTime;

The cube will start to spin around when .rotation have added in.

Beside, the size of the cube also will change when the code is changed as below:

var geometry2 = new THREE.CubeGeometry( 30, 30, 30);  

It was quite fun to try at the three.js code!