您現在的位置是:電腦技術吧?>? 組裝維修 ??>??3D圖形,3d圖形怎么做??>??正文詳情

3D圖形,3d圖形怎么做

上官微婉2019-11-25 18:31:26 人圍觀
簡介3D繪圖它已經玩了兩三個星期了。它就像玩扁平的東西,所以它開始拋3D,因為帆布畫布仍然是平的,畢竟我們需要抽象一個Z軸有三維,然后三維坐標轉換成二維坐標,畫在畫布上,三

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

  因為Canvas畫布終究還是平面的,所以要有3D就得抽象出一個Z軸。

然后再把3D坐標轉換成2D坐標,畫到畫布上,再通過旋轉等變換效果來產生3D感。

做3D一般就是由點到線,然后由線到面。

  【點】  點的話,之前我有寫過關于3D的博文 解析3D標簽云,其實很簡單 ,這篇博文雖然講的是用div實現的3D標簽云,但是追根到底產生的3D原理是一樣的,就是最簡單的由點構成的3D了。

每一個標簽就是一個點。

也可以直接看這個DEMO:

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

  【線】  如果知道怎么做點之后,線也就容易了,只要把點連起來就行了。

這個沒做DEMO,不過也確實不難。

就循環moveTo,然后lineTo,線就出來了。

  【面】  這篇博文主要講面滴。

  二話不說,先上個DEMO吧 :

  3D立方體  做一個立方體,我用了三個對象:點對象,面對象,以及立方體本身一個對象:  下面這個是點對象,x,y,z是點的三維坐標,_get2d方法是把三維坐標轉換到二維層面來。

fallLength是焦距。

  XML/HTML Code復制內容到剪貼板  var Vector = function(x,y,z){  this.x = x;  this.y = y;  this.z = z;  this._get2d = function(){  var scale = fallLength/(fallLength this.z);  var x = centerX this.x*scale;  var y = centerY this.y*scale;  return {x:x , y:y};  }  }  然后是面對象:  面對象的屬性頁很容易理解,一個面就是一個正方形 , v1v2v3v4是面的四個頂點,zIndex這個屬性很重要,是代表這個面的層級,是在最外面還是在里面,這個必須要有,這樣當用canvas畫的時候才能讓這個面畫在最前面,才不會被其他的面遮蓋。

zIndex的值也很容易理解,就是頂點z軸坐標的平均值,其實也就是中心點的z軸坐標。

