Question

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

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

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

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

image1应用于面{0,1}，{8,9}，{12,13}，{14,15}
image2应用于面{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

Answer 1

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

您有几种选择：

您可以根据需要将平面几何体的每个三角形的UV更改为(0,0)，(0,1)，(1,0)或(1,1)。
您可以根据每个纹理设置texture.offset和texture.repeat属性。例如，texture.offset.set( 0, 1/3 )和texture.repeat.set( 3, 3 )。
最后一个简单的选择就是只有9个平面几何图形，每个几何图形都有2个三角形面。

three.js r.66

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

1 个答案: