利用HTML5繪制點線面組成的3D圖形的示例

2020-03-24 18:31:22

字體：大中小

來源：轉載

供稿：網友

玩Canvas玩了有兩三個禮拜了，平面的東西玩來玩去也就那樣，所以就開始折騰3D了。因為Canvas畫布終究還是平面的，所以要有3D就得抽象出一個Z軸。然后再把3D坐標轉換成2D坐標，畫到畫布上，再通過旋轉等變換效果來產生3D感。做3D一般就是由點到線，然后由線到面。【點】點的話，之前我有寫過關于3D的博文解析3D標簽云，其實很簡單，這篇博文雖然講的是用div實現的3D標簽云，但是追根到底產生的3D原理是一樣的，就是最簡單的由點構成的3D了。每一個標簽就是一個點。也可以直接看這個DEMO：
3D立方體做一個立方體，我用了三個對象：點對象，面對象，以及立方體本身一個對象：下面這個是點對象，x,y,z是點的三維坐標，_get2d方法是把三維坐標轉換到二維層面來。fallLength是焦距。
XML/HTML Code復制內容到剪貼板
varVector=function(x,y,z){ this.x=x; this.y=y; this.z=z; this._get2d=function(){ varscale=fallLength/(fallLength+this.z); varx=centerX+this.x*scale; vary=centerY+this.y*scale; return{x:x,y:y}; } }

