WebGL Hotshot

Using the mouse for interactivity

We are almost ready to build e-commerce websites. However, if we are going to buy products, we need to click on them. This is a bit more complex than the traditional 2D website where each product can use HTML and JavaScript to indicate whether or not it has been clicked. In 3D space, a mouse click, which is a 2D device, produces an x and y value. That x and y value must be converted into 3D space, which generates a ray from the camera (our point of view) to the (x, y, z) location. We then determine whether or not the ray passes through any 3D meshes along the way. However, unlike with 2D web pages where only one item—either text or an image—occupies the same space, in 3D, that ray could intersect multiple objects. ...