[英]How do I repeat textures without stretching in Three.js?
No matter what I do, my textures seem to be getting stretched / scaled to the size of the mesh I am applying them to. 无论我做什么,我的纹理似乎都被拉伸/缩放到我正在应用它们的网格的大小。 I've read a lot of answers to this question, none of the solutions seem to have fixed things for me so I'm posting a new one. 我已经阅读了很多关于这个问题的答案,没有一个解决方案似乎对我有固定的东西,所以我发布了一个新的解决方案。 Just a bit of info, 只是一点信息,
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 kind of value, the texture just seems to disappear and I'm left with a flat colour. 如果我做texture.repeat.set(x , x)
并将x
设置为任何类型的值,纹理似乎消失了,我留下了一个平面颜色。
Any idea what I am doing wrong? 知道我做错了什么吗?
Okay, so for a standard box geometry (square or rectangular) the solution is this; 好的,对于标准的盒子几何形状(正方形或矩形),解决方案是这样的;
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 setting the ratios correctly for the repetition of the texture. 关键是正确设置比率以重复纹理。 You also might want to create a new material for each face rather than reference the same material object over and over. 您可能还想为每个面创建一个新材质,而不是一遍又一遍地引用相同的材质对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.