如何在 Three.js 中缩放网格时保持纹理尺寸？

Question

我正在开发一个 Three.js 项目，其中有一个应用了纹理的网格对象。纹理是尺寸为 64x64 的 PNG 文件。

问题： 当网格对象的尺寸发生变化时，纹理的高度和宽度会拉伸，从而扭曲其外观。我希望纹理保持其原始尺寸 (64x64)，无论网格大小如何。

当网格为64x64时

当网格为 16x07（或 NxN 以外的任何尺寸）时

我尝试在 Three.js 中研究纹理属性和材质设置，但找不到在缩放网格时保持纹理尺寸固定的方法。

Three.js 中网格尺寸发生变化时，如何防止纹理拉伸并保持原来的 64x64 大小？

这是网格对象和材质的创建方式
素材创作

function _createMaterial(url: string): THREE.MeshBasicMaterial {
    let material = new THREE.MeshBasicMaterial();

    this.loader.load(url, (texture) => {
        texture.magFilter = THREE.NearestFilter;
        texture.minFilter = THREE.LinearMipMapLinearFilter;
        material.setValues({ map: texture });
    });
    return material;
}

网格对象创建

this._meshObject = new Utils3.myTHREE.Mesh(geometry, material);

Answer 1

您可以尝试使用：

non-indexed

几何体并手动划分网格，您可以使用自定义着色器并在几何体上创建映射着色器，您可以尝试手动修改映射几何体上的

UV

，您可以尝试在几何体上使用多种材质（自定义着色器）。但所有这些努力都将是“毫无意义的”，因为如果您不将纹理与几何体隔离，它将始终依赖于它。

注意：初次使用纹理后，其尺寸、格式和 类型无法更改...

总是会被拉伸、重复等等，基本上是有道理的，对吧？

如果我是你，我会在这种特殊情况下使用

DecalGeometry

。这允许独立操纵两个几何形状。此外，从你展示的图片来看，这对我来说就是这样的，比如说，作为贴花。

const boxGeometry = new THREE.BoxGeometry(2, 2);
const loader = new THREE.TextureLoader();
const texture = loader.load('https://media.craiyon.com/2023-11-26/2ets6-v1SVGOdKAtPxmlMw.webp');
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const mesh = new THREE.Mesh(boxGeometry, material);
scene.add(mesh);

const position = new THREE.Vector3(0,0,1);
const orientation = new THREE.Euler();
const size = new THREE.Vector3(1, 1 ,1);

const decalGeometry = new DecalGeometry(mesh, position, orientation, size);
const decalMaterial = new THREE.MeshBasicMaterial({ map: texture, polygonOffset: true, polygonOffsetFactor: -1 });
const decalMesh = new THREE.Mesh(decalGeometry, decalMaterial);

https://codepen.io/Lucas_Mas/full/VwOrYGR