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

【问题标题】：Texturing down plane (WebGL, Three.JS)平面下纹理（WebGL，Three.JS）
【发布时间】：2014-04-02 20:16:33
【问题描述】：

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

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

例如。如果平面是 (height:10, width: 10)，它会在贴合后贴图。如果平面是（高度：100，宽度：10），它将有 10 个重复 10×10 的纹理。如果平面是（高度：100，宽度：50），它将有 2 个重复 50×50 的纹理。

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

这是我目前所拥有的，但它只渲染一个纹理。（这是一个宽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/

【问题讨论】：

更新了第一篇文章，使其更加清晰。但问题是我如何让纹理在平面上重复，但缩放到该平面的宽度。

标签： three.js webgl

【解决方案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

【讨论】：

是的，这就是我要找的。感谢为此工作了很长一段时间，尝试了另一种方法来获得结果。谢谢！你大满。