使用proctree.js进行Three.js纹理对齐/缩放

Question

我试图渲染由SnappyTree / Proctree（http://www.snappytree.com/）创建的模型。

我找到了this question，它展示了如何使用Three.js而不是proctree.js作者的GLGE项目渲染树干几何体。我现在已经工作了，但树枝（树枝）上的纹理没有正确对齐。任何想法如何使纹理适合？

http://jsfiddle.net/nhspjkb4/

这是材料的创建方式：

  // Load texture from data URI in js fiddle
  var twigTexture = getTexture('branch');

  // Scaling the texture seems to help
  twigTexture.wrapS = THREE.RepeatWrapping;
  twigTexture.wrapT = THREE.RepeatWrapping;
  twigTexture.repeat.set( 1/2.5, 1/2.5 );

  // immediately use the texture for material creation
  var twigMaterial = new THREE.MeshLambertMaterial({
        map: twigTexture,
        transparent: true,
    side: THREE.DoubleSide
  });

这是它呈现的方式：

使用纯色，可以清楚地看到分支顶点/面位于正确的位置：

每个分支应该看起来像纹理图像：

Answer 1

漂亮的树。

要修复纹理，首先将proctree.js更新为three.js转换代码，以便使用tree.uvsTwig数组而不是tree.UV作为树枝：

tree[isTwigs ? 'facesTwig' : 'faces'].forEach(function(f) {
    var uv = isTwigs ? tree.uvsTwig : tree.UV;
    output.faces.push(new THREE.Face3(f[0], f[1], f[2]));
    output.faceVertexUvs[0].push(f.map(function(v) {
        return new THREE.Vector2(uv[v][0], uv[v][1]);
    }));
});

然后，为材质启用alpha测试：

var twigMaterial = new THREE.MeshLambertMaterial({
    map: twigTexture,
    side: THREE.DoubleSide,
    alphaTest: 0.5
});

最后，删除纹理缩放（twigTexture.repeat.set(...)）。

小提琴：http://jsfiddle.net/nhspjkb4/6/。