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

Using multiple textures on different faces of one geometry

本文关键字：纹理 一个 几何体      更新时间：2023-09-26

我对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。我的问题是纹理大小被拉伸到几何体的边缘。

我尝试过使用纹理wrapS/wrapT属性，但没有成功，因为它总是延伸到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像素图像的完整版本。http://angelraposo.appspot.com/images/result.jpg

平面几何体的尺寸无关紧要——只有纵横比才重要，因此图像不会被拉伸。

你有几个选择：

  1. 可以根据需要将平面几何体的每个三角形的UV更改为(0,0)、(0,1)、(1,0)或(1,1)。

  2. 可以为每个纹理设置适当的texture.offset和texture.repeat属性。例如texture.offset.set( 0, 1/3 )和texture.repeat.set( 3, 3 )。

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

three.js r.66

相关文章：