एचडीएमएल + जेएस

Question

के साथ कैनवास में 3 डी ड्राइंग क्या कोई फ्रेमवर्क/इंजन है जो कैनवास पर 3 डी छवियों को आकर्षित करने की क्षमता प्रदान करता है?

मैं कुछ पुरातन (विभिन्न आकार) एक विमान में स्थित आकर्षित करने के लिए योजना बना रहा हूँ:

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

जो भी ढांचा आप चुनते हैं तो इस Encapsulate वस्तुओं में अपने डेटा के लिए सीखना चाहिए।

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