Contoh penggunaan HTML5 untuk melukis grafik 3D yang terdiri daripada mata, garisan dan surfaces_html5 kemahiran tutorial

Saya telah bermain dengan Kanvas selama dua atau tiga minggu, dan bermain dengan objek rata adalah sama, jadi saya mula bermain-main dengan 3D.

Kerana kanvas Kanvas masih rata, jadi jika anda ingin mempunyai 3D, anda mesti mengabstrakkan paksi Z. Kemudian tukar koordinat 3D kepada koordinat 2D, lukiskannya pada kanvas, dan kemudian gunakan putaran dan kesan transformasi lain untuk mencipta perasaan 3D. Melakukan 3D secara amnya melibatkan pergi dari titik ke garis, dan kemudian dari garis ke permukaan.

【Titik】

Jika anda klik padanya, saya telah menulis catatan blog tentang 3D sebelum ini Menghuraikan awan tag 3D sebenarnya sangat mudah Walaupun catatan blog ini bercakap tentang awan tag 3D yang dilaksanakan menggunakan div, tetapi punca utama ialah Prinsip 3D adalah sama, ia adalah 3D termudah yang terdiri daripada mata. Setiap label adalah titik. Anda juga boleh menonton DEMO ini secara terus:

3DBall
Terdapat sejumlah lima ratus objek titik di dalamnya. Setiap objek titik menukar saiz dan ketelusannya mengikut paksi Z mereka, dan kemudian mengagihkannya secara sama rata pada sfera sfera titik.

【Barisan】

Setelah anda tahu cara membuat titik, garisan akan menjadi mudah, hanya sambungkan titik. Saya tidak melakukan DEMO mengenai perkara ini, tetapi ia sebenarnya tidak sukar. Hanya gelung moveTo, kemudian lineTo, dan baris akan keluar.

【Mi】

Catatan blog ini terutamanya bercakap tentang wajah.
Tanpa berlengah lagi, mari buat DEMO dahulu:

Kiub 3D

Untuk membuat kubus, saya menggunakan tiga objek: objek titik, objek luas dan kubus itu sendiri:

Berikut ialah objek titik x, y, z ialah koordinat tiga dimensi bagi titik tersebut. fallLength ialah panjang fokus.

Kod XML/HTMLSalin kandungan ke papan keratan

