Dessin 3D dans Canvas avec HTML + JS

Question

Existe-t-il un framework/moteur permettant de dessiner des images 3D sur Canvas?

Je prévois d'en tirer quelques primitives (formes différentes) situées dans un même plan:

var dist = 2; 
    var hexHalfW = 35; 
    var lengthX = 20; 
    var hexR = Math.sqrt(lengthX*lengthX+hexHalfW*hexHalfW);//40.31128874 
    var hexDiag = 2*hexR; 
    var hexHeight = hexDiag; 
    var hexWidth = 2*hexHalfW; 

    function DrawHex(ctx, x, y) 
    {    
     var cx = x*(hexWidth + dist) - y*(hexWidth + dist)/2; 
     var cy = y*(hexR + lengthX + dist); 
     ctx.beginPath(); 
     ctx.moveTo(cx, cy-hexR); 
     ctx.lineTo(cx+hexHalfW, cy-hexR+lengthX); 
     ctx.lineTo(cx+hexHalfW, cy+hexR-lengthX); 
     ctx.lineTo(cx, cy+hexR); 
     ctx.lineTo(cx-hexHalfW, cy+hexR-lengthX); 
     ctx.lineTo(cx-hexHalfW, cy-hexR+lengthX); 
     ctx.lineTo(cx, cy-hexR); 
     ctx.fill(); 
    } 

    function draw() 
    { 
     var canvas = document.getElementById('tutorial'); 
     if (canvas.getContext) 
     { 
      var ctx = canvas.getContext('2d'); 

      //Pick Hexagon color, this one will be blue 
      ctx.fillStyle = "rgb(0, 0, 255)"; DrawHex(ctx, 1, 1); 
      ctx.fillStyle = "rgb(0, 0, 225)"; DrawHex(ctx, 3, 1); 
      ctx.fillStyle = "rgb(0, 0, 195)"; DrawHex(ctx, 4, 1); 
      ctx.fillStyle = "rgb(0, 0, 165)"; DrawHex(ctx, 6, 1); 

      ctx.fillStyle = "rgb(0, 255, 0)"; DrawHex(ctx, 3, 2); 
      ctx.fillStyle = "rgb(0, 225, 0)"; DrawHex(ctx, 4, 2); 
      ctx.fillStyle = "rgb(0, 195, 0)"; DrawHex(ctx, 5, 2); 
     } 
    } 

je voudrais attirer ces primitives dans « perspective »: les formes plus proches (en bas de l'écran) sera être plus grand, les formes "éloignées" (en haut de l'écran) doivent être plus petites ...

Pour cela, les coordonnées des formes doivent être recalculées.

Devinez, je pourrais trouver quelques formules qui permettent de recalculer des coordonnées et écrire des fonctions correctes ... mais, probablement, il y a des moteurs qui font déjà cela?

Veuillez nous aviser.

Toutes les pensées sont les bienvenues!

Answer 1

Vous pouvez regarder les Three.js de mrdoob:

http://github.com/mrdoob/three.js/

Answer 2

Quel que soit le cadre que vous avez choisi, vous devez apprendre à encapsulent vos données en objets.

- View simple demo -

Hexagone

// Hexagon 
function Hexagon(ctx, color, pos, size, scale) { 
    this.color = color; 
    this.ctx = ctx; 
    this.x = pos[0]; 
    this.y = pos[1]; 
    this.z = pos[2] || 0; // scale 
    this.width = size.width; 
    this.height = size.height; 
} 

Hexagon.draw

// Hexagon.draw 
Hexagon.prototype.draw = function (x, y) { 
    if (x == null || y == null) { 
     x = this.x; 
     y = this.y; 
    } 
    var width = this.width + (this.width * this.z), // scaled width 
     height = this.height + (this.height * this.z), // scaled height 
     cx = x * (width + dist) - y * (width + dist)/2, 
     cy = y * (3/4 * height + dist), 
     ctx = this.ctx; 
    ctx.fillStyle = this.color; 
    ctx.beginPath(); 
    ctx.moveTo(cx, cy - height/2); 
    ctx.lineTo(cx + width/2, cy - height/4); 
    ctx.lineTo(cx + width/2, cy + height/4); 
    ctx.lineTo(cx, cy + height/2); 
    ctx.lineTo(cx - width/2, cy + height/4); 
    ctx.lineTo(cx - width/2, cy - height/4); 
    ctx.lineTo(cx, cy - height/2); 
    ctx.fill(); 
}; 

Utilisation

var canvas = document.getElementById('tutorial'); 
var ctx = canvas.getContext('2d'); 
var dist = 2; 

// Create Hexagons 
var size = { 
    width: 70, 
    height: 80 
}; 

var hexes = [ 
    new Hexagon(ctx, "rgb(0, 0, 255)", [1, 1], size), 
    new Hexagon(ctx, "rgb(0, 0, 225)", [3, 1], size), 
    new Hexagon(ctx, "rgb(0, 0, 195)", [4, 1], size), 
    new Hexagon(ctx, "rgb(0, 0, 165)", [6, 1], size), 
    new Hexagon(ctx, "rgb(0, 225, 0)", [3, 2], size), 
    new Hexagon(ctx, "rgb(0, 225, 0)", [4, 2], size), 
    new Hexagon(ctx, "rgb(0, 195, 0)", [5, 2], size) 
]; 

function draw() { 
    for (var i = hexes.length; i--;) { 
     hexes[i].draw(); 
    } 
}