How to implement a 3D Mesh?

[derhuerst]

I want to implement something like http://tfpsoft.com/about/gallery/mountainswireframe.html.

What is the best practice implementing this? Is it one Shape with just many Paths?

[jbovenschen]

It could be done with multiple paths, but i think we need a plane shape like threejs and other 3d modeling libraries.

[jdan]

You'll have to do it manually :) Here's a proof of concept:

var Point  = Isomer.Point;
var Path   = Isomer.Path;
var Color  = Isomer.Color;

var iso = new Isomer(document.getElementById("canvas"));

var height = 14;
var width = 14;

var x, y;
var grid = []

for (x = 0; x < width; x++) {
    grid[x] = []
    for (y = 0; y < height; y++) {
        grid[x][y] = Math.random() * 1.2
    }
}

for (x = 0; x < width - 1; x++) {
    for (y = 0; y < height - 1; y++) {
        iso.add(new Path(
            Point(x, y, grid[x][y]),
            Point(x+1, y, grid[x+1][y]),
            Point(x, y+1, grid[x][y+1])
        ));

        iso.add(new Path(
            Point(x, y+1, grid[x][y+1]),
            Point(x+1, y, grid[x+1][y]),
            Point(x+1, y+1, grid[x+1][y+1])
        ));
    }
}

Which will draw something like the following:

The task here is to then modify grid to be something much cooler! Also, you'll notice I'm using 45/45/90 triangles, but you can experiment with other faces as well.

Hope this helps, be sure to bug me if you run into anything funny.