Three.js эффективно отображает ультрафиолеты на плоскости

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

Проблемы с этим, как вы, вероятно, можете сказать, состоят в том, что для одного дополнительного лица созданы, а не огромные сделки, но я действительно хотел бы избежать этого. Что наиболее важно, если длина плоскостей не делится равномерно по высоте, текстура будет растягиваться / сжиматься. Кроме того, сегменты высоты самолетов в этом фиксированы, вызывая ограничения.

Я не очень озабочен созданием дополнительных лиц. Это необходимо? Может ли одно лицо иметь более одного ув в каждом треугольнике? Это нужно?

Я плохо знаком с Уфом, должен быть эффективный способ заставить мои стены не выглядеть абсурдными, не взорвав память, верно?

Демо: http://www.titansoftime.com/uv.php

Answer 1

Вы хотите быть в состоянии изменить 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