Rotating a triangular plane in 3D space
Now that we can draw a 2D triangle in 3D space, let's try spinning it about the y-axis using the animation methods we added to the WebGL wrapper object.
How to do it...
Follow these steps to rotate a triangle about the y-axis with WebGL:
- Link to the
glMatrix
library and the WebGL wrapper:<script type="text/javascript" src="glMatrix-1.0.1.min.js"> </script> <script type="text/javascript" src="WebGL.js"> </script>
- Define the
initBuffers()
function which initializes the position buffers for our triangle:function initBuffers(gl){ var triangleBuffers = {}; triangleBuffers.positionBuffer = gl.createArrayBuffer([ 0, ...
Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.