(Year 3 Sem C) Week 3 Prototyping Preparation (Part 1)

Today, I decided to do some testing on three js.

First,I decided to apply the image of the heart shape in the website. I decided to apply back three js that I have used before to the website (Reference Link ) .

As you can see that have a heart shape at the left-top side corner of the image. I keep playing with the heart shape with CSS but the process not really went well. Particles is the main interactive element for my assignment. Therefore, I decided to change the cube to sphere.

Before that, I have searched for the tutorials on how to create the sphere .

Here is the code that created a 3D cube:
 var geometry = new THREE.CubeGeometry( 20, 20, 20);  
 var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );
cubeMesh = new THREE.Mesh(geometry, material );
cubeMesh.position.z = -100;
cubeMesh.position.x = 100;

Replace  the code with Sphere Code:

var geometry = new THREE.SphereGeometry( 3, 10, 10 );
var material = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
sphere = new THREE.Mesh( geometry, material );

And will come out something as below:

The size of the circle need to be adjusted at this sentences new THREE.SphereGeometry( 3, 10, 10 );

If the sentence new THREE.MeshBasicMaterial( {color: 0xe62fac,} ); change to new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );the sphere will turn out to be 3D size as below:

But, 3D sphere is not really the design that I am looking for. Therefore, I decide to work on the flat design first.


Reference Link

Solutiondesign.com. (2016). WebGL and Three.js: Particles - Blog - sdg. [online] Available at: https://www.solutiondesign.com/blog/-/blogs/webgl-and-three-js-particles [Accessed 25  Nov. 2016].

npm. (2016). three. [online] Available at: https://www.npmjs.com/package/three [Accessed 25 Nov. 2016].

Threejs.org. (2016). three.js / documentation. [online] Available at: https://threejs.org/docs/#Reference/Geometries/SphereGeometry [Accessed 25 Nov. 2016].