產(chǎn)品在線展示案例預(yù)覽
- 玉鐲在線預(yù)覽：http://www.yanhuangxueyuan.com/3D/yuzhuo.html
- 汽車在線預(yù)覽：http://www.yanhuangxueyuan.com/3D/car.html
Web3D技術(shù)歷史
可通過(guò)插件或WebGL技術(shù)實(shí)現(xiàn)Web3D笛臣，在線網(wǎng)頁(yè)上預(yù)覽操作三維模型栅干。
插件
最早實(shí)現(xiàn)Web3D技術(shù)所有技術(shù)方案，基本都要依賴特定插件來(lái)實(shí)現(xiàn)捐祠，渲染效率、渲染質(zhì)量都有些問(wèn)題桑李，并未全面流行起來(lái)踱蛀。本篇文章既然不涉及使用插件方式實(shí)現(xiàn)三維模型在線預(yù)覽窿给，就不在展開(kāi)詳述歷史上需要插件實(shí)現(xiàn)在線預(yù)覽三維模型的相關(guān)技術(shù)。
WebGL技術(shù)
說(shuō)到WebGL率拒，最容易聯(lián)想到的是OpenGL或OpenGL ES崩泡。隨著大多數(shù)瀏覽器對(duì)WebGL技術(shù)的支持，瀏覽器不需要安裝任何插件也可以實(shí)現(xiàn)三維模型的在線預(yù)覽和操作猬膨。
WebGL應(yīng)用
WebGL技術(shù)可以用于實(shí)現(xiàn)產(chǎn)品在線預(yù)覽角撞、WebVR、Web全景勃痴、室內(nèi)裝修在線預(yù)覽谒所、場(chǎng)景漫游、三維建模應(yīng)用沛申、3D導(dǎo)航...劣领，本文主要科普基于WebGL技術(shù)實(shí)現(xiàn)產(chǎn)品的在線預(yù)覽與交互，比如常見(jiàn)的數(shù)碼產(chǎn)品铁材、珠寶首飾尖淘、轎車等。
基于WebGL技術(shù)實(shí)現(xiàn)產(chǎn)品三維模型在線預(yù)覽
如果直接通過(guò)原生WebGL API和著色器語(yǔ)言來(lái)實(shí)現(xiàn)相對(duì)來(lái)說(shuō)比較麻煩著觉，通常來(lái)說(shuō)需要通過(guò)一款三維引擎來(lái)實(shí)現(xiàn)村生，如果你是前端工程師你雖然學(xué)習(xí)JavaScript和HTML，但是你在做一些前端項(xiàng)目的時(shí)候會(huì)借助jquery饼丘、vuejs等庫(kù)或框架趁桃，對(duì)于3D開(kāi)發(fā)也是一樣，需要一個(gè)封裝了WebGL的庫(kù)或引擎葬毫。
Three.js引擎
WebGL有多款三維引擎镇辉，國(guó)內(nèi)應(yīng)用最多的就是Three.js，Threejs的中文資料教程相對(duì)來(lái)說(shuō)比較多贴捡，同時(shí)企業(yè)招聘WebGL工程師的時(shí)候忽肛，通常會(huì)要求你掌握Threejs三維引擎。
three.js的更多教程關(guān)注郭隆邦技術(shù)博客烂斋。
技術(shù)流程
Threejs實(shí)現(xiàn)產(chǎn)品三維模型在線預(yù)覽屹逛，通常來(lái)說(shuō)需要美術(shù)和技術(shù)相互配合來(lái)完成。
1.美術(shù)
3D美術(shù)借助3dmax或Blender或其他三維軟件進(jìn)行三維建模汛骂，渲染烘培罕模，然后導(dǎo)出包含幾何體數(shù)據(jù)和材質(zhì)數(shù)據(jù)文件，材質(zhì)通常有一些貼圖帘瞭。
2.技術(shù)
WebGL程序員通過(guò)threejs三維引擎的加載器加載解析美術(shù)導(dǎo)出的模型文件淑掌。
真實(shí)度要求
產(chǎn)品的展示渲染效果，在真實(shí)度方面蝶念，往往和游戲或動(dòng)漫不同抛腕，對(duì)要展示的三維模型通常要求真實(shí)度要高芋绸，既然要展示一個(gè)產(chǎn)品必要希望一個(gè)網(wǎng)頁(yè)展品要和真實(shí)的產(chǎn)品盡可能一樣，質(zhì)感很強(qiáng)担敌，這樣才能起到更好的營(yíng)銷效果摔敛。
渲染效果
模型幾何體信息創(chuàng)建
所謂模型幾何體信息，也就是頂點(diǎn)數(shù)據(jù)全封。雖然threejs有很多繪制幾何體的API马昙，但是一個(gè)復(fù)雜的曲面，如果不是比較規(guī)則的球體或圓環(huán)刹悴，很難用程序去寫行楞，通常需要美術(shù)需要用可視化的方式建模，也就是使用三維軟件颂跨，至于軟件選擇敢伸，看美術(shù)需要。
材質(zhì)參數(shù)設(shè)置兩種方式
渲染效果程序員可以通過(guò)threejs設(shè)置材質(zhì)參數(shù)實(shí)現(xiàn)恒削，也可以美術(shù)來(lái)設(shè)置并包含在導(dǎo)出的三維模型文件中池颈。程序可能并不擅長(zhǎng)渲染效果設(shè)置，或者說(shuō)在threejs設(shè)置材質(zhì)參數(shù)遠(yuǎn)沒(méi)有三維模型中設(shè)置方便钓丰，通常來(lái)說(shuō)是美術(shù)來(lái)設(shè)置決定決定渲染效果的材質(zhì)參數(shù)躯砰，比如透明度、高光携丁、金屬度等參數(shù)琢歇。
光照參數(shù)設(shè)置
如果想有更好的渲染效果，通常需要設(shè)置光照梦鉴，如果光照設(shè)置的參數(shù)不恰當(dāng)李茫，渲染效果也會(huì)很大程度上打折扣，光照可以程序員來(lái)設(shè)置肥橙，也可美術(shù)設(shè)置魄宏。如果美術(shù)設(shè)置了光照信息，要注意導(dǎo)出三維模型時(shí)存筏，模型文件格式的選擇宠互。主要有些三維模型格式并不會(huì)包含光照信息，比如stl和obj椭坚，而glTF予跌、FBX等格式就可以包含光照信息。
動(dòng)畫效果
一些產(chǎn)品可能會(huì)有一些動(dòng)畫動(dòng)作善茎，比如轎車券册、冰箱的開(kāi)門動(dòng)作。通常需要美術(shù)在三維軟件中設(shè)置動(dòng)畫，導(dǎo)出模型后汁掠，程序員可以通過(guò)threejs的幀動(dòng)畫模塊相關(guān)API解析播放這些開(kāi)關(guān)門動(dòng)作略吨。要注意的是，選擇能包含動(dòng)畫信息的三維模型格式考阱，比如glTF、FBX鞠苟、threejs格式乞榨，如果選擇obj話，只能展示靜態(tài)模型当娱。
次時(shí)代或PBR流程
通常游戲領(lǐng)域的3D美術(shù)會(huì)談到“次時(shí)代”或“PBR”的概念吃既，你可以理解為一種建模流程。不同的流程導(dǎo)出的模型材質(zhì)有所不同跨细，需要threejs中不同的材質(zhì)去解析鹦倚。
次時(shí)代
傳統(tǒng)的方式就是創(chuàng)建次時(shí)代模型，對(duì)應(yīng)threejs中的材質(zhì)是高光網(wǎng)格材質(zhì)對(duì)象MeshPhongMaterial冀惭，通常貼圖文件包含顏色貼圖震叙、法線貼圖和高光貼圖。
PBR
PBR相比次時(shí)代技術(shù)是一種更新的模型技術(shù)散休，對(duì)應(yīng)threejs材質(zhì)是物理網(wǎng)格材質(zhì)MeshPhysicalMaterial或標(biāo)準(zhǔn)網(wǎng)格材質(zhì)MeshStandardMaterial媒楼。通常貼圖包含顏色貼圖、法線貼圖戚丸、金屬度貼圖划址、粗糙度貼圖。
比較
高光網(wǎng)格材質(zhì)MeshPhongMaterial具有高光顏色和強(qiáng)度屬性限府，而物理網(wǎng)格材質(zhì)MeshPhysicalMaterial沒(méi)有高光相關(guān)屬性夺颤，對(duì)應(yīng)的是是金屬度和粗糙度屬性。就貼圖而言胁勺，高光強(qiáng)度對(duì)應(yīng)的是高光貼圖世澜，金屬度對(duì)應(yīng)的是金屬度貼圖，粗糙度對(duì)應(yīng)的是粗糙度貼圖姻几。
貼圖
顏色貼圖
顏色貼圖通過(guò)uv坐標(biāo)映射在網(wǎng)格模型表面宜狐，如果整個(gè)網(wǎng)格模型都是同一種顏色，這種情況蛇捌，美術(shù)不導(dǎo)出顏色貼圖也沒(méi)有關(guān)系抚恒，如果一個(gè)網(wǎng)格模型表面不同的區(qū)域顏色不同，那就有必要使用顏色貼圖络拌。
法線貼圖
法線貼圖主要作用是可以減少模型文件的體積俭驮，本質(zhì)就是減少頂點(diǎn)數(shù)量，減少頂點(diǎn)數(shù)量可以降低文件大小，提高網(wǎng)絡(luò)傳播速度混萝，減少CPU頂點(diǎn)相關(guān)的計(jì)算量遗遵。對(duì)于曲面很少的模型，主要以平面構(gòu)成逸嘀，有沒(méi)有法線貼圖無(wú)所謂车要，如果是產(chǎn)品表面是曲面，讓美術(shù)烘培法線貼圖是很必要的崭倘。
團(tuán)隊(duì)
UI和前端
完成一個(gè)網(wǎng)頁(yè)效果翼岁，通常需要UI先完成設(shè)計(jì)，然后前端使用代碼實(shí)現(xiàn)司光。目前大多數(shù)的互聯(lián)網(wǎng)公司都是有前端工程師和UI設(shè)計(jì)師的琅坡。對(duì)Web3D而言，則需要懂3D美術(shù)残家，和懂WebGL的技術(shù)榆俺。
美術(shù)
美術(shù)方面，可以找一個(gè)懂UI設(shè)計(jì)的3D美術(shù)坞淮，短期內(nèi)培養(yǎng)UI去學(xué)習(xí)3D美術(shù)茴晋，不太靠譜。如果資金充足可以專門招聘一個(gè)UI設(shè)計(jì)師和一個(gè)3D美術(shù)碾盐，一個(gè)做3D模型晃跺，一個(gè)做UI設(shè)計(jì)。
技術(shù)
對(duì)于產(chǎn)品展示而言需要的WebGL知識(shí)并不是非常深入毫玖，如果公司想節(jié)約成本掀虎，完全是可以培養(yǎng)前端去學(xué)習(xí)WebGL和threejs。
交互
為了更好的效果付枫，一個(gè)產(chǎn)品可能不僅僅實(shí)現(xiàn)在線預(yù)覽烹玉，還需要設(shè)置一些交互，這樣用戶可以在線遠(yuǎn)程體驗(yàn)產(chǎn)品阐滩。比如一個(gè)產(chǎn)品有多種顏色系列二打，那么可以通過(guò)UI按鈕通過(guò)點(diǎn)擊來(lái)改變模型顏色；比如一個(gè)教程需要開(kāi)門動(dòng)作掂榔，可以設(shè)置一個(gè)UI按鈕進(jìn)行開(kāi)關(guān)操作继效。
加載進(jìn)度條
模型相比普通的網(wǎng)頁(yè)文件比較大，目前技術(shù)和硬件條件下装获，還需要一定加載等待時(shí)間瑞信，為了更新的用戶體驗(yàn)，可以通過(guò)一個(gè)進(jìn)度條組件可視化的顯示模型加載進(jìn)度穴豫。
