Three.js初體驗
前言
最近無意中刷到了國外的一個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展示上的功能非常強大，在未來會應用的越來越廣泛。
©版權所有轉載請標明出處！！！