在three.js中纹理映射不同的对象答案

【问题标题】：texture mapping different objects in three.js在three.js中纹理映射不同的对象
【发布时间】：2014-02-15 10:10:15
【问题描述】：

我们正在研究产品设计师项目。设计师准备好了。

我想用 three.js 做 3d 预览结果。

我们如何在手机壳的一侧进行纹理处理？或者我们可以边界纹理映射吗？

OBJLoader 版本： http://www.shopilife.com/baskiburada/viewer/viewer_4.html

而且有些 obj 文件无法纹理化。错误是“GL_INVALID_OPERATION：glDrawElements：尝试访问属性 2 中超出范围的顶点” http://www.shopilife.com/baskiburada/viewer/viewer2.html

【问题讨论】：

您的几何体需要在 faceVertexUvs[ 0 ] 中使用 UV 以避免错误。

标签： three.js texture-mapping render-to-texture

【解决方案1】：

首先，关于手机壳背面与正面的重新纹理处理。这里的方法是在模型本身上分离 UV 坐标。这样你就有了两组材质/纹理/UV。然后在运行时使用MeshFaceMaterial 加载它们以将这两种材料加载到一个数组中，如下所示：

materialArray.push(THREE.BasicMeshMaterial({color: 0xff0000})); //use whatever Material type you'd like of course
materialArray.push(THREE.BasicMeshMaterial({color: 0x0000ff}));
var multipleMaterial = new THREE.MeshFaceMaterial(materialArray);
phoneCaseMesh= new THREE.Mesh( geometry, multipleMaterial );

然后，当您想切换一个时，您可以抓取网格并将映射更改为所需的一侧，例如：

phoneCaseMesh.material.materials[1].map = THREE.ImageUtils.loadTexture( 'newtexture.jpg' );

其次，关于第二个样本的错误，WestLangley 是正确的，因为 OBJ 文件没有要映射到的 UV 坐标，因此在应用纹理时索引超出范围。如果您查看两个 OBJ 文件，您的 iphone4.obj 具有 vt 实体，而 untitled.obj 只是 v 和 f。希望有帮助

【讨论】：