成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

three.js入門——畫一個(gè)3D正方體

taowen / 3308人閱讀

摘要：具體實(shí)現(xiàn)過程準(zhǔn)備一個(gè)畫布這個(gè)畫布是我們展現(xiàn)整個(gè)正方形的畫布，也就是上圖那個(gè)黑色的方框。第三四個(gè)參數(shù)分別是相機(jī)離展示內(nèi)容正方體最近的距離和最遠(yuǎn)的距離。這個(gè)時(shí)候畫布的大小正好是正方體的倍。

three.js 是一款WebGL框架，WebGL可以讓我們在canvas上實(shí)現(xiàn)3D效果。
實(shí)現(xiàn)3D效果在國內(nèi)來說還算是比較新的東西，可供查閱的資料也不多。
這篇文章僅是一個(gè)入門篇，介紹如何繪制一個(gè)3D正方體。


介紹完畢，首先奉上實(shí)現(xiàn)的效果圖：

這就是實(shí)現(xiàn)的效果圖，還是挺有立體感的吧？

繪制前的準(zhǔn)備

寫代碼前，要先下載最新的three.js框架包，引入自己的頁面。

具體實(shí)現(xiàn)過程 準(zhǔn)備一個(gè)canvas畫布

這個(gè)畫布是我們展現(xiàn)整個(gè)3D正方形的畫布，也就是上圖那個(gè)黑色的方框。




  
  
  
  Camera 相機(jī)
明確繪制思路

接下來的繪制過程會(huì)涉及到多個(gè)概念：canvas、scene、camera、renderer。
為了能更好理解繪制過程的代碼和有助于記憶，我們先來理解這幾個(gè)概念：


假設(shè)我們現(xiàn)在正在旅游的途中，看到了一個(gè)很唯美的畫面，想把這個(gè)3D世界記錄下來

這個(gè)唯美的場景就是scene，我們用相機(jī)camera拍攝下來形成照片

為了能看清楚這個(gè)照片，我們把這個(gè)照片放置在一個(gè)畫布canvas上

最后，我們再用renderer修飾渲染一下

這樣，我們就能成功展現(xiàn)這個(gè)3D世界了。
【程序還是很貼近生活噠?】
通過現(xiàn)實(shí)世界的理解，我們接下來開始代碼啦o(￣▽￣)ブ

準(zhǔn)備好canvas、scene、camera、renderer，給一個(gè)初始化的方法 


以下是本例完整代碼：





  
  
  
  Camera 相機(jī)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89842.html

相關(guān)文章

  • three.js入門——畫一個(gè)3D正方體

    摘要：具體實(shí)現(xiàn)過程準(zhǔn)備一個(gè)畫布這個(gè)畫布是我們展現(xiàn)整個(gè)正方形的畫布，也就是上圖那個(gè)黑色的方框。第三四個(gè)參數(shù)分別是相機(jī)離展示內(nèi)容正方體最近的距離和最遠(yuǎn)的距離。這個(gè)時(shí)候畫布的大小正好是正方體的倍。 three.js 是一款WebGL框架，WebGL可以讓我們在canvas上實(shí)現(xiàn)3D效果。實(shí)現(xiàn)3D效果在國內(nèi)來說還算是比較新的東西，可供查閱的資料也不多。這篇文章僅是一個(gè)入門篇，介紹如何繪制一個(gè)3D正方...

    fredshare 評論0 收藏0

  • three.js 入門詳解(一)

    摘要：一般說來，對于制圖建模軟通常使正交投影，這樣不會(huì)因?yàn)橥队岸淖兾矬w比例而對于其他大多數(shù)應(yīng)用，通常使用透視投影，因?yàn)檫@更接近人眼的觀察效果。 showImg(https://segmentfault.com/img/remote/1460000012581680?w=1920&h=1080); 1. 概述 1.1 什么是WebGL？ WebGL是在瀏覽器中實(shí)現(xiàn)三維效果的一套規(guī)范 想要使用...

    Jacendfeng 評論0 收藏0

  • threejs構(gòu)建web三維視圖入門教程

    摘要：本文是一篇簡單的構(gòu)建三維視圖的入門教程，你可以了解到利用創(chuàng)建簡單的三維圖形，并且控制圖形運(yùn)動(dòng)。然后將其加入到中。三創(chuàng)建對象大多數(shù)時(shí)候，我們需要講繪制的圖形整合到一起進(jìn)行控制。在軸上運(yùn)動(dòng)的完整代碼這個(gè)入門教程就到這里了，感謝閱讀。 本文是一篇簡單的webGL+threejs構(gòu)建web三維視圖的入門教程，你可以了解到利用threejs創(chuàng)建簡單的三維圖形，并且控制圖形運(yùn)動(dòng)。若有不足，歡迎指出...

    Profeel 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<