仅在侧面垂直重复纹理

Question

我有一个需要纹理的立方体几何体，

在立方体的顶部 - 需要是一个图像

在立方体的每一侧 - 需要是基于立方体高度垂直重复的第二个图像

这是纹理：

这就是我需要的：

这就是我到目前为止所做的：three.js/texture1

任何想法如何实现我的需要，但尽可能使用一种材料和一些面孔？

感谢。

我的代码：

function create_geometry() {

    var geometry = new THREE.Geometry();

    var w = 0.5;
    var h = 1;

    geometry.vertices.push(
        new THREE.Vector3(w, h, w),
        new THREE.Vector3(w, h, -w),
        new THREE.Vector3(w, 0, w),
        new THREE.Vector3(w, 0, -w),
        new THREE.Vector3(-w, h, -w),
        new THREE.Vector3(-w, h, w),
        new THREE.Vector3(-w, 0, -w),
        new THREE.Vector3(-w, 0, w)     
        );

    geometry.faces.push(

        // wall
        new THREE.Face3(0, 2, 1),
        new THREE.Face3(2, 3, 1),

        // wall
        new THREE.Face3(4, 6, 5),
        new THREE.Face3(6, 7, 5),

        // wall             
        new THREE.Face3(5, 7, 0),
        new THREE.Face3(7, 2, 0),

        // wall
        new THREE.Face3(1, 3, 4),
        new THREE.Face3(3, 6, 4),       

        //roof
        new THREE.Face3(4, 5, 1),
        new THREE.Face3(5, 0, 1),

        );

    geometry.computeFaceNormals();
    geometry.faceVertexUvs[0] = [];
    geometry.faces[0].materialIndex = 0;
    geometry.faces[1].materialIndex = 0;
    geometry.faces[2].materialIndex = 0;
    geometry.faces[3].materialIndex = 0;
    geometry.faces[4].materialIndex = 0;
    geometry.faces[5].materialIndex = 0;
    geometry.faces[6].materialIndex = 0;
    geometry.faces[7].materialIndex = 0;
    geometry.faces[8].materialIndex = 0;
    geometry.faces[9].materialIndex = 0;

    var roof = [
        new THREE.Vector2(0.0,1.0), 
        new THREE.Vector2(0.0,0.5), 
        new THREE.Vector2(1.0,0.5), 
        new THREE.Vector2(1.0,1.0), 
        ];          

    var wall = [

        new THREE.Vector2(0.0,0.5), 
        new THREE.Vector2(0.0,0.0), 
        new THREE.Vector2(1.0,0.0), 
        new THREE.Vector2(1.0,0.5), 
        ];              

    // wall 
    geometry.faceVertexUvs[0][0] = [ wall[0], wall[1], wall[3] ];
    geometry.faceVertexUvs[0][1] = [ wall[1], wall[2], wall[3] ];

    // wall 
    geometry.faceVertexUvs[0][2] = [ wall[0], wall[1], wall[3] ];
    geometry.faceVertexUvs[0][3] = [ wall[1], wall[2], wall[3] ];

    // wall
    geometry.faceVertexUvs[0][4] = [ wall[0], wall[1], wall[3] ];
    geometry.faceVertexUvs[0][5] = [ wall[1], wall[2], wall[3] ];

    // wall
    geometry.faceVertexUvs[0][6] = [ wall[0], wall[1], wall[3] ];
    geometry.faceVertexUvs[0][7] = [ wall[1], wall[2], wall[3] ];

    // roof
    geometry.faceVertexUvs[0][8] = [ roof[0], roof[1], roof[3] ];
    geometry.faceVertexUvs[0][9] = [ roof[1], roof[2], roof[3] ];

    var matrix = new THREE.Matrix4();
    //matrix.makeRotationX ( (270 * Math.PI)/180 );
    geometry.applyMatrix( matrix );

    geometry.uvsNeedUpdate = true;      

    return geometry;

    }

var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(800,800);
var container = document.getElementById("container");
container.appendChild(renderer.domElement);     

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45,800/800,1,1000);
camera.position.set(0,10,20);
scene.add(camera);  

var controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.minDistance = 15; 
controls.maxDistance = 100;

var stats = new Stats();
container.appendChild( stats.dom ); 

var rendererStats = new THREEx.RendererStats();
rendererStats.domElement.style.position = 'absolute';
rendererStats.domElement.style.right    = '0px';
rendererStats.domElement.style.top      = '0px';
document.body.appendChild( rendererStats.domElement );  

// plane
var plane = new THREE.Mesh( 
    new THREE.PlaneGeometry( 80, 80, 1 ), 
    new THREE.MeshBasicMaterial( {color: 0x333333, side: THREE.DoubleSide} ) 
    );
plane.rotation.x = (90 * Math.PI)/180;
scene.add(plane);   

//

var geometry = create_geometry();
var texture = new THREE.TextureLoader().load( "texture1.png" );
var material = new THREE.MeshBasicMaterial({ map:texture });

for(var i=0; i<10; i++) {
    var cube = new THREE.Mesh( geometry, material );
    cube.position.x = i*1.5 - 5*1.5;
    //cube.position.y = Math.random()*80 - 40;
    cube.scale.y = i + 1;

    scene.add( cube );  
    }


function render() {

    controls.update();
    stats.update();
    rendererStats.update(renderer);
    renderer.render( scene, camera );
    requestAnimationFrame( render );    
    }

render();