Week 12 Three js exploration (Part 3)

Today is the day which explore about the coding again! The challenge is to move the cube to the different position.

First of all, I have created out another cube by using the coding below:

var geometry3 = new THREE.CubeGeometry( 10, 10, 10);  
var material3 = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );

Then this coding will add in to the function init()

cubeMesh3 = new THREE.Mesh(geometry3, material3 );
cubeMesh3.position.z = -40
cubeMesh3.position.y = -20;

scene.add( cubeMesh3 );

After that, the code will add in to the function animate ()

cubeMesh3.rotation.x += 2 * deltaTime;

cubeMesh3.rotation.y += 3 * deltaTime;

Before start to move the position of the cube, I have tried to explore another coding which is tween. This is the Youtube tutorials.

var tween = new TWEEN.Tween({x: 0, y:0, rotation :0}This coding is telling that where the square will start and go.

.to ({x:400,y:0, rotation:90},2000)

This coding is telling where is wanted to be.

First, I will create a div tag to create a square with the code.

<div id="testing" style = "position:absolute; width:100px; height:100px;background :#E93336; padding :1cm;"></div>

Then, apply another code as below:

<script src="javascript/Tween.js"></script>
<script>
init();
animate();

function init (){
var testing = document.getElementById("testing");
var tween = new TWEEN.Tween({x: 0, y:0, rotation :0})
.to ({x:400,y:0, rotation:90},2000)
.onUpdate ( 

function (){
testing.style.left = this.x +"px";
}).start ();
}
function animate (){
requestAnimationFrame(animate);
TWEEN.update();
}

</script>

After apply, the square can be move from left to right.
But, I failed to add in Tween and move the cube. Therefore, I try to add in the code as below to the function animate():

cubeMesh2.position.x += 20* deltaTime;
cubeMesh3.position.y += 15 * deltaTime;

After that, the cube can MOVE!

Reference 

GreenSock. (2016). Getting Started with GSAP (GreenSock Animation Platform). [online] Available at: https://greensock.com/get-started-js [Accessed 19 Aug. 2016].

YouTube. (2016). First Look at Tween Animations for ThreeJS with JavaScript Tutorial. [online] Available at: https://www.youtube.com/watch?v=fGoAj2_xwy8 [Accessed 19 Aug. 2016].