Three.js를 사용하여 여러면에 걸쳐 텍스처 늘이기

Question

여러면으로 구성된 맞춤형 지오메트리로 Object3D에 텍스처를 적용하려고합니다. 사용자의 관점에서 볼 때 이것은 단일 표면이어야하며 텍스쳐는 측면 비율을 유지하면서 이상적으로 늘어나야합니다. 나는 다양한 질감 설정을 시도했지만 지금까지 운이 없다. 위해서는 http://jsfiddle.net/Immugio/Lg5vbzot/

function render() {    

     renderer.render(scene, camera); 
    };  

    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);  

    var light = new THREE.DirectionalLight(0xffffff); 
    light.intensity = 0.5; 
    light.position.set(0, 1, 1).normalize(); 
    scene.add(light); 
    var ambient = new THREE.AmbientLight(0x777777);   
    scene.add(ambient); 

    var controls = new THREE.OrbitControls(camera); 
    controls.damping = 0.2; 
    controls.addEventListener('change', render);  

    var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

    THREE.ImageUtils.crossOrigin = ''; 
    var textureMaterial = new THREE.MeshPhongMaterial({ 
     map: THREE.ImageUtils.loadTexture('https://dl.dropboxusercontent.com/u/20925853/crate.jpg', null, function() { 
      render(); 
     }) 
    }); 

    var geo = new THREE.Geometry(); 
    geo.vertices = [ 
     new THREE.Vector3(0, 0, 0), 
     new THREE.Vector3(0, 4, 0), 
     new THREE.Vector3(4, 4, 0), 
     new THREE.Vector3(4, 0, 0), 

     new THREE.Vector3(1, 4, 0), 
     new THREE.Vector3(1, 6, 0), 
     new THREE.Vector3(3, 6, 0), 
     new THREE.Vector3(3, 4, 0) 
    ]; 
    geo.faces = [ 
     new THREE.Face3(0, 1, 2), 
     new THREE.Face3(0, 2, 3), 
     new THREE.Face3(4, 5, 6), 
     new THREE.Face3(4, 6, 7) 
    ]; 

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

    geo.faceVertexUvs[0] = []; 
    geo.faceVertexUvs[0][0] = [faceuv[0], faceuv[1], faceuv[2]]; 
    geo.faceVertexUvs[0][1] = [faceuv[0], faceuv[2], faceuv[3]]; 
    geo.faceVertexUvs[0][2] = [faceuv[0], faceuv[1], faceuv[2]]; 
    geo.faceVertexUvs[0][3] = [faceuv[0], faceuv[2], faceuv[3]];    

    geo.computeFaceNormals(); 
    var mesh = new THREE.Mesh(geo, textureMaterial); 

    mesh.rotation.x = Math.PI/180 * 135; 
    mesh.rotation.z = Math.PI/180 * 135; 
    scene.add(mesh); 

    camera.position.z = 10; 

Answer 1

: 나는 JsFiddle에 샘플 코드를 추출했습니다 https://dl.dropboxusercontent.com/u/20925853/combined.jpg

을 :

상단 이미지는 제가 달성하기 위해 노력하고있어 점점 아래 하나있어 무엇인가 여러면에 걸쳐 자외선 차단 기능을 매핑하는 데 필요한 텍스처를 스트레칭합니다.

JsFiddle : http://jsfiddle.net/Lg5vbzot/1/

게시물의 코드는 RepeatWrapping``사용하는 다음 코드

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

    geo.faceVertexUvs[0] = []; 
    geo.faceVertexUvs[0][0] = [faceuv[0], faceuv[1], faceuv[2]]; 
    geo.faceVertexUvs[0][1] = [faceuv[0], faceuv[2], faceuv[3]]; 
    geo.faceVertexUvs[0][2] = [faceuv[4], faceuv[5], faceuv[6]]; 
    geo.faceVertexUvs[0][3] = [faceuv[4], faceuv[6], faceuv[7]];