如何在不拉伸Three.js的情况下重复纹理？
如何在不拉伸Three.js的情况下重复纹理？
提问于 2014-10-14 05:30:21
无论我做什么，我的纹理似乎被拉伸/缩放到我正在应用它们的网格的大小。我读过很多关于这个问题的答案，似乎没有一个解决方案对我来说是固定的，所以我发布了一个新的答案。只是一些信息，
- 我的纹理都是64x64像素
- 我在预装我所有的纹理
- 我正在使用Web渲染器
这是我的密码
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);
}如果我做了texture.repeat.set(x , x)，并将x设置为任何类型的值，纹理就会消失，剩下的是平坦的颜色。
知道我做错了什么吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-10-15 04:56:57
好的，对于标准的盒子几何(正方形或长方形)，解决方案是这样的；
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);
}关键是正确设置纹理重复使用的比率。您还可能希望为每一张脸创建一个新的材料，而不是一遍又一遍地引用相同的材料对象。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26353251
复制相关文章
相似问题
腾讯云开发者
