2. 程式人生 > >html5＜canvas模擬三維圖形＞（旋轉的正方體）

html5＜canvas模擬三維圖形＞（旋轉的正方體）

阿新 • • 發佈：2019-01-19
<html>
     <head>
          <style>
          canvas{
            background:#eee;
          }
          </style>
          <title>noTitle</title>
          <meta charset="">
          <link rel="stylesheet" href="">
          <script>
               window.onload=function  () {
                 var canvas=document.getElementById("canvas");
                 var cobj=canvas.getContext("2d");
                 cobj.translate(250,250);
              var focusLen=300;
                 var points=[
                   {x_3d:-50,y_3d:-50,z_3d:-50},
                    {x_3d:50,y_3d:-50,z_3d:-50},
                    {x_3d:50,y_3d:50,z_3d:-50},
                    {x_3d:-50,y_3d:50,z_3d:-50},

                    {x_3d:-50,y_3d:-50,z_3d:50},
                    {x_3d:50,y_3d:-50,z_3d:50},
                    {x_3d:50,y_3d:50,z_3d:50},
                    {x_3d:-50,y_3d:50,z_3d:50},
                 ]
                   setInterval(function  () {
                         cobj.clearRect(-200,-200,500,500);
                           var points2d=[];
                           for (var i=0; i<points.length; i++) {
                              var newxyz=rectarr([1,-1,1],10*Math.PI/180,[points[i].x_3d,points[i].y_3d,points[i].z_3d,]);
                              points[i].x_3d=newxyz[0];
                              points[i].y_3d=newxyz[1];
                              points[i].z_3d=newxyz[2];
                              var obj= change2d (newxyz[0],newxyz[1],newxyz[2],focusLen);
                              points2d.push(obj);
                         }
                         drawRect (cobj,points2d)
                      },100)
              
  
               }

               function change2d (x_3d,y_3d,z_3d,focusLen) {
                 var xy={};
                 var scales=focusLen/(focusLen+z_3d);
              xy.x=x_3d*scales;
                 xy.y=y_3d*scales;
                 return xy;
               }

               function drawRect (cobj,points2d) {
                 cobj.beginPath();
                 cobj.moveTo(points2d[0].x,points2d[0].y);
                 cobj.lineTo(points2d[1].x,points2d[1].y);
                 cobj.lineTo(points2d[2].x,points2d[2].y);
                 cobj.lineTo(points2d[3].x,points2d[3].y);
                 cobj.closePath();
                 cobj.stroke()


                 cobj.beginPath();
                 cobj.moveTo(points2d[4].x,points2d[4].y);
                 cobj.lineTo(points2d[5].x,points2d[5].y);
                 cobj.lineTo(points2d[6].x,points2d[6].y);
                 cobj.lineTo(points2d[7].x,points2d[7].y);
                 cobj.closePath();
                 cobj.stroke()

                 cobj.beginPath();
                 cobj.moveTo(points2d[0].x,points2d[0].y);
                 cobj.lineTo(points2d[4].x,points2d[4].y);
                 cobj.lineTo(points2d[7].x,points2d[7].y);
                 cobj.lineTo(points2d[3].x,points2d[3].y);
                 cobj.closePath();
                 cobj.stroke()


                 cobj.beginPath();
                 cobj.moveTo(points2d[1].x,points2d[1].y);
                 cobj.lineTo(points2d[5].x,points2d[5].y);
                 cobj.lineTo(points2d[6].x,points2d[6].y);
                 cobj.lineTo(points2d[2].x,points2d[2].y);
                 cobj.closePath();
                 cobj.stroke()
               }

          //xiangl: 也就是3維旋轉軸（陣列形式）
          //theta:  旋轉的度數（陣列形式）
          //xyzArr: 旋轉以後的x,y,z的值（陣列形式）
          //旋轉後的座標
          function rectarr (xiangl,theta,xyzArr){
               var sqrt = Math.sqrt(xiangl[0] * xiangl[0] + xiangl[1] * xiangl[1] + xiangl[2] * xiangl[2]);
               var u = xiangl[0] / sqrt;
               var v = xiangl[1] / sqrt;
               var w = xiangl[2] / sqrt;
               var newarr = [];
               newarr[0]= [
               Math.cos(theta) + (u * u) * (1 - Math.cos(theta)) ,
                   u * v * (1 - Math.cos(theta)) + w * Math.sin(theta),
                   u * w * (1 -Math.cos(theta)) - v * Math.sin(theta),
                   0
               ];
               newarr[1] = [
               u * v * (1 - Math.cos(theta)) - w * Math.sin(theta),
                   Math.cos(theta) + v * v * (1 - Math.cos(theta)),
                   w * v * (1 - Math.cos(theta)) + u * Math.sin(theta),
                   0
               ];
               newarr[2]= [
               u * w * (1 - Math.cos(theta)) + v * Math.sin(theta),
                    v * w * (1 - Math.cos(theta)) - u * Math.sin(theta),
                    Math.cos(theta) + w * w * (1 - Math.cos(theta)),
                    0
               ];
               newarr[3] = [
                  0,
                   0,
                   0,
                   1
               ];
               //計算旋轉以後的值
               var arr = [];
               for (var i=0; i<newarr.length; i++) {
                    var val = 0;
                    for (var j=0; j<xyzArr.length; j++) {
                         val +=  newarr[i][j] * xyzArr[j];
                    }
                    arr.push (val);
               }
               return arr;
          }
          </script>
     </head>
     <body>
          <canvas id="canvas" height=500 width=500>
          </canvas>
     </body>

