Despite trying various solutions, I am still facing an issue where my textures appear to be stretched or scaled based on the mesh size. In a bid to seek a resolution, here are some key points to note:
- All textures have dimensions of 64x64 pixels
- I have preloaded all textures
- The Web GL renderer is being used
Below is a snippet of 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);
}
However, when I use texture.repeat.set(x , x) with any value for x, the texture seems to vanish and only a flat color is left behind.
Could someone shed light on what might be going wrong in my implementation?