一古毛、概述
????????最近在調(diào)研組內(nèi)3D機(jī)房可視化的實(shí)現(xiàn)墙贱，之前和大家分享過three.js的入門操作，通過three.js我們也能制作模型斋荞，但是當(dāng)我們想制作復(fù)雜的模型時(shí)，通過three.js來制作的話虐秦，就顯得繁瑣譬猫，所以這時(shí)候我們一般選擇建模軟件來制作我們需要的模型讯檐，然后通過three.js來操作該模型。本文將從如何選擇建模軟件染服、如何加載3D模型和如何操作3D模型三個(gè)方面和大家分享别洪。
? ? ? ? ? ?demo的效果圖如下：
二、選擇建模軟件
????? 因?yàn)槲覀儾皇菍I(yè)的建模人員柳刮，只是為了實(shí)現(xiàn)功能制作自己需要的模型挖垛，選擇軟件時(shí)要求滿足自己工作需要的同時(shí)，容易上手也是一個(gè)重要的參考條件秉颗。
????? 本文將介紹三種常見的建模軟件：SkethUp痢毒、Rhino和Blender。
? ? ? ?SketchUp
????????SketchUp是我調(diào)研的第一款軟件蚕甥，優(yōu)點(diǎn)是簡單易用哪替，非常容易上手。通過簡單的推拉就可以制作一個(gè)立方體菇怀，面的切割等操作都很方便凭舶，可以說是拿來即用。但是缺點(diǎn)也很明顯爱沟，支持導(dǎo)出的模型格式很少帅霜，做出來的模型渲染也不夠細(xì)致，給人很粗糙的感覺呼伸。下面是SketchUp的操作界面身冀。
? ??????Rhino
????????相對SketchUp，Rhino軟件各方面都專業(yè)很多括享，Rhino是由美國Robert McNeel公司于1998年推出的一款基于NURBS為主三維建模軟件也叫犀牛軟件搂根。相對于SketchUp，Rhino渲染出的模型更精細(xì)铃辖，對于曲面等的繪制功能更全面剩愧，支持導(dǎo)出的模型格式也更多，當(dāng)然入門的門檻也相對較高澳叉，但是關(guān)于Rhino入門視頻資料很多，足夠自學(xué)后完成常用的模型沐悦。除此之外Rhion軟件運(yùn)行時(shí)較耗內(nèi)存成洗，電腦性能不好的話，體驗(yàn)較差藏否，視頻教學(xué)可參考：http://www.xuexiniu.com/kc/70/
????????操作界面如下：
? ??????????Blender
? ? ?????????在調(diào)研過程中瓶殃，本來已經(jīng)決定選擇Rhino作為研發(fā)過程中的建模軟件，但是在嘗試導(dǎo)出glb格式的模型時(shí)副签，發(fā)現(xiàn)犀牛不支持遥椿，并且找不到合適的插件去實(shí)現(xiàn)基矮，這是我發(fā)現(xiàn)了Blender這個(gè)軟件，這個(gè)軟件有犀牛的所有優(yōu)點(diǎn)冠场，同時(shí)該軟件是開源的家浇，各種插件較全面，擴(kuò)展性很好碴裙，軟件相較犀牛也更小钢悲，即使電腦性能差，也不會(huì)特別卡舔株，當(dāng)然該軟件的入門門檻和犀牛差不多莺琳，初次接觸的話會(huì)感覺Blender的操作界面有點(diǎn)兒不習(xí)慣，多使用幾次就會(huì)適應(yīng)载慈。唯一缺點(diǎn)是教學(xué)資料相較于Rhino要少一些惭等，視頻教學(xué)可參考：https://tutorial.blendercn.org/?p=3782
操作界面：
????????????大家可以根據(jù)自己實(shí)際項(xiàng)目需要選擇軟件，我最終選擇了Blender作為研發(fā)過程中的建模軟件办铡。
三辞做、加載3D模型
????????目前，3D模型的格式有成千上萬種選擇料扰，但每一種格式都具有不同的目的凭豪、用途以及復(fù)雜性。Three.js也提供了豐富的模型加載器晒杈，大家可以根據(jù)項(xiàng)目需要選擇合適的模型格式嫂伞，我選擇的是glb格式的模型，本文也主要向大家分享該模型的加載與操作方式拯钻。
1帖努、引用模型加載器
????????很簡單，就是引入對應(yīng)的js文件粪般，具體的文件大家可以到github上自己下載拼余。不同的代碼引入方式不同，實(shí)現(xiàn)代碼如下亩歹，可以根據(jù)自己需要選擇：
2匙监、加載模型
????????加載模型也很簡單，不同的加載器有不同的語法小作，對應(yīng)去網(wǎng)上搜一下就可以知道亭姥，這里展示的是glb格式的模型加載，代碼如下：
? ? ? ? ? ? ?唯一需要注意的是瀏覽器不能直接引入外部文件顾稀，可以將模型文件放到服務(wù)器上或者自己本地搭建簡單的服務(wù)达罗。
四、操作模型
????????通過Three.js操作模型的方式也有很多静秆，但是資料相對都很少粮揉，我選擇THREE.Raycaster（射線檢測）方式操作模型巡李。
????????原理是THREE.Raycaster對象從屏幕上的點(diǎn)擊位置向場景中發(fā)射一束光線。光線穿過的模型即為選中的模型扶认，會(huì)返回一個(gè)模型數(shù)組侨拦，數(shù)組元素按距離排序，距離越近越靠前蝠引，數(shù)組的第一個(gè)模型阳谍，即為距離最近的模型。
方法講解：
????1螃概、Raycaster(origin, direction, near, far)
????參數(shù)：
????origin – 射線起點(diǎn)向量
????direction – 射線的方向向量
????near – 所有返回結(jié)果應(yīng)該比near遠(yuǎn)矫夯，near不能為負(fù)，默認(rèn)為0
????far – 所有返回結(jié)果應(yīng)該比far近吊洼，默認(rèn)值為無窮大
????2训貌、 setFromCamera(cords,camera)
????參數(shù)：
????coords – 鼠標(biāo)的二維坐標(biāo)
????camera – 射線起點(diǎn)處相機(jī)，即把射線起點(diǎn)設(shè)置在該相機(jī)位置處
????3冒窍、intersectObject(object,recursive, optionalTarget)
????參數(shù)：
????object - 檢測與射線相交的物體
????recursive - 若為 true 則檢查后代對象递沪，默認(rèn)值為false
????optionalTarget - （可選參數(shù)）用來設(shè)置方法返回的設(shè)置結(jié)果。若不設(shè)置則返回一個(gè)實(shí)例化的數(shù)組综液。如果設(shè)置款慨，必須在每次調(diào)用之前清除這個(gè)數(shù)組（例如，array.length= 0;)
????主要代碼：
? ? ? ?需要注意的是谬莹，導(dǎo)入模型時(shí)需要在回調(diào)函數(shù)中打印一下加載進(jìn)來的模型是什么對象檩奠，模型對象有可能是Mesh或者Group，不排除還有Scene附帽、Object3D等埠戳，此時(shí)我們不能盲目的把整個(gè)scene.children中的東西都放到raycaster.intersectObjects()來直接進(jìn)行檢測，因?yàn)檎麄€(gè)scene.children中可能有一些scene或者是three.js不能識別的對象蕉扮，所以我們需要先對加載進(jìn)來的對象進(jìn)行處理整胃。
五、總結(jié)
? ? ? ?俗話說萬事開頭難喳钟，以上分享的內(nèi)容每一步都不難屁使，但是在找資料和整理資料這個(gè)過程中是需要耗費(fèi)大量時(shí)間的，尤其是three.js相關(guān)資料相對較少奔则，希望本篇分享更夠幫助你在學(xué)習(xí)3D可視化項(xiàng)目入門階段少走彎路蛮寂，節(jié)約時(shí)間。
