Three.js 高效地将 Uvs 映射到平面

Question

我正在开发一个游戏，其中有许多相同纹理但长度/高度不同的墙壁。目前我正在克隆一个基础纹理并为每面墙设置重复值。这会在内存中创建许多纹理。

我想要做的是改变平面 uvs 以正确适应纹理。我对此进行了尝试，得出了一些结果。

            var X = 2000;
            var Y = 1000;

            var seg = Math.ceil(X/Y);

            var wallgeo = new THREE.PlaneGeometry(X,Y,seg,1);

            var uvs = [];
            for(var i=0,len=wallgeo.faces.length;i<len;i+=2){
                uvs.push([new THREE.Vector2(0,1),new THREE.Vector2(0,0),new THREE.Vector2(1,1)]);
                uvs.push([new THREE.Vector2(0,0),new THREE.Vector2(1,0),new THREE.Vector2(1,1)]);               
            }       

            wallgeo.faceVertexUvs = [uvs];
            wallgeo.uvsNeedUpdate = true;

            var walltex = DDSLoader.load('materialmaptextures/21_2048.dds');
            var wallmat = new THREE.MeshPhongMaterial({map:walltex, transparent:true, wireframe:false});
            wall = new THREE.Mesh(wallgeo,wallmat);
            wall.position.set(0,Y/2,-300);

            scene.add(wall);

正如您可能会说的那样，这样做的问题是创建了一个额外的面孔，这不是什么大不了的事，但我真的很想避免这种情况。最重要的是，如果平面长度不能被其高度整除，则纹理将拉伸(stretch)/压缩。此外，其中的平面高度段是固定的，导致限制。

我不太关心创建额外的面孔。这是必要的吗？一张脸的每个三角形可以有多个紫外线吗？需要吗？

我是新来弄乱紫外线，必须有一种有效的方法让我的墙壁看起来不荒谬而不会破坏内存，对吧？

演示:http://www.titansoftime.com/uv.php

Answer 1

您希望能够修改 PlaneGeometry 的 UV因此，无论平面的尺寸如何，重复的纹理总是呈现相同的尺寸。这是设置 texture.repeat 的替代方法值(value)观。

这是要遵循的模式:

// geometry
var width = 20;  // width of plane in world units
var height = 10; // height of plane in world units
var size = 5;    // texture block size in world units

var w = width / size;
var h = height / size;
var geometry = new THREE.PlaneGeometry( width, height, 1, 1 );

var uvs = geometry.faceVertexUvs[ 0 ];
uvs[ 0 ][ 0 ].set( 0, h );
uvs[ 0 ][ 1 ].set( 0, 0 );
uvs[ 0 ][ 2 ].set( w, h );
uvs[ 1 ][ 0 ].set( 0, 0 );
uvs[ 1 ][ 1 ].set( w, 0 );
uvs[ 1 ][ 2 ].set( w, h );

// texture
var texture = THREE.ImageUtils.loadTexture( "..." );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

三.js r.69