相關推薦

html5＜canvas模擬三維圖形＞（旋轉的正方體）

<html>      <head>           <style>           canvas{             background:#eee;           }           </style>           <ti

HTML5（六）html5＜canvas帶音效的時鐘＞

html5的canvas實現帶音效的時鐘 <!DOCTYPE html> <html> <head> <title>canvas</title> <style> canvas{

2.遺傳演算法matlab實現（2）：再加例項兩個（一元二元完整作圖，二維圖形,三維圖形以及進化過程圖）

（1）直接在命令視窗輸入以下程式碼: figure(1); hold on; lb=1;ub=2; %函式自變數範圍[1,2] ezplot('sin(10*pi*X)/X',[lb,ub]);

BIGEMAP如何使用高程DEM建立三維地圖模型（Arcgis ArcScene）

  工具準備      1、BIGEMAP地圖下載器      2、ARCGIS10.2       3、global mapper  &nbs

BIGEMAP中如何使用高程DEM建立三維地圖模型（Arcgis ArcScene）

同步視訊教程 工具準備    1、BIGEMAP地圖下載器      2、ARCGIS10.2       3、global mapper  資料準備       下載你需要 區域的DEM資料和 衛星影像資料。 影像須

html5＜canvas操作畫素之反相、窗簾、模糊特效＞

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="utf-8">         <style>             canvas{               

Bubble三維圖形引擎簡介

模塊 images c++編寫 sdl2 支持 ima 包括 .com glsl Bubble是一款基於OpenGL的3D圖形引擎，主要使用C++編寫，采用CMake構建工具構建，基於OpenGL可編程管線，支持GLSL著色器語言。這是一個用於學習和實踐的項目，目前尚在開發

【WPF】用三角形網格構建三維圖形

遊戲 輸入 angle 結構 dash bsp 來看 適應 鼠標 雖然WPF只能支持部分三維模型，不過從應用功能開發的角度看，也已經夠用了（非遊戲開發）。WPF 的三維圖形，說得簡單一點，也就兩種而已。 1、把二維對象放到三維空間中，這個應該較為好辦，像 Image 控件

MATLAB繪制三維圖形

opp 公式 代碼 AR mage imageview mesh ans alt 1.畫橢球 1.1 圓心在（0,0,0） [x,y,z]=sphere(30);%30是畫出來的球面的經緯分面數...30的話就是30個經度, 30個緯度 surf(x,y,z) 1.2 圓

三維圖形 surfh 和 mesh

clas com .com tlab sha src class orm int z=peaks(50); surfl(z) shading interp colormap copper 　　三維圖形 surfh 和 mesh

三維圖形變換

四階 視圖 分類 平移 缺點 兩種 直線 交點 之間 三維圖形變換 是在二維方法基礎上增加了對z坐標的考慮得到的。與二維變換類似，引入齊次坐標表示，即：三維空間中某點的變換可以表示成點的齊次坐標與四階的三維變換矩陣相乘。 一、平移變換 二．比例變換 例如：對長方體進

CG-二維三維圖形變換-學習筆記

結果 設備 right 可行性 spl http 情況下 width 範圍 一、計算機圖形學中坐標系分類 世界坐標系、建模坐標系、觀察坐標系、設備坐標系、規範化坐標系 其中：規範化坐標系是一個中間坐標系，坐標值取值範圍0-1； 二、二維圖形變換 1. 變換種類：比例、旋轉、

怎麽在CAD中繪制三維圖形

mar 編輯器 下拉 htm tex 官網 技巧 安裝 人員 在CAD中繪制CAD圖紙的時候，建築設計師們在使用的過程中，不僅要使用到平面圖形，還要繪制三維圖形，因為三維圖形繪制出來的效果更加的接近實物，那問題就來了，怎麽在CAD中繪制三維圖形？那不會的小夥伴們就可以來看看

三維圖形 ---- 三角形與直線碰撞原理（包含 JavaScript 程式碼）

//碰撞的三角形 var triangleVertices = new Float32Array([-1.9, 0.1, -0.1, -0.4, 1.9, 0.5, 0.6, 0.1, 4.7]); //碰撞的直線 var lineVertices

（17）三維圖形幾何變換

三維圖形的基本變換矩陣 三維圖形幾何變換是二維圖形幾何變換的擴充套件。在三維空間中，用規範化齊次座標[x  y  z  1]表示三維點，變換原理是把齊次座標點(x, y, z, 1)通過變換矩陣變換成

python matplotlib模組——繪製三維圖形、三維資料散點圖

python matplotlib模組，是擴充套件的MATLAB的一個繪圖工具庫。他可以繪製各種圖形，可是最近最的一個小程式，得到一些三維的資料點圖，就學習了下python中的matplotlib模組，

三維圖形顯示流程

目的：將三維場景轉化為螢幕二維影象。組成：可分為三個階段 application階段，cpu處理(1). 資料準備。一個是模型載入（mesh，texture等）；二是攝像機（位置，朝向等）；三是光源（位置，型別等）。(2). 裁剪和剔除。(3). 計算模型檢視矩陣。(4). 設定渲染狀態，呼叫Draw

三維圖形幾何變換

與二維變換矩陣相似,採用齊次座標的三維變換矩陣為同樣可以分為四個子矩陣:對影象進行比例,旋轉,錯切,對稱等幾何變換,產生平移變換,對圖形進行投影變換,對整體進行比例變換.1 平移變換:x方向移動d,y方向移動h,z方向移動l2 比例變換:x方向擴大a倍,y方向擴大f倍,z方向

初試openGl — 三維圖形

#include <GL/glut.h> #include <windows.h> #include <stdlib.h> #include <math.h> #define GLUT_DISABLE_ATEXIT_HACK GLfloat AngleX; GL

WPF三維圖形

wpf 三維圖形基礎生成三維圖形的基本思想是能得到一個物體的三維立體模型（model）。由於我們的螢幕只有二維，因而我們定義了一個用於給物體拍照的照相機（Camera）。拍到的照片其實是物體到一個平坦表面的投影。這個投影由3D渲染引擎渲染成點陣圖。引擎通過計算所有光源對3D