ThreeJS 立方體貼圖

• 2020 年 3 月 12 日
• 筆記

前言

什麼要貼圖？

在上一篇《ThreeJS 掏洞術》中，利用ThreeBSP完成了在『牆』上掏出『門』或『窗戶』洞的效果。但那個所謂的『牆』一點也不像，試想誰家的牆是綠色的呀，而且就算換成其他顏色也是不行的，因為色彩太單調了，實際上在我們現實世界中，物體表面的色彩通常都是豐富的。所以要讓幾何體看起來真實、精緻就需要貼圖。

其實簡單一句話形容就是：就像家裡裝修時要給大白牆貼上壁紙一樣。

那麼本文將『簡單描述』一下給立方體貼圖的過程，我之所以說『簡單描述』是因為這裡涉及的領域比較多，所以文中的內容就不做過多擴展描述了，只簡述關於《ThreeJS 立方體貼圖》的乾貨。

示例

什麼是貼圖？

貼圖學名叫做 Texture Mapping ，譯作 紋理映射、紋理貼圖、材質貼圖。

簡單說就是：把一張圖片貼到幾何體的表面上。

那麼下面開始寫程式碼！

必要操作：使用TextureLoader對象的load函數，將圖片載入為紋理對象，並使用該紋理對象創建一個MeshBasicMaterial (基本材質)。以下素材，下載可以右鍵點擊另存為。

let mesh = new THREE.Mesh(          new THREE.BoxGeometry(300, 300, 300),          new THREE.MeshBasicMaterial( {              map: new THREE.TextureLoader().load('./crate.jpg') }          )      );  scene.add(mesh);

這樣就將圖片覆蓋到了立方體的6個面上，以下是效果圖

如果你想6個面分別貼不同的圖的話也好辦，最簡單的方法是，Mesh構造函數的第二個參數，可以直接傳一個Material數組，所以我們可以創建對應6個面的MeshBasicMaterial數組，那麼現在演示如何將下面6個圖片分別貼到6個面上。

//創建紋理載入器對象  let textureLoader = new THREE.TextureLoader();  let mesh = new THREE.Mesh(      new THREE.BoxGeometry(300, 300, 300),      [          //下標0：右面材質          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_5.jpg')          }),          //下標1：左面材質          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_6.jpg')          }),          //下標2：上面材質          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_7.jpg')          }),          //下標3：下面材質          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_8.jpg')          }),          //下標4：前面材質          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_9.jpg')          }),          //下標5：後面材質          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_10.jpg')          }),      ]  );  scene.add(mesh);

效果如下圖：

本文到此結束，有時間會寫一篇關於UV Mapping的貼圖方式，比這個稍微複雜點，其實也很簡單，今天就先到這裡，歡迎評論，提意見！

轉發請註明本文鏈接。