虛擬展廳漫游技術(shù)--threejs概覽

  1. 首頁(yè)
  2. 行業(yè)新聞
  3. 虛擬展廳漫游技術(shù)--threejs概覽
由 Jyadmin 提交于 周五, 05/21/2021 - 13:03

 

在web前端三維可視化上，Three.js是國(guó)內(nèi)應(yīng)用得最為廣泛的三維引擎。Three.js是基于原生WebGL封裝運(yùn)行的三維引擎。

Three.js能做些什么？

①物聯(lián)網(wǎng)3D可視化。隨著物聯(lián)網(wǎng)的發(fā)展，工業(yè)、建筑等各個(gè)領(lǐng)域與物聯(lián)網(wǎng)相關(guān)Web項(xiàng)目網(wǎng)頁(yè)交互界面都會(huì)呈現(xiàn)出3D化的趨勢(shì)；
 
②產(chǎn)品在線(xiàn)預(yù)覽。隨著WebGL技術(shù)的持續(xù)推廣，5G技術(shù)的持續(xù)推廣，各種產(chǎn)品在線(xiàn)3D展示將會(huì)變得越來(lái)越普及；
 
③數(shù)據(jù)可視化。數(shù)據(jù)可視化主要是兩方面，一方面是海量超大數(shù)據(jù)的可視化，另一方面是與3D相關(guān)的數(shù)據(jù)可視化；
 
④H5、微信小游戲。如微信里跳一跳小游戲就是使用Three.js引擎開(kāi)發(fā)的；
 

⑤WebVR。實(shí)現(xiàn)在線(xiàn)鏈接VR瀏覽；

threejs三大組件

這三大組件分別是相機(jī)（Camera）、渲染器（Renderer）和場(chǎng)景（Scene），這三個(gè)組件是創(chuàng)建3D圖形的必備組件。其中：

  • 場(chǎng)景用來(lái)容納圖形元素。場(chǎng)景相當(dāng)于宇宙，而圖形元素就是星星，圖形元素只有添加到場(chǎng)景中，其坐標(biāo)、大小等才有意義。

  • 相機(jī)的作用是定義可視域，即確定哪些圖形元素是可見(jiàn)的。

  • 渲染器則負(fù)責(zé)用如何渲染出圖像，是使用WegGL還是Canvas。

threejs基本圖形元素

所謂基本圖形元素，就是threejs中的圖形顯示，基本與這些對(duì)象相關(guān)。那么，理解了這些對(duì)象，就能知道如何在threejs中表示圖形。threejs的基本圖形元素都定義在Objects下，如下圖：

圖片
 

這些類(lèi)又可以分成下面4個(gè)小類(lèi)別：

點(diǎn)、線(xiàn)、面

首先，所有圖形都是由點(diǎn)、線(xiàn)或面構(gòu)成，所以有：

  • Points：點(diǎn)或點(diǎn)云，可以用點(diǎn)或點(diǎn)云表示圖形

  • Line/LineSegments：直線(xiàn)和虛線(xiàn)，可以用線(xiàn)或線(xiàn)團(tuán)表示圖形

  • Mesh：網(wǎng)格模型，可以用若干三角面表示圖形

點(diǎn)、線(xiàn)、面都可以聚集到一起組成一個(gè)立體圖形，也可以單獨(dú)一個(gè)，作為一個(gè)2D圖形，可以看【點(diǎn)云表示圖形】【線(xiàn)團(tuán)表示圖形】【網(wǎng)格模型表示圖形】這幾個(gè)例子來(lái)直觀了解。

精靈

Sprite在threejs中定義為“一個(gè)永遠(yuǎn)面向相機(jī)的平面，通常用來(lái)加載紋理”，其最重要的特點(diǎn)是永遠(yuǎn)面向相機(jī)，這在某些時(shí)候很有用。要想一睹精靈的風(fēng)采，可以打開(kāi)【精靈】，注意一下，所有圖形都是面向相機(jī)的。