1. var Vektor = fungsi(x,y,z){
2. ini.x = x;
3. ini.y = y
4. ini.z = z;
ini._get2d
5. = fungsi(){ var
skala
6. = fallLength/(fallLength this.z); var x
=
7. centerX ini.x*skala var y
=
8. centerY ini.y*skala kembali {x:x, y:y};
                                                                
9.                                                                                 

10. 
    Kemudian khalayak sasaran:

    Halaman sifat objek muka mudah difahami Muka adalah segi empat sama, v1v2v3v4 ialah empat bucu muka Atribut zIndex adalah sangat penting luar atau dalam. Ini mestilah Ya, supaya apabila melukis dengan kanvas, permukaan ini boleh dilukis di bahagian hadapan dan tidak akan ditutupi oleh permukaan lain. Nilai zIndex juga mudah difahami Ia ialah koordinat paksi-z purata bagi puncak, yang sebenarnya ialah koordinat paksi-z bagi titik tengah. Warna adalah warna permukaan ini.

    Kod XML/HTMLSalin kandungan ke papan keratan

    1. var Muka = fungsi(vector1,vector2,vector3,vector4,color){   
    2.              ini.v1 = vektor1;   
    3.              ini.v2 = vektor2;   
    4.              ini.v3 = vektor3;   
    5.              ini.v4 = vektor4;   
    6.             warna ini = warna;   
    7.             ini.zIndex = (ini.v1.z   ini.v2.z   ini.v3.z   ini.v4.z)/4;   
    8.              ini.draw = fungsi(){   
    9.                 ctx.save();   
    10.                 ctx.beginPath();   
    11.                 ctx.moveTo(this.v1._get2d().x , this.v1._get2d().y);   
    12.                 ctx.lineTo(this.v2._get2d().x , this.v2._get2d().y);   
    13.                 ctx.lineTo(this.v3._get2d().x , this.v3._get2d().y);   
    14.                 ctx.lineTo(this.v4._get2d().x , this.v4._get2d().y);   
    15.                 ctx.closePath();   
    16.                 // ctx.fillStyle = "rgba(" parseInt()*th2.5. "," parseInt(Math.random()*255) "," parseInt(Math.random()*255) ",0.2)";   
    17.                 ctx.fillStyle = ini.warna;   
    18.                 ctx.fill();   
    19.             }   
    20.         }  

    
    　　最后是立方体本身对象：

    　　因为立方体最后要旋转，所以，立方体对象里面不仅有面对象，还物莬家才会引起面的旋转。length是立方体的边长，_initVector是初始化立方体的各个顶点，_draw方法就是把所有点形成面，将面放入数组，然后对面进行排序（就是根据面就是根据钎就是根据钎就面面后，调用每个面里的draw方法。立方体就出来了。
    

    Kod XML/HTML复制内容到剪贴板

    1. var Kiub = fungsi(panjang){   
    2.             ini.panjang = panjang;   
    3.             ini.muka = [];   
    4.             ini.vektor = [];   
    5.         }   
    6.         Kiub.prototaip = {   
    7.             _initVector:function(){   
    8.                 this.vectors[0] = new Vector(-this.length/2 , -this.length/2 , this.length/2);   
    9.                 vektor ini[1] = Vektor baharu(-ini.panjang/2 , ini.panjang/2 , ini.panjang/2);    
    10.                 ni.vektor[2] = vektor baharu(ini.panjang/2 , -ini.panjang/2 , ini.panjang/2);    
    11.                 vektor ini[3] = Vektor baharu(ini.panjang/2 , ini.panjang/2 , ini.panjang/2);    
    12.                 ni.vektor[4] = vektor baharu(ini.panjang/2 , -ini.panjang/2 , -ini.panjang/2);   
    13.                 ni.vektor[5] = vektor baharu(ini.panjang/2 , ini.panjang/2 , -ini.panjang/2);   
    14.                 vektor ini[6] = Vektor baharu(-ini.panjang/2 , -ini.panjang/2 , -ini.panjang/2);   
    15.                 vektor ini[7] = Vektor baharu(-ini.panjang/2 , ini.panjang/2 , -ini.panjang/2);   
    16.             },   
    17.             _draw:function(){   
    18.                 this.faces[0] = new Face(this.vectors[0] , this.vectors[1] , this.vectors[3] , this.vectors[2] "); "#6c6   
    19.                 this.faces[1] = new Face(this.vectors[2] , this.vectors[3] , this.vectors[5] , this.vectors[4] , "#6cc");   
    20.                 this.faces[2] = new Face(this.vectors[4] , this.vectors[5] , this.vectors[7] , this.vectors[6] , "#cc6"   
    21.                 this.faces[3] = new Face(this.vectors[6] , this.vectors[7] , this.vectors[1] , this.vectors[0] "); "#c6c   
    22.                 this.faces[4] = new Face(this.vectors[1] , this.vectors[3] , this.vectors[5] , this.vectors[7] "); "#666   
    23.                 this.faces[5] = new Face(this.vectors[0] , this.vectors[2] , this.vectors[4] , this.vectors[6] , "#ccc");   
    24.   
    25.                 this.faces.sort(function(a , b){   
    26.                     kembali b.zIndex - a.zIndex;   
    27.                 });   
    28.                 this.faces.foreach(function(){   
    29.                     this.draw();   
    30.                 })   
    31.             }   
    32.         }  

    
    　　立方体做好了，接下来就可以让它动起来了。根据鼠标位置改来就可以让它动起来了。根据鼠标位置改来就可以让它动起来了。根据鼠标位置改召位置改让它动起来了。 X和rotateY方法就是让所有点绕X轴旋转以及绕Y轴旋转。这个的原理我在之前那个博文上好像有说过。。。。如果想了解更多，可以自己去瀾中度过了变换。绕X轴和绕Y轴是最简单的旋转矩阵了。当然，如果有兴趣的还可以去搜一下绕任意轴旋转矩阵。。。这个有点复杂, 我本来想用它来做个魔方, 不过遇到一些问题, 暂时还没解决。好吧, 扯远了。通过 Rotatex和rotateY两个方法可以让每个点获得下一帧的位置，在动画循环中重绘。这样得下一帧的位置，在动画循环中重绘。这样，佬小的罬小了。

    Kod XML/HTML复制内容到剪贴板

    1. if("addEventListener" dalam tetingkap){   
    2.              window.addEventListener("mousemove" , function(event){   
    3.                 var x = acara.clientX - kanvas.offset Kiri; -    
    4.                 var y = acara.clientY - canvas.offsetTopY; -    
    5.                 sudutY = x*0.0001;   
    6.                 angleX = y*0.0001;   
    7.             });   
    8.         }   
    9.         lain {   
    10.             window.attachEvent("onmousemove" , function(event){   
    11.                 var x = acara.clientX - kanvas.offset Kiri; -    
    12.                 var y = acara.clientY - canvas.offsetTopY; -    
    13.                 sudutY = x*0.0001;   
    14.                 angleX = y*0.0001;   
    15.             });   
    16.         }  
    17.            
    18.   
    19.         fungsi rotateX(vektor){   
    20.              var kos = Matematik.cos(angleX);   
    21.              var dosa = Math.sin(angleX);   
    22.             vectors.foreach(function(){   
    23.                 var y1 = ini.y * cos - ini;.z * dosa   
    24.                 var z1 = ini.z * cos   ini;.y * dosa   
    25.                 ini.y = y1;   
    26.                 ini.z = z1;   
    27.             });   
    28.         }   
    29.   
    30.         fungsi putarY(vektor){   
    31.              var cos = Math.cos(angleY);   
    32.              var dosa = Matematik.sin(angleY);   
    33.             vectors.foreach(function(){   
    34.                 var x1 = ini.x * cos - ini;.z * dosa   
    35.                 var z1 = ini.z * cos   ini;.x * dosa   
    36.                 ini.x = x1;   
    37.                 ini.z = z1;   
    38.             })   
    39.         }  
    40.   
    41.            
    42.   
    43.         kiub = baharu Kiub(80);   
    44.         kubus._initVector();   
    45.         fungsi initAnimate(){   
    46.             kubus._draw();   
    47.   
    48.             bernyawa();   
    49.         }   
    50.   
    51.         fungsi menghidupkan(){   
    52.              ctx.clearRect(0,0,canvas.width,canvas.height)   
    53.                
    54.             putarY(kubus.vektor);   
    55.             rotateX(cube.vectors);   
    56.             kubus._draw();   
    57.             jika("requestAnimationFrame" dalam tetingkap){   
    58.                 permintaanAnimationFrame(animate);   
    59.             }   
    60.             lain jika("webkitRequestAnimationFrame" dalam tetingkap){   
    61.                 webkitRequestAnimationFrame(animate);   
    62.             }   
    63.             lain jika("msRequestAnimationFrame" dalam tetingkap){   
    64.                 msRequestAnimationFrame(animate);   
    65.             }   
    66.             lain jika("mozRequestAnimationFrame" dalam tetingkap){   
    67.                 mozRequestAnimationFrame(animate);   
    68.             }   
    69.             lain {   
    70.                 setTimeout(animate , 16);   
    71.             }   
    72.         }   

    
    Saya tidak akan menyiarkan semua kod, anda boleh melihatnya melalui konsol dalam DEMO. Saya tidak merujuk mana-mana rangka kerja lain atau apa-apa seperti itu, hanya salin dan anda boleh menggunakannya.

    Selepas anda boleh menulis kiub berputar, anda juga boleh membuat berbilang kiub berputar.
    

    Poke DEMO: Muka: 3D Cube 2 3D Cube Line (Saya rasa ini lebih sejuk tanpa muka)