HTML5 を使用して点、線、面で構成される 3D グラフィックを描画する例_html5 チュートリアル スキル

2、3 週間 Canvas で遊んでいますが、平面オブジェクトで遊ぶのは同じなので、3D をいじり始めました。

Canvas キャンバスは結局のところまだ平面なので、3D にしたい場合は Z 軸を抽象化する必要があります。次に、3D 座標を 2D 座標に変換し、キャンバス上に描画し、回転やその他の変形効果を使用して 3D 感を作成します。 3D を行うには、通常、点から線へ、そして線から面へという作業が伴います。

【ポイント】

クリックしていただければ、以前に 3D に関するブログ記事を書きました 3D タグ クラウドの解析は実際には非常に簡単です このブログ記事では div を使用して実装された 3D タグ クラウドについて説明していますが、根本的な原因は3D の原理も同じで、点から構成される最も単純な 3D です。各ラベルがポイントになります。このデモを直接見ることもできます:

3DBall
中には合計 500 個のポイント オブジェクトがあり、各ポイント オブジェクトは Z 軸に従ってサイズと透明度を変更し、球上に均等に分散します。点球。

【ライン】

点の作り方がわかれば、点と点を結ぶだけの簡単な線になります。これについてはデモを行っていませんが、実際には難しくありません。 moveTo をループしてから lineTo をループするだけで、ラインが出力されます。

【麺類】

このブログ記事は主に顔について話します。
早速、まずデモをやってみましょう:

3D キューブ

立方体を作成するために、点オブジェクト、面オブジェクト、立方体自体の 3 つのオブジェクトを使用しました。

以下は点オブジェクトです。x、y、z は点の 3 次元座標です。_get2d メソッドは 3 次元座標を 2 次元レベルに変換します。 fallLength は焦点距離です。

XML/HTML コードコンテンツをクリップボードにコピー

1. var ベクトル = 関数(x,y,z){
2. this.x = x;
3. this.y = y;
this.z
4. = z; this._get2d
=
5. 関数(){ var scale
=
6. fallLength/(fallLength this.z); var x =
centerX
7. this.x*scale; var y = centerY
this.y*scale;
8. 戻り値 {x:x, y:y};

   
   次に対象ユーザー:

   面オブジェクトのプロパティページはわかりやすいです。面は正方形であり、v1v2v3v4 は面のレベルを表します。外側または内側。キャンバスで描画するときに、このサーフェスが前面に描画され、他のサーフェスで覆われないようにするには、これを [はい] にする必要があります。 zIndex の値も理解しやすいですが、これは頂点の平均 Z 軸座標であり、実際には中心点の Z 軸座標です。色はこの表面の色です。

   XML/HTML コードコンテンツをクリップボードにコピー

   1. var 顔 = function(vector1,vector2,vector3,vector4,color){
   2. this.v1 = vector1;   
   3. this.v2 = vector2;   
   4. this.v3 = vector3;   
   5. this.v4 = vector4;   
   6. this.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 に基づいて並べ替え）、並べ替えた後、各面の描画方法を調整することです。 🎜>
   

   XML/HTML コード

   复制コンテンツ到剪贴板

   1. var Cube = function(長さ){
   2. this.length = 長さ;   
   3. this.faces = [];   
   4. this.vectors = [];   
   5. }
   6. Cube.prototype = {
   7. _initVector:function(){
   8. this.vectors[0] = 新しい Vector(-this.length/2 , -this.length/2 , this.length/2);   
   9. this.vectors[1] = 新しい Vector(-this.length/2 , this.length/2 , this.length/2);    
   10. this.vectors[2] = 新しい Vector(this.length/2 , -this.length/2 , this.length/2);    
   11. this.vectors[3] = 新しい Vector(this.length/2 , this.length/2 , this.length/2);    
   12. this.vectors[4] = 新しい Vector(this.length/2 , -this.length/2 , -this.length/2);   
   13. this.vectors[5] = 新しい Vector(this.length/2 , this.length/2 , -this.length/2);   
   14. this.vectors[6] = 新しい Vector(-this.length/2 , -this.length/2 , -this.length/2);   
   15. this.vectors[7] = 新しい 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");   
   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. }

   
   立方体の動作が完了すると、次に起動できるようになります。マウスの位置に応じて立方体の回転角度を変更します。rotateX およびrotateY の方法は、すべての点を X 軸および Y 軸を中心に回転します。当然のことながら、さらに理解したい場合は、X 軸および Y 軸を中心としたコンピューターの図形の 3D 変換を独自に検討することもできます。これには利点があり、本来は魔方を倒すために使用することを考えていますが、いくつかの問題に遭遇せず、問題は解決されません。

   およびrotateY の 2 つのメソッドは、各ポイントが次のフレームの位置を取得して、アニメーション サイクル中に繰り返し実行されます。

   XML/HTML コード复制コンテンツ到剪贴板

   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. 角度 Y = x*0.0001;   
   6. 角度X = y*0.0001;   
   7. });   
   8. }
   9. else {
   10. window.attachEvent("onmousemove" , function(event){
   11. var x = event.clientX - canvas.offsetLeft - centerX;   
   12. var y = event.clientY - canvas.offsetTop - centerY;   
   13. 角度 Y = x*0.0001;   
   14. 角度X = y*0.0001;   
   15. });   
   16. }  
   19. 関数 rotateX(ベクトル){
   20. var cos = Math.cos(angleX);   
   21. var sin = Math.sin(angleX);   
   22. vectors.foreach(function(){
   23. var y1 = this.y * cos - this.z * sin;   
   24. var z1 = this.z * cos this.y * sin;   
   25. this.y = y1;   
   26. this.z = z1;   
   27. });   
   28. }
   30. 関数 rotateY(ベクトル){
   31. var cos = Math.cos(angleY);   
   32. var sin = Math.sin(angleY);   
   33. vectors.foreach(function(){
   34. var x1 = this.x * cos - this.z * sin;   
   35. var z1 = this.z * cos this.x * sin;   
   36. this.x = x1;   
   37. this.z = z1;   
   38. })
   39. }  
   43. キューブ = 新しい Cube(80);   
   44. cube._initVector();   
   45. 関数 initAnimate(){
   46. cube._draw();   
   48. animate();   
   49. }
   51. 関数 animate(){
   52. ctx.clearRect(0,0,canvas.width,canvas.height)
   54. rotateY(cube.vectors);   
   55. rotateX(cube.vectors);   
   56. cube._draw();   
   57. if("requestAnimationFrame" in window){
   58. requestAnimationFrame(animate);   
   59. }
   60. else if("webkitRequestAnimationFrame" in window){
   61. webkitRequestAnimationFrame(animate);   
   62. }
   63. else if("msRequestAnimationFrame" in window){
   64. msRequestAnimationFrame(animate);   
   65. }
   66. else if("mozRequestAnimationFrame" in window){
   67. mozRequestAnimationFrame(animate);   
   68. }
   69. else {
   70. setTimeout(animate , 16);   
   71. }
   72. }

   
   すべてのコードは投稿しません。デモのコンソールから確認できます。他のフレームワークなどは参照していません。コピーするだけで使用できます。

   回転立方体を作成できたら、複数の回転立方体を作成することもできます。
   

   ポケデモ: 顔: 3D Cube 2 3D Cube Line (顔なしのほうがかっこいいと思います)