顏色就是這個面的顏色啦。

  XML/HTML Code復制內容到剪貼板  var Face = function(vector1,vector2,vector3,vector4,color){  this.v1 = vector1;  this.v2 = vector2;  this.v3 = vector3;  this.v4 = vector4;  this.color = color;  this.zIndex = (this.v1.z this.v2.z this.v3.z this.v4.z)/4;  this.draw = function(){  ctx.save();  ctx.beginPath();  ctx.moveTo(this.v1._get2d().x , this.v1._get2d().y);  ctx.lineTo(this.v2._get2d().x , this.v2._get2d().y);  ctx.lineTo(this.v3._get2d().x , this.v3._get2d().y);  ctx.lineTo(this.v4._get2d().x , this.v4._get2d().y);  ctx.closePath();  // ctx.fillStyle = rgba( parseInt(Math.random()*255) , parseInt(Math.random()*255) , parseInt(Math.random()*255) ,0.2);  ctx.fillStyle = this.color;  ctx.fill();  }  }  最后是立方體本身對象:  因為立方體最后要旋轉,所以,立方體對象里面不僅有面對象,還要有點對象,點旋轉后才會引起面的旋轉。

length是立方體的邊長,_initVector是初始化立方體的各個頂點,_draw方法就是把所有點形成面,將面放入數組,然后對面進行排序(就是根據面里的zIndex排序),排序好后,調用每個面里的draw方法。

立方體就出來了。

  XML/HTML Code復制內容到剪貼板  var Cube = function(length){  this.length = length;  this.faces = [];  this.vectors = [];  }  Cube.prototype = {  _initVector:function(){  this.vectors[0] = new Vector(-this.length/2 , -this.length/2 , this.length/2);  this.vectors[1] = new Vector(-this.length/2 , this.length/2 , this.length/2);  this.vectors[2] = new Vector(this.length/2 , -this.length/2 , this.length/2);  this.vectors[3] = new Vector(this.length/2 , this.length/2 , this.length/2);  this.vectors[4] = new Vector(this.length/2 , -this.length/2 , -this.length/2);  this.vectors[5] = new Vector(this.length/2 , this.length/2 , -this.length/2);  this.vectors[6] = new Vector(-this.length/2 , -this.length/2 , -this.length/2);  this.vectors[7] = new Vector(-this.length/2 , this.length/2 , -this.length/2);  },  _draw:function(){  this.faces[0] = new Face(this.vectors[0] , this.vectors[1] , this.vectors[3] , this.vectors[2] , #6c6);  this.faces[1] = new Face(this.vectors[2] , this.vectors[3] , this.vectors[5] , this.vectors[4] , #6cc);  this.faces[2] = new Face(this.vectors[4] , this.vectors[5] , this.vectors[7] , this.vectors[6] , #cc6);  this.faces[3] = new Face(this.vectors[6] , this.vectors[7] , this.vectors[1] , this.vectors[0] , #c6c);  this.faces[4] = new Face(this.vectors[1] , this.vectors[3] , this.vectors[5] , this.vectors[7] , #666);  this.faces[5] = new Face(this.vectors[0] , this.vectors[2] , this.vectors[4] , this.vectors[6] , #ccc);  this.faces.sort(function(a , b){  return b.zIndex - a.zIndex;  });  this.faces.foreach(function(){  this.draw();  })  }  }  立方體做好了,接下來就可以讓它動起來了。

根據鼠標位置改變立方體轉動的角度。

rotateX和rotateY方法就是讓所有點繞X軸旋轉以及繞Y軸旋轉。

這個的原理我在之前那個博文上好像有說過。

如果想了解更多,可以自己去百度一下計算機圖形學3D變換。

繞X軸和繞Y軸是最簡單的旋轉矩陣了。

當然,如果有興趣的還可以去搜一下繞任意軸旋轉矩陣。

這個有點復雜,我本來想用它來做個魔方,不過遇到一些問題,暫時還沒解決。

好吧,扯遠了。

通過rotateX和rotateY兩個方法可以讓每個點獲得下一幀的位置,在動畫循環中重繪。

這樣,轉動的立方體就做出來了。

  XML/HTML Code復制內容到剪貼板  if(addEventListener in window){  window.addEventListener(mousemove , function(event){  var x = event.clientX - canvas.offsetLeft - centerX;  var y = event.clientY - canvas.offsetTop - centerY;  angleY = x*0.0001;  angleX = y*0.0001;  });  }  else {  window.attachEvent(onmousemove , function(event){  var x = event.clientX - canvas.offsetLeft - centerX;  var y = event.clientY - canvas.offsetTop - centerY;  angleY = x*0.0001;  angleX = y*0.0001;  });  }  function rotateX(vectors){  var cos = Math.cos(angleX);  var sin = Math.sin(angleX);  vectors.foreach(function(){  var y1 = this.y * cos - this.z * sin;  var z1 = this.z * cos this.y * sin;  this.y = y1;  this.z = z1;  });  }  function rotateY(vectors){  var cos = Math.cos(angleY);  var sin = Math.sin(angleY);  vectors.foreach(function(){  var x1 = this.x * cos - this.z * sin;  var z1 = this.z * cos this.x * sin;  this.x = x1;  this.z = z1;  })  }  cube = new Cube(80);  cube._initVector();  function initAnimate(){  cube._draw();  animate();  }  function animate(){  ctx.clearRect(0,0,canvas.width,canvas.height)  rotateY(cube.vectors);  rotateX(cube.vectors);  cube._draw();  if(requestAnimationFrame in window){  requestAnimationFrame(animate);  }  else if(webkitRequestAnimationFrame in window){  webkitRequestAnimationFrame(animate);  }  else if(msRequestAnimationFrame in window){  msRequestAnimationFrame(animate);  }  else if(mozRequestAnimationFrame in window){  mozRequestAnimationFrame(animate);  }  else {  setTimeout(animate , 16);  }  }  全部代碼我就不貼了,DEMO里通過控制臺都可以看到。

我也沒引用其他什么框架之類的,直接copy下來就能用了。

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

  戳DEMO:面:3D立方體2 3D立方體線(這個純碎覺得沒有面更酷而已)

版權聲明:本文由 上官微婉 整理編輯。

原標題:3d圖形怎么畫,ps怎么做3d立體圖形

轉載注明出處:http://www.dn9ww09s.icu/assemble/14394.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 守護世紀,世紀守護登錄

    守護世紀,世紀守護登錄 相關圖片守護者世紀戰元免費世紀衛士是一款用于學校和家長雙向交流的學習軟件。在這里,你不僅可以檢查你的學習成績,還可以了解學校的一些情況。那么世紀衛士的查詢結果在哪里呢?編...

  • win7開機輸入法不啟動,win7任務欄沒有輸入法

    win7開機輸入法不啟動,win7任務欄沒有輸入法 相關圖片win7沒有輸入法語言欄了雖然win10系統已經發布了很長一段時間,但是很多用戶仍然使用win7系統。當然,win7系統在使用過程中總會遇到一些小問題。例如,在win7系統上電后,輸入方win7自...

  • 字體尺寸對照表,ps查看字體實際尺寸

    字體尺寸對照表,ps查看字體實際尺寸 相關圖片6號字體多大CSS中的常用單位可以用多種不同的方式設置字體大小。一般來說,這些單位分為絕對單位和相對單位兩大類,在大多數情況下,絕對單位是相對于某些實際測量值的固定值,...

  • 輸入法圖標不見了怎么辦,輸入法不見了

    輸入法圖標不見了怎么辦,輸入法不見了 相關圖片電腦右下角輸入法圖標不見了最近,有人問超人,當電腦的輸入法圖標突然消失時,如何恢復。超人收集了一些解決方案。如果其他車主也遇到相關問題,可以和超人一起看一下教程打...

  • 知乎怎么發表文章不被刪除,知乎怎么發表內容

    知乎怎么發表文章不被刪除,知乎怎么發表內容 相關圖片為什么在知乎上發文章老被刪智虎是一款非常實用的閱讀和學習軟件。在這個軟件中,用戶可以閱讀許多高質量的文章。那么如何發表文章呢?接下來,超人軟件編輯將介紹智虎iPhone上...

  • win7IP地址,win7哪里看ip地址

    win7IP地址,win7哪里看ip地址 相關圖片win7電腦ip地址在哪看在Internet上沖浪時,您一定遇到了由于IP地址沖突而無法鏈接網絡的問題。除了Windows 7系統和Windows xp系統炫目的界面、跳轉列表等功能外,如何更改電腦ip地址 win7...

  • image data,image轉data

    image data,image轉data 相關圖片no image將圖像資源轉換為Base64字符串格式并將其嵌入頁面或樣式中。這樣,甚至保存了圖像請求鏈接,例如:使用CSS代碼將內容復制到剪貼板/**數據格式**/data:base64轉formdata...

  • 幸運奪寶,奪寶幸運值

    幸運奪寶,奪寶幸運值 相關圖片王者奪寶幸運值滿幸運戰利品是一個非常實用的購物軟件。在這個軟件中,用戶有機會花一點錢,得到好的產品,但不可避免的是讓人們懷疑產品的質量。那么幸運戰利品真的能贏嗎?...

  • 錯誤0x8007045d,錯誤0x0000709

    錯誤0x8007045d,錯誤0x0000709 相關圖片0x80004005錯誤原因據超人小編介紹,雖然從win 10官方10240升級到win 10 Th2官方的安裝方法比其他升級容易,但并不意味著每個人在升級過程中都有問題。近日,有網友問小錯誤代碼0xc000000...

  • iconfont,iconfont怎么用

    iconfont,iconfont怎么用 相關圖片iconfontcdn因為移動設備有不同的分辨率、PPI等問題,所以經常需要針對不同的屏幕分辨率進行調整和優化,比如使用@2x圖片、最大寬度限制等使用[email protected] face來顯示icon卡...

熱評文章

  • 美拍我拍,美拍拍

    美拍我拍,美拍拍 相關圖片美拍怎么不能拍視頻了美派是一個短視頻社區,收集最新、最熱門、最新潮的視頻。視頻剪輯中不乏神仙,只是短短幾分鐘就構建了豐富的劇情,充滿了短片人物。美派安卓也可以錄制...

  • dw cs5,dwcs5asp

    dw cs5,dwcs5asp 相關圖片dwcs5安裝教程今天,當我打開CS5時,我發現沒有問題,但是當我打開文件時,DW提示xslt.htm的設置信息不正確。后來,我找了很長時間才把它解出來。讓我們刪除C:/docudwcs6使用方法...

  • 優步綁定的銀行卡怎么取消,如何解綁優步銀行卡

    優步綁定的銀行卡怎么取消,如何解綁優步銀行卡 相關圖片優步取消銀行卡綁定Uber是許多小伙伴手機中必備的騎乘軟件。很多小伙伴會選擇支付寶來買車,但如果支付寶沒有余額,你可以選擇用銀行卡支付。但在你付錢之前你得先綁好。Uber A...

  • 框架,Php框架

    框架,Php框架 相關圖片框架圖片大全SASS末尾的文件有更嚴格的格式要求。SCSS文件更接近本機CSS。例如,SASS文件的CSS代碼將內容復制到剪貼板主顏色:fff-邊欄邊框:1px實心相當于Shtml簡單框架代碼...

  • 優步待開票,每日優鮮怎么開票

    優步待開票,每日優鮮怎么開票 相關圖片每日優鮮發票類型如今,越來越多的人選擇使用Uber出租車當他們外出時。你知道Uber是怎么開發票的嗎?接下來,超人軟件將為您介紹如何申請Uber iPhone版本的發票。讓我們滴滴優享服務...

  • 愛剪輯字幕打字特效,愛剪輯字幕特效參數怎么固定

    愛剪輯字幕打字特效,愛剪輯字幕特效參數怎么固定 相關圖片如何在愛剪輯上添加字幕當你用愛的片段仔細剪輯一段視頻時,如果字幕是普通的,那就太糟糕了。事實上,愛情短片中有很多特效字幕,可以讓你的字幕效果熠熠生輝。向超人軟件站...

  • 海景卡通,卡通海景圖片

    海景卡通,卡通海景圖片 相關圖片卡通度假圖片這個例子向朋友介紹了使用焰火鼠標繪制一個新鮮的卡通海景。主要研究ALT鍵、紋理、發光工具和橡皮工具在焰火筆工具中的應用,希望能給朋友帶來幫助~~最終效果:(...

  • 蘋果se配置跟蘋果6s比較,蘋果se和蘋果6s配置參數表

    蘋果se配置跟蘋果6s比較,蘋果se和蘋果6s配置參數表 相關圖片蘋果se對比6s續航很多用戶表示,蘋果Se和6S的區別只是大屏幕和小屏幕的區別,硬件條件的差別并不大。那是真的嗎?讓我們一起來看看超人軟件站的小編。蘋果se配置與6S相同嗎?哪個...

  • 解決問題的方法,解決辦法

    解決問題的方法,解決辦法 相關圖片什么是解決問題的重要方法我曾經遇到過Dreamweaver中的光標在uft-8代碼下沒有正確定位的問題。但今天,這個問題也出現在Dreamweaver CC的設計模式中。現在我已經想出工作中的問題及解決...

  • 小鳴單車最后押金退了嗎,2019小鳴單車押金還能退嗎

    小鳴單車最后押金退了嗎,2019小鳴單車押金還能退嗎 相關圖片小鳴單車可以加盟嗎最近,越來越多的人會選擇使用小明自行車來解決最后一公里的問題。但有很多人不知道小明自行車存了多少錢。接下來,超人軟件將推出小明自行車iPhone版的退押...

關注微信

变脸官网查询