Three.js texture alignment/scaling with proctree.js

Question

I'm trying to render a model created by SnappyTree/Proctree ( http://www.snappytree.com/ ).

I found this question, that showed how to render the trunk geometry using Three.js instead of proctree.js's author's GLGE project. I've got that working now but the texture on the twigs (branches) doesn't align properly. Any ideas how to make the texture fit on?

http://jsfiddle.net/nhspjkb4/

This is how the material is created:

  // 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
  });

This is how it renders:

With a solid color, it's clear that the branch vertices/faces are in the correct places:

Each branch should look like the texture image:

A reasonable guess is your faceVertexUvs are not correct for the branches. I would expect the branch uv coords to be 0 or 1, only. — WestLangley

Max Smolens Max Smolens · Accepted Answer · 2017-12-28T01:40:52

Nice tree.

To fix the texturing, first update the proctree.js to three.js conversion code to use the tree.uvsTwig array, instead of tree.UV, for the twigs:

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]);
    }));
});

Then, enable alpha testing for the material:

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

Finally, remove the texture scaling (twigTexture.repeat.set(...)).

Fiddle: http://jsfiddle.net/nhspjkb4/6/.

Three.js texture alignment/scaling with proctree.js

1 Answers