一个几何形状的不同面

我很新的使用多重纹理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

来源

2014-04-09 Angel

完美！修复它。我使用了UV选项，因为我之前没有使用它，这是学习如何使用它们的好方法;） – Angel

完成！谢谢您的帮助 ;） – Angel

您的平面几何图形的尺寸是不相关的 - 只有纵横比很重要，所以图像没有拉伸。

您有几种选择：

你可以改变你的平面几何的每个三角形的乌布苏为(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

来源

2014-04-09 16:08:04 WestLangley

一个几何形状的不同面

回答

相关问题