Bản vẽ 3d trong Canvas có HTML + JS

Question

Có khung/công cụ nào cung cấp khả năng vẽ hình ảnh 3D trên Canvas không?

Tôi đang lên kế hoạch để rút ra một số nguyên thủy (hình dạng khác nhau) nằm trong một mặt phẳng:

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

Tôi muốn vẽ những nguyên thủy trong "quan điểm": hình dạng gần hơn (ở dưới cùng của màn hình) sẽ lớn hơn, hình dạng "ở xa" (ở phía trên cùng của màn hình) cần phải nhỏ hơn ...

Vì mục đích này cần phải tính lại các tọa độ hình dạng.

Đoán, tôi có thể tìm thấy một số công thức cho phép tính toán lại tọa độ và viết một chức năng thích hợp ... nhưng, có lẽ, có một số công cụ đã làm điều đó?

Vui lòng thông báo.

Bất kỳ ý tưởng nào đều được hoan nghênh!

Answer 1

Bạn có thể muốn nhìn vào three.js mrdoob của:

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

Answer 2

Dù khuôn khổ bạn chọn, bạn nên học cách Encapsulate dữ liệu của bạn thành các đối tượng.

- View simple demo -

lục giác

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

Cách sử dụng

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