Beispiel für die Verwendung von HTML5 zum Zeichnen von 3D-Grafiken, die aus Punkten, Linien und Flächen bestehen. HTML5-Tutorial-Fähigkeiten

Ich spiele seit zwei oder drei Wochen mit Canvas und das Spielen mit flachen Objekten ist genauso, also habe ich angefangen, mit 3D herumzuspielen.

Da die Canvas-Leinwand immer noch flach ist, müssen Sie eine Z-Achse abstrahieren, wenn Sie 3D wünschen. Wandeln Sie dann die 3D-Koordinaten in 2D-Koordinaten um, zeichnen Sie sie auf die Leinwand und erzeugen Sie dann mithilfe von Rotations- und anderen Transformationseffekten ein 3D-Gefühl. Bei der Erstellung von 3D geht man im Allgemeinen von Punkten zu Linien und dann von Linien zu Flächen über.

【Punkt】

Wenn Sie darauf klicken, habe ich schon einmal einen Blog-Beitrag über 3D geschrieben. Das Parsen der 3D-Tag-Cloud ist eigentlich sehr einfach. In diesem Blog-Beitrag geht es zwar um die mit div implementierte 3D-Tag-Cloud, aber um die Grundursache Das Prinzip von 3D ist dasselbe, es ist das einfachste 3D, das aus Punkten besteht. Jedes Etikett ist ein Punkt. Sie können sich diese DEMO auch direkt ansehen:

3DBall
Es sind insgesamt fünfhundert Punktobjekte darin enthalten. Jedes Punktobjekt ändert seine Größe und Transparenz entsprechend seiner Z-Achse und verteilt es dann gleichmäßig auf der Kugel eine Punktkugel.

【Linie】

Sobald Sie wissen, wie man Punkte macht, wird die Linie einfach sein, verbinden Sie einfach die Punkte. Ich habe dazu noch keine DEMO gemacht, aber es ist wirklich nicht schwierig. Schleifen Sie einfach „moveTo“ und dann „lineTo“, und die Zeile wird ausgegeben.

【Nudeln】

In diesem Blogbeitrag geht es hauptsächlich um das Gesicht.
Lass uns ohne weitere Umschweife zuerst eine DEMO machen:

3D-Würfel

Um einen Würfel zu erstellen, habe ich drei Objekte verwendet: ein Punktobjekt, ein Flächenobjekt und den Würfel selbst:

