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