Three.js 텍스처 정렬/proctree.js와의 스케일링

Question

SnappyTree/Proctree (http://www.snappytree.com/)로 만든 모델을 렌더링하려고합니다.

proctree.js의 작성자 GLGE 프로젝트 대신 Three.js를 사용하여 트렁크 지오메트리를 렌더링하는 방법을 보여준 this question이 발견되었습니다. 지금은 작동하지만 나뭇 가지 (나뭇 가지)에 텍스처가 제대로 정렬되지 않습니다. 텍스처를 어떻게 만들 수있는 아이디어가 있습니까?

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

이 그것을 렌더링 방법은 다음과 같습니다 :

http://jsfiddle.net/nhspjkb4/

이 물질이 생성되는 방식입니다 단색으로

, 그것은 분명 그 분기 정점/얼굴이 올바른 위치에 있습니다.

(210)

각 지점은 텍스처 이미지처럼 보일 것입니다 :

Answer 1

니스 트리. 이어서,

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

을 소재의 알파 테스트 활성화 :

는 나뭇 위해 대신 tree.UV으로 먼저 tree.uvsTwig 어레이를 사용 three.js를 전환 코드에 proctree.js 업데이트, 텍스쳐를 해결하려면 :

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

마지막으로 텍스처 크기 조정 (twigTexture.repeat.set(...))을 제거합니다.

피들 : http://jsfiddle.net/nhspjkb4/6/.