纹理向下平面（WebGL，Three.JS）

Question

我正在使用three.js。用webGL。我有一个名为support.jpg 100x100的纹理文件。

我正在创建飞机，具有不同的高度和宽度。我需要support.jpg纹理缩放到宽度，然后重复平面。 （见下图）

例如。如果飞机是（高度：10，宽度：10），那么纹理会一次性。如果平面是（高度：100，宽度：10），它将有10个纹理重复10by10。如果平面是（高度：100，宽度：50），它将有2个纹理重复50by50。

问题：如何创建具有正确纹理贴图的平面。

这是我到目前为止所拥有的，但它只渲染单个纹理。 （这是宽度200，高度800）

       function CreateSupportBeam() {

        var mesh, texture, material;

        texture = THREE.ImageUtils.loadTexture("images/support.png");
        material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });

        var uvs = [];
        uvs.push(new THREE.Vector2(0,0));
        uvs.push(new THREE.Vector2(1,0));
        uvs.push(new THREE.Vector2(1,4));
        uvs.push(new THREE.Vector2(0,4));

        var geo = new THREE.PlaneGeometry(200, 800);
        geo.faceVertexUvs[0].push([uvs[0], uvs[1], uvs[2], uvs[3]]);

        mesh = new THREE.Mesh(geo, material);

        scene.add(mesh);
    }

rollercoaster.dickinsonbros.com/＆lt; - 这是我正在进行的项目。

Answer 1

您无需更改UV。

使用如下图案来避免失真，并确保图案重复并从“顶部”开始。

var geometry = new THREE.PlaneGeometry( length, height );

var scale = height / length;
var offset = Math.floor( scale ) - scale;;

var texture = THREE.ImageUtils.loadTexture( ... );

texture.wrapT = THREE.RepeatWrapping;
texture.wrapS = THREE.ClampToEdgeWrapping;

texture.repeat.set( 1, scale );
texture.offset.set( 0, offset );

如果这不完全符合您的要求，请进行试验，直到您按照自己的方式进行试验。

three.js r.66