Three.js 中的可平铺纹理答案

【问题标题】：Tileable texture in Three.jsThree.js 中的可平铺纹理
【发布时间】：2014-07-29 04:41:27
【问题描述】：

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

我已成功渲染所有对象，但我在纹理方面遇到了一些大问题。

这是我的纹理：(512x512)

我想在我的对象上使用它，但是会发生这种情况：

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

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

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

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 而非拉伸配给，但我根本没有成功。我都变得越来越糟了。

我还使用以下算法来计算顶点 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;

【问题讨论】：

你的 UV 可以大于 1——它们只会包裹。考虑将 UV 设置为随每个面的尺寸缩放。这样就不会有拉伸。然后使用texture.repeat 放大你的纹理。
谢谢。我会尝试，但我不确定我是否理解“考虑将 UV 设置为与每个面的尺寸成比例。这样就不会有拉伸。”正确。
例如，如果一个大小为 width x height 的矩形面由两个三角形组成，则一个三角形的 UV 可能是 (0, 0)、(width, 0) 和 (width, height)。

标签： javascript three.js

【解决方案1】：

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

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

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

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

您将无法使用此算法让地图以 3d 显示，但您正在执行 2d 投影。您可以检查每个三角形的方向，然后选择不同的投影方向。

【讨论】：