Three.js玉鐲在線預覽案例

手鐲在線預覽案例

本文是Three.js電子書的14.5節

在線預覽產品的時候，一個產品可能會提供不同的系列，比如顏色不同、造型款式不同。本節課的玉鐲案例模型提供了三種顏色款式，不同的顏色款式本質上就是網格模型的顏色貼圖.map不同。

設置紋理貼圖

model.obj文件中已經包含紋理映射的UV座標數據，只要給模型顏色貼圖屬性.map直接賦值即可。

/**
 * OBJ文件加載  只加載obj文件中的幾何信息，不加載材質文件.mtl
 */
var loader = new THREE.OBJLoader();
loader.load('./model.obj',function (obj) {
  // 控制檯查看返回結構：包含一個網格模型Mesh的組Group
  // console.log(obj);
  //加載紋理貼圖texture1.png
  var texture = new THREE.TextureLoader().load('texture1.png');
  // 玉鐲模型材質設置.map屬性值
  obj.children[0].material= new THREE.MeshBasicMaterial({
    map:texture,//設置顏色紋理貼圖
  })
  scene.add(obj);
  obj.children[0].scale.set(5,5,5);//網格模型縮放
})

切換顏色

模型提供了texture1.png、texture2.png和texture3.png三張貼圖，上面代碼加載了texture1.png作爲顏色貼圖。

你可以在上面代碼.load()回調函數中插入下面語句，給玉鐲設置其它的顏色款式。

// 更換紋理貼圖
var texture = new THREE.TextureLoader().load('texture2.png');
obj.children[0].material.map=texture

實際開發的時候，可能會通過前端UI進行顏色交互(顏色交互體驗)，其實實現也比較簡單，比如一個按鈕表示綠色，前端代碼只要給該按鈕綁定一個函數，函數中執行代碼mesh.material.map=Texture改變顏色貼圖屬性.map的值即可。不過本節課主要是講解Threejs，關於前端交互內容就不做過多描述，你可以自己創建一個按鈕測試這個思路。