Three.js中的花木纹理

Question

您好我已经为我的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;

Answer 1

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

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

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

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

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