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);

你可能会说这个问题是，为了创造一个额外的面孔，这不是一个大问题，但我真的想避免这种情况。最重要的是，如果平面长度不能被其高度整除，则纹理将拉伸/压缩。此外，此处的平面高度段是固定的，会造成限制。

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

我是新手弄乱Uv的，必须有一种有效的方法让我的墙壁看起来不荒谬而不会炸毁记忆，对吗？

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

Answer 1

您希望能够修改PlaneGeometry的UV，以便重复纹理始终呈现相同的大小，而不管平面的尺寸如何。这是设置texture.repeat值的替代方法。

以下是要遵循的模式：

// 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;

three.js r.69

Three.js有效地将Uv映射到平面

1 个答案: