SimpleMesh
SimpleMesh is a pseudo 3D context for the HTML5 canvas element. It allows you to load models from simple arrays or more complex objects. Models have 3 main componants: vertices, edges, and faces. Each of these can be styled. You can also scale, translate, and rotate the model in 3D.
Some special interactive flags are provided to easily control the visibility of vertices, edges, and faces. A simple fog effect is available for black & white models that gives a sense of depth perception.
Requirements
Host the file (located in /dist
) and include the SimpleMesh JS in the head of your HTML document.
Examples
Setup your animation
Define some global namespaces for your animation.
var canvas; // The canvas elementvar WIDTH;var HEIGHT;var ctx; // The canvas contextvar model; // You model
Attach a small procedure to the window.onload event. This will run a setup function once and a loop 60 times per second.
window { ; window;}
Do a few things in your setup() function that only need to be done once. Set the canvas, context, some useful constants, and translate the coordinate system to the center.
{ canvas = document; WIDTH = canvaswidth; HEIGHT = canvasheight; ctx = canvas; ctx; // Instantiate a SimpleMesh object here}
Use the requestAnimation frame object for a more sophisticated approach that allows the browser to select the framerate.
Instantiate a SimpleMesh object
Just call the constructor and pass a object with a canvas context.
model = ctx;
Load a model
Try using the loadArrays() method to create a simple model. Here's a pyramid from our basic example.
model;
Draw a frame
This procedure draws a frame and gets repeated by the setInterval() you declared earlier.
{ ctx; modelthetaz++; modelthetax++; model;}
Wipe the canvas, rotate the model, and draw it.
All this can be seen in the the "basic" example included in the repository. Two other more advanced examples are included as well.