然后是面對象：面對象的屬性頁很容易理解，一個面就是一個正方形， v1v2v3v4是面的四個頂點，zIndex這個屬性很重要，是代表這個面的層級，是在最外面還是在里面，這個必須要有，這樣當用canvas畫的時候才能讓這個面畫在最前面，才不會被其他的面遮蓋。zIndex的值也很容易理解，就是頂點z軸坐標的平均值，其實也就是中心點的z軸坐標。顏色就是這個面的顏色啦。XML/HTML Code復制內容到剪貼板
varFace=function(vector1,vector2,vector3,vector4,color){ this.v1=vector1; this.v2=vector2; this.v3=vector3; this.v4=vector4; this.color=color; this.zIndex=(this.v1.z+this.v2.z+this.v3.z+this.v4.z)/4; this.draw=function(){ ctx.save(); ctx.beginPath(); ctx.moveTo(this.v1._get2d().x,this.v1._get2d().y); ctx.lineTo(this.v2._get2d().x,this.v2._get2d().y); ctx.lineTo(this.v3._get2d().x,this.v3._get2d().y); ctx.lineTo(this.v4._get2d().x,this.v4._get2d().y); ctx.closePath(); //ctx.fillStyle= rgba( +parseInt(Math.random()*255)+ , +parseInt(Math.random()*255)+ , +parseInt(Math.random()*255)+ ,0.2) ctx.fillStyle=this.color; ctx.fill(); } }

最后是立方體本身對象：因為立方體最后要旋轉，所以，立方體對象里面不僅有面對象，還要有點對象，點旋轉后才會引起面的旋轉。length是立方體的邊長，_initVector是初始化立方體的各個頂點，_draw方法就是把所有點形成面，將面放入數組，然后對面進行排序（就是根據面里的zIndex排序），排序好后，調用每個面里的draw方法。立方體就出來了。
XML/HTML Code復制內容到剪貼板
varCube=function(length){ this.length=length; this.faces=[]; this.vectors=[]; } Cube.prototype={ _initVector:function(){ this.vectors[0]=newVector(-this.length/2,-this.length/2,this.length/2); this.vectors[1]=newVector(-this.length/2,this.length/2,this.length/2); this.vectors[2]=newVector(this.length/2,-this.length/2,this.length/2); this.vectors[3]=newVector(this.length/2,this.length/2,this.length/2); this.vectors[4]=newVector(this.length/2,-this.length/2,-this.length/2); this.vectors[5]=newVector(this.length/2,this.length/2,-this.length/2); this.vectors[6]=newVector(-this.length/2,-this.length/2,-this.length/2); this.vectors[7]=newVector(-this.length/2,this.length/2,-this.length/2); }, _draw:function(){ this.faces[0]=newFace(this.vectors[0],this.vectors[1],this.vectors[3],this.vectors[2], #6c6 this.faces[1]=newFace(this.vectors[2],this.vectors[3],this.vectors[5],this.vectors[4], #6cc this.faces[2]=newFace(this.vectors[4],this.vectors[5],this.vectors[7],this.vectors[6], #cc6 this.faces[3]=newFace(this.vectors[6],this.vectors[7],this.vectors[1],this.vectors[0], #c6c this.faces[4]=newFace(this.vectors[1],this.vectors[3],this.vectors[5],this.vectors[7], #666 this.faces[5]=newFace(this.vectors[0],this.vectors[2],this.vectors[4],this.vectors[6], #ccc this.faces.sort(function(a,b){ returnb.zIndex-a.zIndex; }); this.faces.foreach(function(){ this.draw(); }) } }

立方體做好了，接下來就可以讓它動起來了。根據鼠標位置改變立方體轉動的角度。rotateX和rotateY方法就是讓所有點繞X軸旋轉以及繞Y軸旋轉。這個的原理我在之前那個博文上好像有說過。。。。如果想了解更多，可以自己去百度一下計算機圖形學3D變換。繞X軸和繞Y軸是最簡單的旋轉矩陣了。當然，如果有興趣的還可以去搜一下繞任意軸旋轉矩陣。。。這個有點復雜，我本來想用它來做個魔方，不過遇到一些問題，暫時還沒解決。好吧，扯遠了。通過rotateX和rotateY兩個方法可以讓每個點獲得下一幀的位置，在動畫循環中重繪。這樣，轉動的立方體就做出來了。XML/HTML Code復制內容到剪貼板
if( addEventListener inwindow){ window.addEventListener( mousemove ,function(event){ varx=event.clientX-canvas.offsetLeft-centerX; vary=event.clientY-canvas.offsetTop-centerY; angleY=x*0.0001; angleX=y*0.0001; }); } else{ window.attachEvent( onmousemove ,function(event){ varx=event.clientX-canvas.offsetLeft-centerX; vary=event.clientY-canvas.offsetTop-centerY; angleY=x*0.0001; angleX=y*0.0001; }); } functionrotateX(vectors){ varcos=Math.cos(angleX); varsin=Math.sin(angleX); vectors.foreach(function(){ vary1=this.y*cos-this.z*sin; varz1=this.z*cos+this.y*sin; this.y=y1; this.z=z1; }); } functionrotateY(vectors){ varcos=Math.cos(angleY); varsin=Math.sin(angleY); vectors.foreach(function(){ varx1=this.x*cos-this.z*sin; varz1=this.z*cos+this.x*sin; this.x=x1; this.z=z1; }) } cube=newCube(80); cube._initVector(); functioninitAnimate(){ cube._draw(); animate(); } functionanimate(){ ctx.clearRect(0,0,canvas.width,canvas.height) rotateY(cube.vectors); rotateX(cube.vectors); cube._draw(); if( requestAnimationFrame inwindow){ requestAnimationFrame(animate); } elseif( webkitRequestAnimationFrame inwindow){ webkitRequestAnimationFrame(animate); } elseif( msRequestAnimationFrame inwindow){ msRequestAnimationFrame(animate); } elseif( mozRequestAnimationFrame inwindow){ mozRequestAnimationFrame(animate); } else{ setTimeout(animate,16); } }

全部代碼我就不貼了，DEMO里通過控制臺都可以看到。我也沒引用其他什么框架之類的，直接copy下來就能用了。能寫好轉動的一個立方體后，多個立方體轉動也可以做出來了。
戳DEMO：面：3D立方體2 3D立方體線（這個純碎覺得沒有面更酷而已）
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html中適合新手的小練習分享

下一篇：一些不太常用的XHTML標簽用法以及實例