Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    3D wireframes - plot, rotate, pan and zoom

    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>
    Last edited by VIPStephan; 02-01-2013 at 05:45 PM. Reason: fixed code BB tags


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •