產品三維模型在線預覽

產品在線展現案例預覽

1. 玉鐲在線預覽：http://www.yanhuangxueyuan.co...
2. 汽車在線預覽：http://www.yanhuangxueyuan.co...

Web3D技術歷史

可經過插件或WebGL技術實現Web3D，在線網頁上預覽操做三維模型。

插件

最先實現Web3D技術全部技術方案，基本都要依賴特定插件來實現，渲染效率、渲染質量都有些問題，並未全面流行起來。本篇文章既然不涉及使用插件方式實現三維模型在線預覽，就不在展開詳述歷史上須要插件實如今線預覽三維模型的相關技術。

WebGL技術

說到WebGL，最容易聯想到的是OpenGL或OpenGL ES。隨着大多數瀏覽器對WebGL技術的支持，瀏覽器不須要安裝任何插件也能夠實現三維模型的在線預覽和操做。

WebGL應用

WebGL技術能夠用於實現產品在線預覽、WebVR、Web全景、室內裝修在線預覽、場景漫遊、三維建模應用、3D導航...，本文主要科普基於WebGL技術實現產品的在線預覽與交互，好比常見的數碼產品、珠寶首飾、轎車等。

基於WebGL技術實現產品三維模型在線預覽

若是直接經過原生WebGL API和着色器語言來實現相對來講比較麻煩，一般來講須要經過一款三維引擎來實現，若是你是前端工程師你雖然學習JavaScript和HTML，可是你在作一些前端項目的時候會藉助jquery、vuejs等庫或框架，對於3D開發也是同樣，須要一個封裝了WebGL的庫或引擎。

Three.js引擎

WebGL有多款三維引擎，國內應用最多的就是Three.js，Threejs的中文資料教程相對來講比較多，同時企業招聘WebGL工程師的時候，一般會要求你掌握Threejs三維引擎。
three.js的更多教程關注郭隆邦技術博客。

技術流程

Threejs實現產品三維模型在線預覽，一般來講須要美術和技術相互配合來完成。

1.美術

3D美術藉助3dmax或Blender或其餘三維軟件進行三維建模，渲染烘培，而後導出包含幾何體數據和材質數據文件，材質一般有一些貼圖。

2.技術

WebGL程序員經過threejs三維引擎的加載器加載解析美術導出的模型文件。

真實度要求

產品的展現渲染效果，在真實度方面，每每和遊戲或動漫不一樣，對要展現的三維模型一般要求真實度要高，既然要展現一個產品必要但願一個網頁展品要和真實的產品儘量同樣，質感很強，這樣才能起到更好的營銷效果。

渲染效果

模型幾何體信息建立

所謂模型幾何體信息，也就是頂點數據。雖然threejs有不少繪製幾何體的API，可是一個複雜的曲面，若是不是比較規則的球體或圓環，很難用程序去寫，一般須要美術須要用可視化的方式建模，也就是使用三維軟件，至於軟件選擇，看美術須要。

材質參數設置兩種方式

渲染效果程序員能夠經過threejs設置材質參數實現，也能夠美術來設置幷包含在導出的三維模型文件中。程序可能並不擅長渲染效果設置，或者說在threejs設置材質參數遠沒有三維模型中設置方便，一般來講是美術來設置決定決定渲染效果的材質參數，好比透明度、高光、金屬度等參數。

光照參數設置

若是想有更好的渲染效果，一般須要設置光照，若是光照設置的參數不恰當，渲染效果也會很大程度上打折扣，光照能夠程序員來設置，也可美術設置。若是美術設置了光照信息，要注意導出三維模型時，模型文件格式的選擇。主要有些三維模型格式並不會包含光照信息，好比stl和obj，而glTF、FBX等格式就能夠包含光照信息。

動畫效果

一些產品可能會有一些動畫動做，好比轎車、冰箱的開門動做。一般須要美術在三維軟件中設置動畫，導出模型後，程序員能夠經過threejs的幀動畫模塊相關API解析播放這些開關門動做。要注意的是，選擇能包含動畫信息的三維模型格式，好比glTF、FBX、threejs格式，若是選擇obj話，只能展現靜態模型。

次時代或PBR流程

一般遊戲領域的3D美術會談到「次時代」或「PBR」的概念，你能夠理解爲一種建模流程。不一樣的流程導出的模型材質有所不一樣，須要threejs中不一樣的材質去解析。

次時代

傳統的方式就是建立次時代模型，對應threejs中的材質是高光網格材質對象MeshPhongMaterial，一般貼圖文件包含顏色貼圖、法線貼圖和高光貼圖。

PBR

PBR相比次時代技術是一種更新的模型技術，對應threejs材質是物理網格材質MeshPhysicalMaterial或標準網格材質MeshStandardMaterial。一般貼圖包含顏色貼圖、法線貼圖、金屬度貼圖、粗糙度貼圖。

比較

高光網格材質MeshPhongMaterial具備高光顏色和強度屬性，而物理網格材質MeshPhysicalMaterial沒有高光相關屬性，對應的是是金屬度和粗糙度屬性。就貼圖而言，高光強度對應的是高光貼圖，金屬度對應的是金屬度貼圖，粗糙度對應的是粗糙度貼圖。

貼圖

顏色貼圖

顏色貼圖經過uv座標映射在網格模型表面，若是整個網格模型都是同一種顏色，這種狀況，美術不導出顏色貼圖也沒有關係，若是一個網格模型表面不一樣的區域顏色不一樣，那就有必要使用顏色貼圖。

法線貼圖

法線貼圖主要做用是能夠減小模型文件的體積，本質就是減小頂點數量，減小頂點數量能夠下降文件大小，提升網絡傳播速度，減小CPU頂點相關的計算量。對於曲面不多的模型，主要以平面構成，有沒有法線貼圖無所謂，若是是產品表面是曲面，讓美術烘培法線貼圖是很必要的。

團隊

UI和前端

完成一個網頁效果，一般須要UI先完成設計，而後前端使用代碼實現。目前大多數的互聯網公司都是有前端工程師和UI設計師的。對Web3D而言，則須要懂3D美術，和懂WebGL的技術。

美術

美術方面，能夠找一個懂UI設計的3D美術，短時間內培養UI去學習3D美術，不太靠譜。若是資金充足能夠專門招聘一個UI設計師和一個3D美術，一個作3D模型，一個作UI設計。

技術

對於產品展現而言須要的WebGL知識並非很是深刻，若是公司想節約成本，徹底是能夠培養前端去學習WebGL和threejs。

交互

爲了更好的效果，一個產品可能不只僅實如今線預覽，還須要設置一些交互，這樣用戶能夠在線遠程體驗產品。好比一個產品有多種顏色系列，那麼能夠經過UI按鈕經過點擊來改變模型顏色；好比一個教程須要開門動做，能夠設置一個UI按鈕進行開關操做。

加載進度條

模型相比普通的網頁文件比較大，目前技術和硬件條件下，還須要必定加載等待時間，爲了更新的用戶體驗，能夠經過一個進度條組件可視化的顯示模型加載進度。