這是利用Html5及CSS3等做的3D小房子，感興趣的可以看看。
登錄會員可以看見圖片及下載源代碼。
源文件：
部分源代碼：
<!DOCTYPE Html>
<Html>
<head>
<title>WireFrame</title>
<script scr="js/modernizr.JS"></script>
<script type="text/Javascript">
window.addEventListener("load",canvasApp,false);
function canvasApp(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//set up
var R=50;
var a=new Array(3);
var p=new Array();
var p2=new Array();
var ht=new Array(9);
var Color=new Array(9);
var RGB=new Array();
var vt=new Array();
var canh=new Array();
var center={x:500,y:400,z:0};
var dinh=new Array();
var tempvt={x:0,y:0,z:0};
p.push({x:0,y:0,z:0});
p.push({x:0,y:100,z:0});
p.push({x:0,y:100,z:100});
p.push({x:0,y:50,z:150});
p.push({x:0,y:0,z:100});
p.push({x:150,y:0,z:0});
p.push({x:150,y:100,z:0});
p.push({x:150,y:100,z:100});
p.push({x:150,y:50,z:150});
p.push({x:150,y:0,z:100});
//canh cua
p.push({x:50,y:0,z:0});
p.push({x:50,y:0,z:60});
p.push({x:75,y:0,z:60});
p.push({x:75,y:0,z:0});
p.push({x:100,y:0,z:60});
p.push({x:100,y:0,z:0});
//translate
for(var i=0;i<p.length;i++){
p
.x-=50;
p.y-=50;
p.z-=50;
}
p2.push({x:0,y:0,z:0});
p2.push({x:0,y:100,z:0});
p2.push({x:0,y:100,z:100});
p2.push({x:0,y:50,z:150});
p2.push({x:0,y:0,z:100});
p2.push({x:100,y:0,z:0});
p2.push({x:100,y:100,z:0});
p2.push({x:100,y:100,z:100});
p2.push({x:100,y:50,z:150});
p2.push({x:100,y:0,z:100});
p2.push({x:0,y:30,z:0});
p2.push({x:0,y:30,z:60});
p2.push({x:0,y:50,z:60});
p2.push({x:0,y:50,z:0});
p2.push({x:-10,y:17,z:0});
p2.push({x:-10,y:17,z:60});
var tempdinh=[0,1,2,3,4];
tempvt={x:-1,y:0,z:0};
dinh.push(tempdinh);
vt.push(tempvt);
RGB.push({r:0,g:255,b:0});
var tempdinh=[5,6,7,8,9];
tempvt={x:1,y:0,z:0};
dinh.push(tempdinh);
vt.push(tempvt);
RGB.push({r:0,g:255,b:0});
var tempdinh=[0,1,6,5];
tempvt={x:0,y:0,z:-1};
dinh.push(tempdinh);
vt.push(tempvt);
RGB.push({r:0,g:255,b:0});
var tempdinh=[1,2,7,6];
tempvt={x:0,y:1,z:0};
dinh.push(tempdinh);
vt.push(tempvt);
RGB.push({r:0,g:255,b:0});
var tempdinh=[2,3,8,7];
tempvt={x:0,y:1,z:1};
dinh.push(tempdinh);
vt.push(tempvt);
RGB.push({r:255,g:0,b:0});
var tempdinh=[3,4,9,8];
tempvt={x:0,y:-1,z:1};
dinh.push(tempdinh);
vt.push(tempvt);
RGB.push({r:255,g:0,b:0});
var tempdinh=[0,4,9,5];
tempvt={x:0,y:-1,z:0};
dinh.push(tempdinh);
vt.push(tempvt);
RGB.push({r:0,g:255,b:0});
var tempdinh=[10,11,12,13];
tempvt={x:0,y:-1,z:0};
dinh.push(tempdinh);
vt.push(tempvt);
RGB.push({r:255,g:255,b:138});
var tempdinh=[13,12,14,15];
tempvt={x:-0,y:-1,z:0};
dinh.push(tempdinh);
vt.push(tempvt);
RGB.push({r:255,g:255,b:138});
//transform
var teta=-30*Math.PI/180;
var phi=-165*Math.PI/180;
var R=100;
var E=400;
startFunction();
function startFunction(){
transform();
drawShape();
}
function drawShape(){
ctx.setTransform(1,0,0,1,0,0);
ctx.strokeStyle="#808080";
ctx.fillStyle="#C0C0C0";
ctx.fillRect(0,0,canvas.width,canvas.height);
Transform(center.x,center.y,center.z);
ctx.translate(500,400);
ctx.scale(1.5,1.5);
for(var i=0;i<dinh.length;i++){
if(ht==1){
ctx.beginPath();
ctx.fillStyle=Color;
ctx.moveTo(p2[dinh[0]].x,p2[dinh[0]].y);
//ctx.fillText(dinh[0],p2[dinh[0]].x,p2[dinh[0]].y);
for(var j=1;j<dinh.length;j++){
ctx.lineTo(p2[dinh[j]].x,p2[dinh[j]].y);
//ctx.fillText(dinh[j],p2[dinh[j]].x,p2[dinh[j]].y);
}
ctx.lineTo(p2[dinh[0]].x,p2[dinh[0]].y);
ctx.fill();
ctx.stroke();
ctx.closePath();
}
}
}
function transform(){
for(var i=0;i<p2.length;i++){
Transform(p.x,p.y,p.z);
p2.x=a[0];p2.y=a[1];p2.z=a[2];
}
//var x,y,z;
var dodai;
var cuongdo;
//var eye={x:0,y:0,z:1};
for(var i=0;i<dinh.length;i++){
Transform(vt.x,vt.y,vt.z);
if(a[2]>0) ht=1; else ht=0;
//color
dodai=Math.sqrt(a[0]*a[0]+a[1]*a[1]+a[2]*a[2]);
cuongdo=-0.5+1.5*(1+a[2]/dodai)/2;
Color=setColor(RGB.r,RGB.g,RGB.b,cuongdo);
}
}
var x1,y1,x2,y2;var canDrag;
//event listener
canvas.addEventListener("mousedown",mouseDown,false);
canvas.addEventListener("mousemove",mouseMove,false);
canvas.addEventListener("mouseup",mouseUp,false);
function mouseDown(e){
canDrag=true;
x1=e.clIEntX-canvas.offsetLeft;
y1=e.clIEntY-canvas.offsetTop;
}
function mouseMove(e){
if(canDrag){
x2=e.clIEntX-canvas.offsetLeft;
y2=e.clIEntY-canvas.offsetTop;
if(y2>y1) phi+=Math.PI/180*(y2-y1); else phi-=Math.PI/180*(y1-y2);
if(x2>x1) teta-=Math.PI/180*(x2-x1); else teta+=Math.PI/180*(x1-x2);
startFunction();
x1=x2;y1=y2;
}
}
function mouseUp(){
canDrag=false;
}
function Transform(m,n,p1){
a[0]=-m*Math.sin(teta)+n*Math.cos(teta);
a[1]=-m*Math.cos(teta)*Math.sin(phi)-n*Math.sin(teta)*Math.sin(phi)+p1*Math.cos(phi);
a[2]=-m*Math.cos(teta)*Math.cos(phi)-n*Math.sin(teta)*Math.cos(phi)-p1*Math.sin(phi);
}
function setColor(r,g,b,alph){
var color=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
r1=color[Math.floor(r*alph/16)]+color[Math.floor(r%16*alph)];
g1=color[Math.floor(g/16*alph)]+color[Math.floor(g%16*alph)];
b1=color[Math.floor(b/16*alph)]+color[Math.floor(b%16*alph)];
return "#"+r1+g1+b1;
}
}
</script>
</head>
<body>
<canvas id="canvas" width="1000" height="800">
Your browser does not support Html5 canvas
</canvas>
</body>
</Html>