gpt4 book ai didi

javascript - 如何在 Three.js 中不拉伸(stretch)地重复纹理?

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:00:44 29 4
gpt4 key购买 nike

无论我做什么,我的纹理似乎都被拉伸(stretch)/缩放到我应用它们的网格的大小。我已经阅读了很多关于这个问题的答案,似乎没有一个解决方案对我来说是固定的,所以我发布了一个新的。只是一些信息,

  • 我的纹理都是 64x64 像素
  • 我正在预加载我所有的纹理
  • 我正在使用 Web GL 渲染器

这是我的代码

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 设置为任何类型的值,纹理似乎就消失了,我就剩下了具有平坦的颜色。

知道我做错了什么吗?

最佳答案

好的,对于标准的盒子几何体(正方形或长方形),解决方案是这样的;

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);
}

关键是正确设置纹理重复的比率。您可能还想为每个面创建一个新 Material ,而不是一遍又一遍地引用相同的材​​质对象。

关于javascript - 如何在 Three.js 中不拉伸(stretch)地重复纹理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26353251/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com