The snippet below plots, rotates, pans and zooms a 3D cube; it uses HR tags in combination with Microsoft Transformation matrix and Ok with IE. If use VML or the like the function jlin() can be removed and transformed xyz in dwg() can be used directly.
The program can be extended to read data from text file and plot the wireframes.
jayakodiu@yahoo.com
Code:
<html><body onmousemove=mov() onkeyup=kup()>
<div>Drag to rotate; pan with arrow keys and zoom with + - keys.</div></body>
<script>
var vert=Array(7)
vert[0]=Array(400,400,0);vert[1]=Array(500,400,0);vert[2]=Array(500,500,0);vert[3]=Array(400,500,0)
vert[4]=Array(400,400,100);vert[5]=Array(500,400,100);vert[6]=Array(500,500,100);vert[7]=Array(400,500,100)
var nv=7,nm=11,ox=300,oy=300,pp=Math.PI,ha=pp/5,va=pp/5,zmf=2
var tx=new Array(nv),ty=new Array(nv),txt=new Array(nv),lin=new Array(nm),j1=new Array(nm),j2=new Array(nm)
var sx=new Array(nv),sy=new Array(nv),sz=new Array(nv)
var ax=Array(30,0,0),ay=Array(0,30,0),az=Array(0,0,30)
var axn=new Array(),xyz=new Array()
j1[0]=0;j2[0]=1;j1[1]=1;j2[1]=2;j1[2]=2;j2[2]=3;j1[3]=3;j2[3]=0
j1[4]=4;j2[4]=5;j1[5]=5;j2[5]=6;j1[6]=6;j2[6]=7;j1[7]=7;j2[7]=4
j1[8]=0;j2[8]=4;j1[9]=1;j2[9]=5;j1[10]=2;j2[10]=6;j1[11]=3;j2[11]=7
lx=400;rx=500;yn=400;ym=500;zm=100;zn=0;ww=rx-lx;hy=ym-yn;hz=zm-zn;wd=(lx+rx)/2;hy=(yn+ym)/2;hz=(zm+zn)/2
for(i=0;i<nv+1;i++){sx[i]=vert[i][0]-wd;sy[i]=vert[i][1]-hy;sz[i]=vert[i][2]-hz
var ele=document.body.appendChild(document.createElement("span"))
ele.style.color="#ff0000";ele.style.position="absolute";ele.style.font="12 arial";ele.innerText=1+i;txt[i]=ele}
for(i=0;i<nm+1;i++){var eln=document.body.appendChild(document.createElement("hr"));with (eln.style)
{color="blue";height=1;position="absolute";filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"}
lin[i]=eln}
for(i=0;i<3;i++){var ele=document.body.appendChild(document.createElement("span"))
ele.style.position="absolute";ele.style.color="#ff00ff";ele.style.font="12 arial";ele.innerText=String.fromCharCode(88+i);xyz[i]=ele
var eln=document.body.appendChild(document.createElement("hr"));with (eln.style)
{color="#ff00ff";height=1;position="absolute";filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"}
axn[i]=eln}
dwg()
function jln(eln,x1,y1,x2,y2){x1=ox+x1;y1=oy-y1;x2=ox+x2;y2=oy-y2
dx=x2-x1;dy=y2-y1;eln.style.width=Math.sqrt(dx*dx+dy*dy)
var ag=Math.atan2(dy,dx);if(ag<0){ag=2*pp+ag}
sn=Math.sin(ag);cs=Math.cos(ag);eln.filters.item(0).M11=cs
eln.filters.item(0).M12=-sn;eln.filters.item(0).M21=sn
eln.filters.item(0).M22=cs;if(x2<x1){x1=x2};if(y2<y1){y1=y2}
eln.style.left=x1;eln.style.top=y1}
function dwg(){snh=Math.sin(ha);csh=Math.cos(ha);csv=Math.cos(va);snv=Math.sin(va)
for(i=0;i<nv+1;i++){x=-sx[i]*snh+sy[i]*csh;y=-sx[i]*csh*csv-sy[i]*snh*csv+sz[i]*snv
z=-sx[i]*csh*snv-sy[i]*snh*snv-sz[i]*csv;xx=x;tx[i]=zmf*(x*csv-y*snv);ty[i]=zmf*(xx*snv+y*csv)
var ele=txt[i];ele.style.left=ox+tx[i];ele.style.top=oy-ty[i]}
for(i=0;i<nm+1;i++){jln(lin[i],tx[j1[i]],ty[j1[i]],tx[j2[i]],ty[j2[i]])}
for(i=0;i<3;i++){x=-ax[i]*snh+ay[i]*csh;y=-ax[i]*csh*csv-ay[i]*snh*csv+az[i]*snv
z=-ax[i]*csh*snv-ay[i]*snh*snv-az[i]*csv;xx=x;tx[i]=x*csv-y*snv;ty[i]=xx*snv+y*csv
var ele=xyz[i];ele.style.left=ox+tx[i];ele.style.top=oy-ty[i];jln(axn[i],0,0,tx[i],ty[i])}}
function kup(){kk=event.keyCode
switch (kk){case 107:zmf=zmf*1.2;break
case 109:zmf=zmf/1.2;break
case 37:ox=ox-20;break
case 39:ox=ox+20;break
case 38:oy=oy-20;break
case 40:oy=oy+20;break
default:return}
dwg()}
function mov(){if(event.button !=1){return}
ha=0.02*event.x;va=0.02*event.y;dwg()}
</script>
</html>