在一个几何体的不同面上使用多个纹理 [英] Using multiple textures on different faces of one geometry
问题描述
我对 Three.js 很陌生，所以我不确定是否可以这样做:
I'm quite new to Three.js so I'm not sure if it's possible to do this:
我想在平面几何图形上显示多个图像(其中一些会出现多次).想象下一个简化的案例:
I want to display multiple images over a plane geometry (some of them will appear multiple times). Imagine the next simplified case:
+---+---+---+
| 1 | 2 | 3 |
+---+---+---+
| 4 | 1 | 6 |
+---+---+---+
| 1 | 1 | 9 |
+---+---+---+
我正在创建带有分区的平面，并将 MeshBasicMaterial(包含在 MeshFaceMaterial 中)应用于其面.每对人脸都分配了一个可用图像，即:
I'm creating the plane with it's divisions and applying a MeshBasicMaterial (contained inside a MeshFaceMaterial) to its faces. Each pair of faces has assigned one of the available images, ie:
- image1 应用于 {0, 1}, {8, 9}, {12, 13}, {14, 15}
- image2 应用于人脸 {2, 3}
- ...
图像正确"出现在正确的位置，但它们的大小不正确.每个平铺方块的大小为 256x256 像素，要显示的每个图像也是 256x256.我的问题是纹理尺寸被拉伸到几何体的边缘.
The images are "correctly" appearing on the right position but their size is not correct. Each tile square is 256x256 pixels size and each image to be displayed is also 256x256. My problem is that the texture size is being streched to the edge of the geometry.
我尝试使用纹理 wrapS/wrapT 属性但没有成功，因为它总是延伸到 768x768(在本例中).
I've tried to play with the texture wrapS/wrapT properties with no luck as it's always stretching out to 768x768 (in this example).
我当前的代码:
// 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 );
是否可以将相同的材质纹理分配给不同的面并保持其当前大小，以便在每个图块上以当前大小显示纹理?
Is it possible to assign the same material texture to different faces and keep their current size, so on each tile the texture is displayed with its current size?
为了更清楚地说明问题，在此结果图像上，我们可以看到相同的纹理应用于中心、左下和右下图块，每个图块都应显示 256x256 像素图像的完整版本.http://angelraposo.appspot.com/images/result.jpg
To make more clear the issue, on this result image we can see that the same texture was applied to the center, left-bottom and right-bottom tiles and each one should be displaying a full version of the 256x256 pixels image. http://angelraposo.appspot.com/images/result.jpg
推荐答案
平面几何的尺寸无关紧要——只有纵横比重要，所以图像不会被拉伸.
The dimensions of your plane geometry are irrelevant -- only the aspect ratio matters, so the images are not stretched.
您有多种选择:
您可以将平面几何体的每个三角形的 UV 更改为
(0,0)、(0,1)、(1,0)或(1,1)视情况而定.
You can change the UVs of each triangle of your plane geometry to be
(0,0),(0,1),(1,0), or(1,1)as appropriate.
您可以为每个纹理设置适当的 texture.offset 和 texture.repeat 属性.例如，texture.offset.set(0, 1/3) 和 texture.repeat.set(3, 3).
You can set the texture.offset and texture.repeat properties as appropriate for each texture. For example, texture.offset.set( 0, 1/3 ) and texture.repeat.set( 3, 3 ).
最后一个简单的选择是只有 9 个平面几何图形，每个几何图形有 2 个三角形面.
A final, easy, option is to just have 9 plane geometries, each with 2 triangular faces.
three.js r.66
three.js r.66
这篇关于在一个几何体的不同面上使用多个纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
