Javascript 在一个几何体的不同面上使用多个纹理

我对Three.js很陌生，所以我不确定是否可以这样做：

我想在平面几何体上显示多个图像（其中一些图像将出现多次）。想象下一个简化的情况：

+---+---+---+  
| 1 | 2 | 3 |  
+---+---+---+  
| 4 | 1 | 6 |  
+---+---+---+  
| 1 | 1 | 9 |  
+---+---+---+  

我正在用它的分割创建平面，并将MeshBasicMaterial（包含在MeshFaceMaterial中）应用于它的面。每对面都指定了一个可用图像，即：

• image1应用于面{0,1}、{8,9}、{12,13}、{14,15}
• 图像2应用于面{2，3}

图像“正确”显示在正确的位置，但其大小不正确。每个平铺方块的大小为256x256像素，要显示的每个图像也为256x256像素。我的问题是纹理大小被拉伸到几何体的边缘

我尝试使用纹理包裹/包裹属性时运气不佳，因为它总是延伸到768x768（在本例中）

我当前的代码：

// TEXTURE LOADING LOOP
// canvas contains a 256x256 image
var texture = new THREE.Texture(canvas);
//My last test was trying to clamp to the edge of the face -> failed
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
texture.needsUpdate = true;
this.materials.push(
    new THREE.MeshBasicMaterial({
        map: texture
    })
);

// LATER, we generate the geometry to display the images
var geometry = new THREE.PlaneGeometry( 256*3, 256*3, 3, 3 );
// assign a material to each face (each face is 2 triangles)
var l = geometry.faces.length;
for( var i = 0; i < l; i+=2 ) {
    // assigned_material contains the index of the material texture to display
    // on each "square"
    geometry.faces[ i ].materialIndex = assigned_material[i];
    geometry.faces[ i+1 ].materialIndex = assigned_material[i];
}
// mesh
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( this.materials ) );
this.scene.add( mesh );

//纹理加载循环
//画布包含一个256x256图像
var纹理=新的三个纹理（画布）；
//我上一次测试是试图夹住脸部边缘->失败
texture.wrapps=texture.wrapT=THREE.claptoedgewrapping；
texture.needsUpdate=true；
这是材料推(
新的三网格基本材料({
贴图：纹理
})
);
//稍后，我们生成几何体以显示图像
变量几何=新的三个平面几何（256*3，256*3，3，3）；
//为每个面指定材质（每个面为2个三角形）
var l=几何体.faces.length；
对于（变量i=0；i

是否可以将同一材质纹理指定给不同的面并保持其当前大小，以便在每个平铺上以其当前大小显示纹理

为了更清楚地说明问题，在这个结果图像上，我们可以看到相同的纹理应用于中间、左下和右下瓷砖，每个瓷砖都应该显示256x256像素图像的完整版本。

---

平面几何体的尺寸是不相关的——只有纵横比重要，因此图像不会拉伸

您有几个选择：

可以根据需要将平面几何图形的每个三角形的UV更改为

（0,0）

、

（0,1）

、

（1,0）

或

（1,1）

您可以设置

纹理。偏移

和

纹理。根据每个纹理的情况重复

属性。例如，

texture.offset.set（0，1/3）

和

texture.repeat.set（3，3）

最后一个简单的选择是只需要9个平面几何体，每个几何体有2个三角形面

---

three.js r.66

完美！这就解决了问题。我使用了以前从未使用过的UV选项，这是学习如何使用它们的一个很好的方法；）完成！谢谢你的帮助；）