Three.js Efficiently Mapping Uvs to Plane

Question

I\'m working on a game where there are many walls of the same texture but at different lengths/heights. Currently I am cloning a base texture and setting the repeat values f

Answer 1

You want to be able to modify the UVs of a PlaneGeometry so a repeated texture always renders the same size, regardless of the dimensions of the plane. This is an alternative to setting texture.repeat values.

Here is the pattern to follow:

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