Cubes is an isometric graphics management library. It uses Isomer, but it's meant to offer higher level scene management.
- Frontend JS
- Full source
- Minified distribution with sourcemap
- Pull requests for other package managers are welcomed
- 0.0 - Finished
- Experimental status
- 0.1 - Finished
- Scene management
- Depth sorting
- Occlusion culling
- 0.2 - Finished
- Click detection
- Scene editing API
- 0.3 - Future
- 3-axis slicing
- 4-angle rotation
- Isometric color picker partial
- Basic editor partial
- Transparent cubes
- Backend rendering
- Large scene support
An example configuration, taken from the defaults:
var canvas = document;var cubes = canvas// This defines how much area is given to cube rendering and editingx: 32y: 32z: 32// Slow mode provides a visual example of how models are rendered. The value provided indicates milliseconds between each successive render.slow: 10// This determines how large the cubes and grid area are.scale: 100// This determines the center from which all graphics are drawn. This should be set to a sensible value, but if it isn't, it can be overridden. It is measured in pixels.originX: null// Also available is originY. It should also be set to a sensible default, but in case it isn't...originY: null// Toggles click detection for this instance of Cubes.clickDetection: false// Determines how different the sides of each cube of the same color are in lightness.colorDifference: 010// This is the position of the light source for lighting the scene. It's a directional light, so a larger number indicates the light is further away, but it is not a point light.lightX: 3 lightY: -5 lightZ: 1// Do you want a base plan upon which to build upon? No? Set it to false, then.planeXY: true;
This will return a special scene ID that's used internally by Cubes to keep track of cubes in a quickly accessible format. This will change if a different size cube area is specified. Please use x, y, & z format for storing and retrieving cube information.
A simple insert method in addition to color data.
Click detection must be enabled, using the
clickDetection configuration property, as shown above.
Some additional useful utility methods are available.
Be sure to see what's being done in the
cubes-tests.js file. Tests can be run with Meteor installed and running the
meteor test-packages ./ command.