I started off with the three.js example for interactive particles that show above as this is similar to the effect that i wanted to achieve. It has the hovering and it has clean design. After some editing to the code I decide to move on, on making click-able particle. After much research, I found mr.doob says on a forum adding this line particle.data = { url: “http://google.com” }
However, this doesn’t work for my first few attempt, but I while i try and error the particle.data code at different particles code it works for this!
After I added the particle.data code at the correct place it work! However, I feel I am still confused with how three.js code so I decided to go for online tutorial. I found this tutorial which will teach me steps by steps from making basic shapes, adding colour to more complicated stuff. While doing the tutorial, I decided to learn more I need to improve from the previous code that they teach and see the differences and how they make it work.
The code actually work similarly to processing, they provide the class on the start and write the detail of the code.
Java script has function initializeScene() where we have draw our object, set the position of the object and colour also the camera. Next, function animateScene() where we animate our object turning. Lastly, function renderScene() to render out the above what we have code out to the screen.
Example of the tutorial
The shapes are using three.js. THREE.Geometry for the 2D object while 3D will be using THREE.CylinderGeometry for the pyramid and THREE.BoxGeometry for the cube. THREE.MeshBasicMaterial is use for the colour or even texture mapping for the objects.
However, with the tutorial I am stuck at tutorial 06 Texture mapping. I am still trying ways to make it work.