How to repeat textures without stretching in Three.js?
No matter what I do, my textures seem to be stretched / scaled to the size of the mesh I'm applying them to. I have read many answers to this question, none of the solutions seem to fix me, so I am posting a new one. A little information,
- My textures are all 64x64 pixels
- I load all my textures
- I am using Web GL renderer
Here is my code
makeTestObject:function()
{
var scope = this,
tileGeometry = new THREE.BoxGeometry(TILE_SIZE , TILE_HEIGHT , TILE_SIZE),
texture = new THREE.Texture(preloadedImageObject),
textureMaterial = new THREE.MeshLambertMaterial({map:texture}),
tile = new THREE.Mesh(tileGeometry , new THREE.MeshFaceMaterial(
[
textureMaterial, // +x
textureMaterial, // -x
textureMaterial, // +y
textureMaterial, // -y
textureMaterial, // +z
textureMaterial // -z
]));
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
tile.position.y = BASE_HEIGHT * 2;
tile.castShadow = true;
tile.receiveShadow = true;
texture.needsUpdate = true;
scope.scene.add(tile);
}
If I do texture.repeat.set(x , x)
and set x
to any value, the texture just disappears and I am left with a flat color.
Any idea what I am doing wrong?
source to share
Ok, so for standard window geometry (square or rectangular) this is the solution:
makeTestObject:function()
{
var scope = this,
tileGeometry = new THREE.BoxGeometry(TILE_SIZE , TILE_HEIGHT , TILE_SIZE),
texture = new THREE.Texture(preloadedImageObject),
textureMaterial = new THREE.MeshLambertMaterial({map:texture}),
tile = new THREE.Mesh(tileGeometry , new THREE.MeshFaceMaterial(
[
textureMaterial, // +x
textureMaterial, // -x
textureMaterial, // +y
textureMaterial, // -y
textureMaterial, // +z
textureMaterial // -z
]));
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
tile.geometry.computeBoundingBox();
var max = tile.geometry.boundingBox.max;
var min = tile.geometry.boundingBox.min;
var height = max.y - min.y;
var width = max.x - min.x;
texture.repeat.set(width / TEXTURE_SIZE , height / TEXTURE_SIZE);
texture.needsUpdate = true;
scope.scene.add(tile);
}
The key is to properly establish the relationship for repeating texture. You can also create a new material for each face instead of referencing the same material object over and over again.
source to share