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