挤压几何 ThreeJS 上的纹理映射答案

【问题标题】：Texture mapping on extrude geometry ThreeJS挤压几何 ThreeJS 上的纹理映射
【发布时间】：2013-01-15 08:04:12
【问题描述】：

我在 ThreeJS 上创建带有拉伸几何的随机形状，现在我想在其上应用纹理，但结果很难看。我不知道如何生成 UVMapping 以正确显示纹理。

在左侧网格中，一个面的纹理不正确，因为该面是平的，我希望纹理不歪斜。

在右边，纹理是旋转的，但我不想要这个结果。

是否有一种自动生成 UVMapping 的方法，以便在这两个网格上获得相同的纹理渲染（Extrude Geometry）？

这是我生成网格的方式：

var points = []

points.push(new THREE.Vector2(-1000, -700));
points.push(new THREE.Vector2(-1000, -300));
points.push(new THREE.Vector2(-300, -300));
points.push(new THREE.Vector2(-300, -500));

shape = new THREE.Shape(points);
var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings),
    texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({
    color: 0xFF00FF,
    map: texture
});

geometry.faceUvs = [[]];
geometry.faceVertexUvs = [[]];

for (var f = 0; f < geometry.faces.length; f++) {

    var faceuv = [
        new THREE.Vector2(0, 1),
        new THREE.Vector2(1, 1),
        new THREE.Vector2(1, 0),
        new THREE.Vector2(0, 0)
    ];

    geometry.faceUvs[0].push(new THREE.Vector2(0, 1));
    geometry.faceVertexUvs[0].push(faceuv);
}

mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [material, new     THREE.MeshBasicMaterial({
    color: 0x000000,
    wireframe: true,
    transparent: true
})]);
mesh.position.z = -100;
mesh.position.y = 200;
scene.add(mesh);

【问题讨论】：

ExtrudeGeometry 为您计算 UV。但是，它计算的 UV 似乎是基于一个假设，即点的坐标介于 0 和 1 之间。您可能需要进行实验，看看这是否正确。
对于平面表面，另请参阅function to computes UVs。

标签： three.js uv-mapping

【解决方案1】：

我找到了一个解决方案，我必须从我的自定义表单中计算 uv。这个网页真的很有用：

http://paulyg.f2s.com/uv.htm

【讨论】：

请在此处发布完整答案，而不仅仅是链接。链接可能会失效。