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，关于前端交互内容就不做过多描述，你可以自己创建一个按钮测试这个思路。