利用HTML5繪製點線面組成的3D圖形的範例_html5教學技巧-H5教程-PHP中文網

首頁

web前端

H5教程

利用HTML5繪製點線面組成的3D圖形的範例_html5教學技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:46 PM

html5

玩Canvas玩了兩三個禮拜了，平面的東西玩來玩去也就那樣，所以就開始折騰3D了。

　　因為Canvas畫布終究還是平面的，所以要有3D就得抽像出一個Z軸。然後再把3D座標轉換成2D座標，畫到畫布上，再透過旋轉等變換效果來產生3D感。做3D一般就是由點到線，然後由線到面。

　　【點】

　　點的話，之前我有寫過關於3D的博文

解析3D標籤雲，其實很簡單，這篇博文雖然講的是用div實現的3D標籤雲，但是追根到底產生的3D原理是一樣的，就是最簡單的由點構成的3D了。每一個標籤就是一個點。也可以直接看這個DEMO：
2015512164236104.png (344×329)

3DBall
裡面的總共有五百個點對象，每個點對象相應的根據他們的Z軸來改變他們的大小和透明度，再平均分佈在球面上，就構成了點球體了。

　　【線】

　　如果知道怎麼做點之後，線也就容易了，只要把點連起來就行了。這個沒做DEMO，不過確實不難。就循環moveTo，然後lineTo，線就出來了。

　　【面】

　　這篇部落格文章主要講面滴。

二話不說，先上DEMO吧：

2015512164305697.png (170×168)

3D立方體

做一個立方體，我用了三個對象：點對象，面對象，以及立方體本身一個對象：

　　下面這個是點對象，x,y,z是點的三維座標，_get2d方法是把三維座標轉換到二維層面來。 fallLength是焦距。

XML/HTML Code複製內容到剪貼簿

var Vector = function(x,y,,a)> >
this.x = x; = x;
this.y
= y;
this.z = z; = z;
this._get2d = var scale
var x 🎜> var
y 🎜> return {x:x , y:y}; }
}
　　然後是面對象：

　　面物件的屬性頁很容易理解，一個面就是一個正方形， v1v2v3v4是面的四個頂點，zIndex這個屬性很重要，是代表這個面的層級，是在最外面還是在裡面，這個必須要有，這樣當用canvas畫的時候才能讓這個面畫在最前面，才不會被其他的面遮蓋。 zIndex的值也很容易理解，就是頂點z軸座標的平均值，其實也就是中心點的z軸座標。顏色就是這面的顏色啦。
XML/HTML Code複製內容到剪貼簿
1. var 臉 = 函數(向量1,2,向量2,向量顏色){
2. this.v1 = this.v2
立方體完成了，接下來就可以動起來了。那個博文上好像已經講過了。還可以去搜一下繞什麼軸旋轉矩陣。個方法可以讓每個點獲得下一幀的位置，在動畫循環中重繪。
XML/HTML 程式碼將內容複製到剪貼簿
if("addEventListener" 在窗口中){

            window.addEventListener("mousemove" , 函數(事件){

                var x  centerX;                    var
y
  centerY;                    角度Y = 角Y

= *角度Y = 。 🎜>                 angleX 🎜>

            });            }            其他 {

            window.attachEvent("onmousemove" , 函數(事件){

                var x

  centerX;

                var y

  centerY;                    角度Y =

angleX 🎜>             });            }





        函數rotateX（向量）{

            var cos = 數學 = 數學

            var sin = 數學 = 數學數學

            vectors.foreach(function(){

                var y1 = c 罪孽；                    var z1

=  罪惡；                    this.y =

this.z             });            }

           函數旋轉Y（向量）{                var cos

= 數學
=
數學
            var
sin
=
數學 =

數學            vectors.foreach(function(){                    var x1 = c 罪孽；

                var z1 = c sin;

this.x

                this.z             })            }







        立方體 = 新
        cube._initVector();

        函數 initAnimate(){

            cube._draw();



            動畫（）；

        }



        函數 animate(){

            ctx.clearRect(0,0,canvas.width,canvas.height)



            rotateY(cube.vectors);

            rotateX(cube.vectors);

            cube._draw();

            if(「requestAnimationFrame」在視窗中){

                requestAnimationFrame(animate);

            }

            else if("webkitRequestAnimationFrame" in 視窗){

                webkitRequestAnimationFrame(animate);

            }

            else if("msRequestAnimationFrame" in 窗口){

                msRequestAnimationFrame(animate);

            }

            else if("mozRequestAnimationFrame" in 視窗){

                mozRequestAnimationFrame(animate);

            }

            其他 {

                setTimeout(animate, 16);

            }

        }

全部程式碼我就不貼了，DEMO裡透過控制台都可以看到。我也沒引用其他什麼框架之類的，直接copy下來就能用了。

　　能寫好轉動的一個立方體後，多個立方體轉動也可以做出來了。

戳DEMO：面：3D立方體2    3D立方體線（這個純碎覺得沒有面比較酷而已）