跨合并几何拉伸纹理答案

【问题标题】：Stretching Texture across Merged Geometries跨合并几何拉伸纹理
【发布时间】：2016-09-22 22:07:31
【问题描述】：

我正在建造一个第一人称迷宫 - 迷宫中的每一面墙都是THREE.PlaneGeometry。据我了解，将这些墙全部合并为单个对象是更好的做法。我创建了一个类“墙”，每次添加新的“墙”时都会这样做：

this.geometry.merge(wall.mesh.geometry, wall.mesh.matrix);

添加完所有的墙之后，我创建一个材质+应用一个纹理：

this.material = new THREE.MeshBasicMaterial( { map: this.texture, side: THREE.DoubleSide } ); this.mesh = new THREE.Mesh( this.geometry, this.material );

我遇到的问题是墙壁的宽度并不完全相同，因此纹理映射在合并的地理上变得很时髦（Image Here）。每个平面接收整个纹理并将其拉伸到其尺寸。请记住，所有墙壁都需要相同的纹理，那么将纹理“包裹”在墙壁周围的最佳方式是什么？还是我应该首先以不同的方式建造我的墙？

我也尝试过Three.MultiMaterial(materials) 和THREE.MeshFaceMaterial(materials)（为每面墙提供独特的材料），但它们都严重影响性能。

提前致谢，

快乐的日子，

截图：Maze Image

【问题讨论】：

您必须设置几何图形的 uv 属性，以便相邻平面接触相同的 uv，并且每个平面都有取决于其大小的步...

标签： three.js textures stretching

【解决方案1】：

在每面墙的 geo 的每个 faceVertexUV 上运行一个循环。将每个 UV.x 乘以墙的宽度（消除拉伸/收缩）。为墙壁的 UV.x 添加一个偏移量，该偏移量对应于迄今为止墙壁的宽度总和：

var len = wall.geometry.faceVertexUvs[0].length;
for (var i = 0; i < len; i++){
    for (var j = 0; j < 3; j++){
        wall.geometry.faceVertexUvs[0][i][j].x *= wall.w;
    wall.geometry.faceVertexUvs[0][i][j].x += this.w;
    }
}
this.w += wall.w;

【讨论】：