摘要：次時代傳統的方式就是創建次時代模型，對應中的材質是高光網格材質對象，通常貼圖文件包含顏色貼圖法線貼圖和高光貼圖。

玉鐲在線預覽：http://www.yanhuangxueyuan.co...

汽車在線預覽：http://www.yanhuangxueyuan.co...

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

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

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

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

如果直接通過原生WebGL API和著色器語言來實現相對來說比較麻煩，通常來說需要通過一款三維引擎來實現，如果你是前端工程師你雖然學習JavaScript和HTML，但是你在做一些前端項目的時候會借助jquery、vuejs等庫或框架，對于3D開發也是一樣，需要一個封裝了WebGL的庫或引擎。

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

Threejs實現產品三維模型在線預覽，通常來說需要美術和技術相互配合來完成。

3D美術借助3dmax或Blender或其他三維軟件進行三維建模，渲染烘培，然后導出包含幾何體數據和材質數據文件，材質通常有一些貼圖。

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

產品的展示渲染效果，在真實度方面，往往和游戲或動漫不同，對要展示的三維模型通常要求真實度要高，既然要展示一個產品必要希望一個網頁展品要和真實的產品盡可能一樣，質感很強，這樣才能起到更好的營銷效果。

所謂模型幾何體信息，也就是頂點數據。雖然threejs有很多繪制幾何體的API，但是一個復雜的曲面，如果不是比較規則的球體或圓環，很難用程序去寫，通常需要美術需要用可視化的方式建模，也就是使用三維軟件，至于軟件選擇，看美術需要。

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

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

一些產品可能會有一些動畫動作，比如轎車、冰箱的開門動作。通常需要美術在三維軟件中設置動畫，導出模型后，程序員可以通過threejs的幀動畫模塊相關API解析播放這些開關門動作。要注意的是，選擇能包含動畫信息的三維模型格式，比如glTF、FBX、threejs格式，如果選擇obj話，只能展示靜態模型。

通常游戲領域的3D美術會談到“次時代”或“PBR”的概念，你可以理解為一種建模流程。不同的流程導出的模型材質有所不同，需要threejs中不同的材質去解析。

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

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

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

顏色貼圖通過uv坐標映射在網格模型表面，如果整個網格模型都是同一種顏色，這種情況，美術不導出顏色貼圖也沒有關系，如果一個網格模型表面不同的區域顏色不同，那就有必要使用顏色貼圖。

法線貼圖主要作用是可以減少模型文件的體積，本質就是減少頂點數量，減少頂點數量可以降低文件大小，提高網絡傳播速度，減少CPU頂點相關的計算量。對于曲面很少的模型，主要以平面構成，有沒有法線貼圖無所謂，如果是產品表面是曲面，讓美術烘培法線貼圖是很必要的。

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

美術方面，可以找一個懂UI設計的3D美術，短期內培養UI去學習3D美術，不太靠譜。如果資金充足可以專門招聘一個UI設計師和一個3D美術，一個做3D模型，一個做UI設計。

對于產品展示而言需要的WebGL知識并不是非常深入，如果公司想節約成本，完全是可以培養前端去學習WebGL和threejs。

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

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