Time for action – picking

1. Open the file ch8_Picking.html using your HTML5 Internet browser. You will see a screen similar to this:

   

   Here you have a set of objects, each one of which has a unique diffuse color property. As in the previous exercises you can rotate the camera around the scene. Please notice that the cube has a texture and that the flat disk is translucent. As you may expect, the code in the draw function handles textures coordinates and also transparencies, so it looks a bit more complex than before (you can check it out in the source code). This is a more realistic draw function. In a real application, you will have to handle these variables.

2. Click on the sphere and drag it around the scene. Notice that the object becomes translucent. Also, note that the displacement occurs along the axis of the camera. To make this evident, please go to your web browser's console and type:

   camera.setElevation(0);

   You will see that the camera updates its position to an elevation of zero degrees...