前言
最近無意中刷到了國外的一個3D模型網站（https://sketchfab.com），被里面各種各樣的模型吸引了。
於是就有了想試試在自己的網頁上把模型加載出來的想法，這需要借助一個強大的且好用的web3D加載引擎-------Three.js，（中文文檔：http://www.webgl3d.cn/Three.js）。
那么Three.js是什么呢？
官方給出的定義是，Three.js是基於原生WebGL封裝運行的三維引擎，在所有WebGL引擎中，Three.js是國內文資料最多、使用最廣泛的三維引擎。
在瀏覽器不支持WebGL技術的時代，如果你想在網頁上展示一款產品往往是通過2D圖片的形式實現。
如果想3D展示一個產品，往往依賴於OpenGL技術，比如通過unity3D或ue4開發一個桌面應用，這樣做往往很難隨意傳播，需要用戶下載程序很麻煩，如果是通過Web的方式展示產品的三維模型，一個超鏈接就可以隨意傳播。
隨着WebGL技術的持續推廣，5G技術的持續推廣，各種產品在線3D展示將會變得越來越普及，目前 three.js 可以應用在很多的領域，具體的就不一一贅述了，這一點官方文檔已經講述的很清楚了。
PS:Three.js底層是WebGL，當然這也不意味着，學習threejs之前，一定要先學習WebGL。一方面簡單的項目，你可以不用學習WebGL， 另一個學習方面WebGL對圖形學方面理論要求高，可以選擇先學習Three.js，等需要學習WebGL的時候，在學習也不晚。
准備工作
下面我們就結合着文檔做一個簡單的demo吧。既然要做模型的3D網頁渲染展示，我們就需要一個模型文件。我們進入到之前提到過的模型網站去挑選一個自己喜歡的模型下載下來(這里面有付費的模型，如果喜歡一些付費的自己可以隨意購買)。
我選擇了一個免費的悍馬汽車模型，模型文件的格式上，我選擇了GITF格式的，后面會使用到three.js官方封裝的GITF格式的加載器。
項目開始
簡單介紹一下項目結構，如下圖所示
其中three.js也可使用cdn公開的加速版，就可以不用下載下來了
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
模型加載器是從官方的GitHub上找的：
https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/GLTFLoader.js
相機控制器也是從官方的GitHub找的：
https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js
有了這幾個文件我們就可以准備編寫了
首先我們需要一個web頁面去集成並呈現模型相關的文件代碼入下（indexs.html）：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 body{ 10 margin: 0; 11 } 12 </style> 13 </head> 14 <body> 15 <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script> 16 <script src="GLTFLoader.js"></script> 17 <script src="OrbitControls.js" ></script> 18 <script src="app.js"></script> 19 </body> 20 </html>
然后就是構建我們的app.js初始化函數相關的內容了，具體代碼入下：
/* @scene：場景 @camera：相機 @spotLight：場景光源 @renderer：模型加載器 */ let scene,camera,renderer,spotLight; const init =()=>{ //創建場景（場景就像一個看不到邊際的宇宙空間） scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); // 渲染器 renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMapEnabled = true; //console.log(renderer.domElement) document.body.appendChild(renderer.domElement); //相機 （我們在場景的觀察位置） const aspect = window.innerWidth / window.innerHeight; camera = new THREE.PerspectiveCamera(60, aspect, 0.01, 5000); camera.rotation.y = (90 / 180) * Math.PI; camera.position.set(4.8, 3); //場景光源 （場景的光源位置，類似聚光燈，或者宇宙中的太陽） const ambientLight = new THREE.AmbientLight(0xffffff); scene.add(ambientLight) //燈光屬性 spotLight = new THREE.SpotLight(0xffffff); spotLight.castShadow = true; spotLight.shadowCameraVisible = true; spotLight.position.set(10,10,10); //設置陰影貼圖精度 spotLight.shadowMapWidth = spotLight.shadowMapHeight = 1024*4; scene.add(spotLight); //相機控制（讓相機的視角可以根據鼠標的拖拽自由切換） const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.addEventListener("change", renderer); //模型加載器 const loader = new THREE.GLTFLoader(); //bmw_735i hummer_h2 loader.load("./model/hummer_h2/scene.gltf",(result) =>{ scene.add(result.scene); animate(); //renderer.render(scene,camera); }); }; //使得相機在切換視角時不斷更新當前視角下的模型姿態 const animate = () =>{ renderer.render(scene,camera); requestAnimationFrame(animate) } //最后初始化 init();
呈現效果
整體來看，呈現的效果還是不錯的。
最后
這只是Three.js的冰山一角，僅僅是功能的初步嘗鮮，如果想深入學習，還需要補充模型建模相關的知識，以及對three.js的深入理解與實踐。
three.js在 WEB 3d展示上的功能非常強大，在未來會應用的越來越廣泛。