javascript - Three.js 中的可平铺纹理

Question

您好，我已经为我的 3D 对象创建了简单的渲染器(由 php 生成)。

我成功渲染了所有对象，但我遇到了一些与纹理有关的大问题。

这是我的纹理:(512x512)

我想在我的对象上使用它，但这是发生了什么:

我不知道如何以 1:1 的比例显示未拉伸(stretch)的漂亮网格。

我想我需要以某种方式计算重复次数。有什么想法吗？

这就是我设置纹理的方式:

var texture = THREE.ImageUtils.loadTexture(basePath + '/images/textures/dt.jpg', new         THREE.UVMapping());
texture.wrapT = THREE.RepeatWrapping;
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.set(1,1);
stairmaterials[0] = new THREE.MeshBasicMaterial(
    {
        side: THREE.DoubleSide,
        map: texture
    });

我尝试更改重复值以实现 1:1 而非拉伸(stretch)比例，但我根本没有成功。我的情况越来越糟。

我还使用以下算法来计算顶点 UVS:

geom.computeBoundingBox();

var max = geom.boundingBox.max;
var min = geom.boundingBox.min;

var offset = new THREE.Vector2(0 - min.x, 0 - min.z);
var range = new THREE.Vector2(max.x - min.x, max.z - min.z);

geom.faceVertexUvs[0] = [];
var faces = geom.faces;

for (i = 0; i < geom.faces.length; i++) {

    var v1 = geom.vertices[faces[i].a];
    var v2 = geom.vertices[faces[i].b];
    var v3 = geom.vertices[faces[i].c];

    geom.faceVertexUvs[0].push([
        new THREE.Vector2(( v1.x + offset.x ) / range.x, ( v1.z + offset.z ) / range.z),
        new THREE.Vector2(( v2.x + offset.x ) / range.x, ( v2.z + offset.z ) / range.z),
        new THREE.Vector2(( v3.x + offset.x ) / range.x, ( v3.z + offset.z ) / range.z)
    ]);

}

geom.uvsNeedUpdate = true;

Answer 1

您的网格是导入的还是生成的？

您正在遍历每个三 Angular 形，并进行某种缩放/投影。如果所有这些框都是单个网格，这将在一定程度上起作用，您将按相同比例缩放每个框。它们也存在于相同的模型空间中，所以是的，它会被适本地缩放和对齐。

如果它们不是同一个网格，它可能会失败。

您正在循环的顶点存在于模型空间中。这些盒子中的每一个，都可以以自己的比例存在，在自己任意的局部位置。因此，您必须使用对象的 .modelMatrix 将它们转换为世界空间。当您应用此矩阵时，您会将所有这些顶点带入同一空间。尝试在没有边界框的情况下执行此操作，或者只从一个对象中获取边界框，您将看到统一的比例和正确的对齐方式。

尽管您进行的是二维投影，但您无法使用此算法让 map 显示为 3d。您可以检查每个三 Angular 形的方向，然后选择不同的投影方向。