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

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

您希望能够修改a的UV,PlaneGeometry因此无论平面的尺寸如何,重复纹理始终呈现相同的大小.这是设置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