Isomer.js Isometric graphics with Javascript.

November 30, 2016

Preface

Isomer.js seems like a very cool javascript library for adding some nice isometric graphics to your project, let’s try figuring it out…

Step 1: Include Isomer.js in a pen and display a cube

Step 2: Display a grid with Isomer.js to figure out units and placement

Step 3: Add irregular shaped prisms

Step 4: Add color

Step 5: Other Shapes

Step 6: Use Methods: Translate, Scale, Rotate

Step 7a: Animate Rotations

Step 7b: Animate Translations

Step 7c: Animate Scaling

Step 8: Make something pretty

Caveat Emptor ( buyer beware ) Isomer.js is not a full fledged Isometric or 3D tile engine, there are no shadows, lights or interactions of any kind, although it makes for a nice foundation if you decide to build on top of it. Look at three.js if you want more, although it is considerably larger in size and complexity.

Parting words

Isomer.js is a cool little library for making isometric graphics, the best thing about it ? the library itself is around 9K minimized, so it is super easy to include it on your projects and add some simple isometric elements, you can also use it as the basis for more complex isometric projects, this was just the tip of the iceberg : )

Best,

Keno.