M-NOTE: Incorporating Colour in the App
M-NOTE: 0006— Monday 04 September 2017
Now that the ability to generate Three.js JSON geometry data is possible via the Flux Sample App, the next step is to think about how we can achieve the flow of interactivity. The most distinct way of showing the ability to change is through colour. So how can this be achieved?
Flux Flow
Within the flow, we have the opportunity to manipulate each object that sits inside the one key. However, the process as shown below is quite a manual process.
What it’s essentially doing is selecting the key of objects. Breaking it apart into however many objects. Then obtaining each individual object and attaching a material to it. They are then reattached as a list to finalise the transformation.
Instead of going through the process of picking each individual object as shown above. We need an intuitive way that allows for us to select the object, then clicking a button to change its colour.
What is Raycasting?
So in order to do that, we’ll need to first look into raycasting within Three.js.
used for mouse picking (working out what objects in the 3D space the mouse is over) amongst other things.
With this particular technique, we will need to include the Raycaster.js script as provided by the Three.js Master Folder.
When we reference it into our HTML document, we can start building a connection between the user and the 3D space — provided the translation of the 2D window of the web page.
PROCESS — Let’s do an example
STEP 1— Build your boilerplate scene
https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js
<!DOCTYPE>
<html><head>
<title>Raycasting Tutorial</title>
</head><body>
<script src="js/three.min.js"></script> <script>
// This is where our Three.js scene will sit </script>
</body></html>
STEP 2— Determine your variables
To be continued…
Making it applicable
In order to change the object’s properties AND bring that change back to the original model, it must be documented somewhere, rather than just visually transmitted onto the object.
© Emily Y Leung and Project Redback, 2017. Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to Emily Y Leung and Project Redback with appropriate and specific direction to the original content.
Last modified on Monday 04 September 2017