Das Folgende ist ein Punktobjekt: x, y, z sind die dreidimensionalen Koordinaten des Punktes. Die _get2d-Methode konvertiert die dreidimensionalen Koordinaten in die zweidimensionale Ebene. fallLength ist die Brennweite.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. var Vektor = Funktion(x,y,z){
2. this.x = x;
3. this.y = y;
this.z
4. = z; this._get2d
=
5. function(){ var scale
=
6. fallLength/(fallLength this.z); var x =
centerX
7. this.x*scale; var y =
centerY
8. this.y*scale return {x:x, y:y};                                                                                                                                               

9. 
   Dann die Zielgruppe:

   Die Eigenschaftsseite des Gesichtsobjekts ist leicht zu verstehen. v1v2v3v4 sind die vier Eckpunkte des Gesichts. Es stellt die Ebene des Gesichts dar Dies muss „Ja“ sein, damit beim Zeichnen mit Leinwand diese Fläche vorne gezeichnet werden kann und nicht von anderen Flächen verdeckt wird. Der Wert von zIndex ist ebenfalls leicht zu verstehen. Er ist die durchschnittliche Z-Achsen-Koordinate des Scheitelpunkts, die tatsächlich die Z-Achsen-Koordinate des Mittelpunkts ist. Die Farbe ist die Farbe dieser Oberfläche.

   XML/HTML-CodeInhalt in die Zwischenablage kopieren

   1. var Gesicht = Funktion(vector1,vector2,vector3,vector4,color){   
   2.             this.v1 = vector1;   
   3.             this.v2 = vector2;   
   4.             this.v3 = vector3;   
   5.             this.v4 = vector4;   
   6.             this.color = color;   
   7.             this.zIndex = (this.v1.z   this.v2.z   this.v3.z   this.v4.z)/4;   
   8.             this.draw = function(){   
   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(Math.random()*255) "," parseInt(Math.random()*255) "," parseInt(Math.random()*255) ",0.2)";   
   17.                 ctx.fillStyle = this.color;   
   18.                 ctx.fill();   
   19.             }   
   20.         }  

   
   　　最后是立方体本身对象：

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

   XML/HTML-Code复制内容到剪贴板

   1. var Würfel = Funktion(Länge){   
   2.             this.length = length;   
   3.             this.faces = [];   
   4.             this.vectors = [];   
   5.         }   
   6.         Cube.prototype = {   
   7.             _initVector:function(){   
   8.                 this.vectors[0] = new Vector(-this.length/2 , -this.length/2 , this.length/2);   
   9.                 this.vectors[1] = new Vector(-this.length/2 , this.length/2 , this.length/2);    
   10.                 this.vectors[2] = new Vector(this.length/2 , -this.length/2 , this.length/2);    
   11.                 this.vectors[3] = new Vector(this.length/2 , this.length/2 , this.length/2);    
   12.                 this.vectors[4] = new Vector(this.length/2 , -this.length/2 , -this.length/2);   
   13.                 this.vectors[5] = new Vector(this.length/2 , this.length/2 , -this.length/2);   
   14.                 this.vectors[6] = new Vector(-this.length/2 , -this.length/2 , -this.length/2);   
   15.                 this.vectors[7] = new Vector(-this.length/2 , this.length/2 , -this.length/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.                     return b.zIndex - a.zIndex;   
   27.                 });   
   28.                 this.faces.foreach(function(){   
   29.                     this.draw();   
   30.                 })   
   31.             }   
   32.         }  

   
   　　立方体做好了，接下来就可以让它动起来了。根据鼠标位置改变立方体转动的角度Mit rotateX und rotateY können Sie X drehen und Y drehen原理我在之前那个博文上好像有说过.。。。如果想了解更多, 可以自己去百度一下计算机图形学3 D变换.绕X轴和绕Y轴是最简单的旋转矩阵了.当然，如果有兴趣的还可以去搜一下绕任意轴旋转矩阵Wählen Sie rotateX Drehen Sie Y来了.

   XML/HTML-Code复制内容到剪贴板

   1. if("addEventListener" in window){   
   2.             window.addEventListener("mousemove" , function(event){   
   3.                 var x = event.clientX - canvas.offsetLeft - centerX;   
   4.                 var y = event.clientY - canvas.offsetTop - centerY;   
   5.                                     Winkel   
               });   
   6.         }            else {   
               window.attachEvent("onmousemove" , function(event){   
                   var 
   8. x
    = 
   9. event
   .clientX - canvas.offsetLeft - centerX;   
                   var 
   11. y = event.clientY - canvas.offsetTop - centerY;   
                      
   12.                 Winkel                });   
   13.         }  
   14.            
   15.   
   16.         function rotateX(vectors){   
   17.             var cos = Math.cos(angleX);   
   18.             var sin = Math.sin(angleX);   
   19.             vectors.foreach(function(){   
   20.                 var y1 = this.y * cos - this.z * sin;   
   21.                 var z1 = this.z * cos   this.y * sin;   
   22.                 this.y = y1;   
   23.                 this.z = z1;   
   24.             });   
   25.         }   
   26.   
   27.         function rotateY(vectors){   
   28.             var cos = Math.cos(angleY);   
   29.             var sin = Math.sin(angleY);   
   30.             vectors.foreach(function(){   
   31.                 var x1 = this.x * cos - this.z * sin;   
   32.                 var z1 = this.z * cos   this.x * sin;   
   33.                 this.x = x1;   
   34.                 this.z = z1;   
   35.             })   
   36.         }  
   37.   
   38.            
   39.   
   40.         Würfel = neu Würfel(80);   
   41.         cube._initVector();   
   42.         function initAnimate(){   
   43.             cube._draw();   
   44.   
   45.             animate();   
   46.         }   
   47.   
   48.         function animate(){   
   49.             ctx.clearRect(0,0,canvas.width,canvas.height)   
   50.                
   51.             rotateY(cube.vectors);   
   52.             rotateX(cube.vectors);   
   53.             cube._draw();   
   54.             if("requestAnimationFrame" in window){   
   55.                 requestAnimationFrame(animate);   
   56.             }   
   57.             else if("webkitRequestAnimationFrame" in window){   
   58.                 webkitRequestAnimationFrame(animate);   
   59.             }   
   60.             else if("msRequestAnimationFrame" in window){   
   61.                 msRequestAnimationFrame(animate);   
   62.             }   
   63.             else if("mozRequestAnimationFrame" in window){   
   64.                 mozRequestAnimationFrame(animate);   
   65.             }   
   66.             sonst {   
   67.                 setTimeout(animate , 16);   
   68.             }   
   69.         }   

   
   Ich werde nicht den gesamten Code veröffentlichen, Sie können ihn über die Konsole in der DEMO sehen. Ich habe nicht auf andere Frameworks oder ähnliches verwiesen, kopieren Sie es einfach und Sie können es verwenden.

   Nachdem Sie einen rotierenden Würfel schreiben können, können Sie auch mehrere rotierende Würfel erstellen.
   

   Poke DEMO: Gesicht: 3D Cube 2 3D Cube Line (Ich finde das einfach cooler ohne Gesichter)