web前端培訓(xùn)教程分享:Three.js基礎(chǔ)知識(shí),學(xué)習(xí)Three.js需要先了解一下 OpenGL 和 WebGL。OpenGL 是一個(gè)跨平臺(tái)的3D/2D的繪圖標(biāo)準(zhǔn)(規(guī)范),WebGL(Web Graphics Library)是一種3D繪圖協(xié)議。WebGL允許把JavaScript和OpenGL 結(jié)合在一起運(yùn)用,但使用WebGL原生的API來(lái)寫3D程序非常的復(fù)雜,同時(shí)需要相對(duì)較多的數(shù)學(xué)知識(shí)對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)學(xué)習(xí)成本非常高。
WebGL
WebGL是一種Javascript的3D圖形接口,把JavaScript和OpenGL ES 2.0結(jié)合在一起。
OpenGL
OpenGL是開(kāi)放式圖形標(biāo)準(zhǔn),跨編程語(yǔ)言、跨平臺(tái),Javascript、Java 、C、C++ 、 python 等都能支持OpenGL ,OpenGL的Javascript實(shí)現(xiàn)就是WebGL。OpenGL ES 2.0是OpenGL的子集,針對(duì)手機(jī)、游戲主機(jī)等嵌入式設(shè)備而設(shè)計(jì)。
Canvas
Canvas是HTML5的畫布元素,在使用Canvas時(shí),需要用到Canvas的上下文,可以用2D上下文繪制二維的圖像,也可以使用3D上下文繪制三維的圖像,其中3D上下文就是指WebGL。
Three.js是什么?
官網(wǎng):Javascript 3D library(JavaScript 3D 庫(kù))。
Three.js是基于webGL的封裝的一個(gè)易于使用且輕量級(jí)的3D庫(kù),Three.js對(duì)WebGL提供的接口進(jìn)行了非常好的封裝,簡(jiǎn)化了很多細(xì)節(jié),大大降低了學(xué)習(xí)成本,極大地提高了性能,功能也非常強(qiáng)大。
用戶不需要詳細(xì)地學(xué)習(xí) WebGL,就能輕松創(chuàng)作出三維圖形,是前端開(kāi)發(fā)者研發(fā)3D繪圖的主要工具。
微信小游戲跳一跳也是在基于Three.js研發(fā)的,Threejs現(xiàn)在是獨(dú)領(lǐng)風(fēng)騷。
簡(jiǎn)言之:Three.js就是能夠?qū)崿F(xiàn)3D效果的JS庫(kù)
OpenGL、WebGL、Canvas、Three.js四者關(guān)系
OpenGL:3D繪圖標(biāo)準(zhǔn)
WebGL:OpenGL + JavaScript
Canvas:WebGL + Canvas 2D
Three.js:一個(gè)基于WebGL封裝的庫(kù)
類似于:
ECMAscript:腳本語(yǔ)言規(guī)范
JavaScript:腳本語(yǔ)言
jQuery: 一個(gè)基于JavaScript封裝的庫(kù)
簡(jiǎn)單一句話概括:WebGL和Three.js的關(guān)系,相當(dāng)于JavaScript和jQuery的關(guān)系。
Three.js應(yīng)用場(chǎng)景有哪些?
Web 3D游戲、3D物體模型展示、數(shù)據(jù)可視化、Web VR、其它特殊效果展示。
web前端培訓(xùn)教程分享:Three.js基礎(chǔ)知識(shí),以上就是詳細(xì)介紹了,如果您對(duì)web前端技術(shù)非常感興趣,可以來(lái)了解一下千鋒教育提供的web前端培訓(xùn)課程,千鋒教育在全國(guó)20多所城市均設(shè)有教學(xué)基地,歡迎同學(xué)們前來(lái)咨詢了解。