在HTML + JS畫布中繪製三維圖形

Question

是否有任何框架/引擎能夠在Canvas上繪製三維圖像？

我打算畫位於一個平面一些基元（不同形狀的）：

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); 
     } 
    } 

我想提請在「透視」這些原語：接近的形狀（在屏幕的底部）將更大，形狀「很遠」（在屏幕的頂部）需要更小...

爲此，需要重新計算形狀座標。

猜測，我可以找到一些公式，允許重新計算座標和編寫適當的功能......但是，可能有一些引擎已經這樣做了？

請指教。

歡迎任何想法！

Answer 1

你可能想看看mrdoob的three.js所：

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

Answer 2

無論框架你選擇，你應該學會封裝數據爲對象。

- View simple demo -

六角

// 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(); 
}; 

使用

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(); 
    } 
}