[英]3D from 2D canvas content
I have a 2D occupancy map like this (left side) 我有一个2D入住地图像这样 (左侧)
So far it is content drawn pixel by pixel in a canvas of the robot's web interface. 到目前为止,内容是在机器人Web界面的画布中逐像素绘制的。
What I would like to achive is a pan/tilt/rotatable pseudo 3D view of it. 我想实现的是它的平移/倾斜/可旋转伪3D视图。 Where each occupied block gets a rect.
每个占用的块都会得到一个矩形。 So something like this .
因此,像这样 。
I don't even know where to start. 我什至不知道从哪里开始。 Is this doable in pure html5?
这在纯HTML5中可行吗? … Any guidance would help.
……任何指导都会有所帮助。
Some facts on my setup: 我的设置中的一些事实:
Thanks Robert 谢谢罗伯特
Is this doable in pure html5?
这在纯HTML5中可行吗?
Sure since 3d is just a 2d projection. 可以肯定,因为3d只是2d投影。 Check WebGL and http://threejs.org/ if you need a javascript library.
如果需要JavaScript库,请检查WebGL和http://threejs.org/ 。
You can "fake" an extrusion in 2d canvas by drawing repeated-offset version of your floorplan. 您可以通过绘制平面图的重复偏移版本来“伪造”二维画布中的拉伸。
You can lighten the corners a bit for effect. 您可以稍微减轻角落的影响。
Demo: http://jsfiddle.net/m1erickson/7wxGS/ 演示: http : //jsfiddle.net/m1erickson/7wxGS/
Example code: 示例代码:
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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.