手镯在线预览案例
本文是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，关于前端交互内容就不做过多描述，你可以自己创建一个按钮测试这个思路。