來自2D畫布內容的3D

Question

我有一個2D入住地圖像這樣 （左側）

到目前為止，內容是在機器人Web界面的畫布中逐像素繪制的。

我想實現的是它的平移/傾斜/可旋轉偽3D視圖。 每個占用的塊都會得到一個矩形。 因此，像這樣 。

我什至不知道從哪里開始。 這在純HTML5中可行嗎？ ……任何指導都會有所幫助。

我的設置中的一些事實：

• 機器人的網絡服務器是樹莓派上的燒瓶（python）服務器
• 客戶端瀏覽器是Chrome（在Windows上）或iPad上的Safari
• 計算應在客戶端進行

謝謝羅伯特

Answer 1

這在純HTML5中可行嗎？

可以肯定，因為3d只是2d投影。 如果需要JavaScript庫，請檢查WebGL和http://threejs.org/ 。

Answer 2

您可以通過繪制平面圖的重復偏移版本來“偽造”二維畫布中的拉伸。

您可以稍微減輕角落的影響。

演示： http : //jsfiddle.net/m1erickson/7wxGS/

示例代碼：

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.strokeStyle="gray";
    draw();
    ctx.strokeStyle="black"
    for(var i=.5;i<10;i+=.5){
        ctx.save();
        ctx.translate(-i,-i);
        draw();
        ctx.restore();
    }


    function draw(){
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.lineTo(125,100);
        ctx.lineTo(125,125);
        ctx.lineTo(145,125);
        ctx.lineTo(145,145);
        ctx.lineTo(125,145);
        ctx.lineTo(125,175);
        ctx.lineTo(100,175);
        ctx.closePath();
        ctx.stroke();
        // exterior corners
        corner(100,100);
        corner(145,145);
        corner(125,175);
    }

    function corner(x,y){
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle="#ddd";
        ctx.fillRect(x,y,1,1);
        ctx.restore();
    }