骨骼

骨骼相當(dāng)于圖形的控制單元，控制骨骼運(yùn)動(dòng)，就能帶動(dòng)骨骼上附著的圖形的運(yùn)動(dòng)。如果你不理解什么是骨骼，可以看看騰訊開(kāi)發(fā)的一個(gè)骨骼游戲框架【AlloyStick】,按JJKL,看看火柴人的運(yùn)動(dòng)。threejs的骨骼例子則看【這里】。
在threejs中，與骨骼相關(guān)的類(lèi)有：

  • Bone：骨骼

  • Skeleton：骨架，由多根骨骼組成

  • SkinnedMesh：皮膚，附著在骨骼上的圖形

其它類(lèi)

  • lensFlare：光暈

  • LOD：細(xì)節(jié)級(jí)別

  • Group:組，可以將多個(gè)對(duì)象打包成一個(gè)組，便可統(tǒng)一操作。

其實(shí)，在Threejs中能看到的東西就是這些了，然后這些東西的組成也有很大的變化，從而演化成一個(gè)變化多端的系統(tǒng)。

幾何形狀和材質(zhì)

threejs使用Geometry定義物體的幾何形狀，其實(shí)Geometry的核心就是點(diǎn)集，之所以有這么多的Geometry，是為了更方便的創(chuàng)建各種形狀的點(diǎn)集。
threejs通過(guò)Material定義物體的材質(zhì)。下面是創(chuàng)建一個(gè)圖形的過(guò)程的例子：

 

  1. //1、定義形狀

  2. let geometry = new THREE.BoxGeometry(10,10,10);

  3. //2、定義材質(zhì)

  4. let meshMaterial = new THREE.MeshBasicMaterial({color:0xff0000});

  5. let lineMaterial = new THREE.LineBasicMaterial({color:0x934894});

  6. let pointMaterial = new THREE.PointMaterial({color:0x738938});

  7.  

  8. //3、創(chuàng)建圖形

  9. let mesh = new THREE.Mesh(geometry,meshMaterial); //創(chuàng)建一個(gè)用網(wǎng)格模型表示的形狀

  10. let line = new THREE.Line(geometry,lineMaterial); //創(chuàng)建一個(gè)用線(xiàn)團(tuán)表示的形狀

  11. let point = new THREE.Points(geometry,pointMateril); //創(chuàng)建一個(gè)用點(diǎn)云表示的形狀

 

看了上面的例子，你應(yīng)該明白，圖形的幾何形狀（Geometry）是與表示方法無(wú)關(guān)的，你可以使用點(diǎn)、線(xiàn)或面來(lái)表示一個(gè)幾何形狀。

幾何形狀（Geometry）

Geometry其實(shí)就是點(diǎn)的集合，Geometrys分類(lèi)下放的各種幾何形狀都是各種圖形表示方法通用的：
圖片
這些類(lèi)提供便捷方法來(lái)創(chuàng)建代表各種形狀的頂點(diǎn)的集合。

材質(zhì)（Material）

材質(zhì)與圖形的類(lèi)型是相關(guān)的，點(diǎn)使用PointsMaterial，線(xiàn)使用LineXXXMaterial，網(wǎng)格使用MeshXXXMaterial，精靈使用SpriteMaterial等等。

紋理

紋理是用來(lái)表現(xiàn)圖形的一些微小細(xì)節(jié)的。理論上講，一個(gè)圖形所有的細(xì)節(jié)都可以用點(diǎn)線(xiàn)面表示出來(lái)，但是這么做需要巨量的點(diǎn)線(xiàn)面，計(jì)算速度十分的慢，所以，在細(xì)節(jié)上，可以使用紋理。
在threejs中使用Texture來(lái)表示紋理，紋理可以從圖片中加載，也可以從canvas中加載，所以，紋理能表示的圖像很豐富。