Как сохранить размеры текстуры в Three.js при масштабировании сетки?

Вы можете попробовать использовать: 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

ОБНОВЛЯТЬ

Спрайт — версия, в которой текстура всегда обращена к камере. Важно в 3D-контексте.

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

Решение, предложенное Лукашом Д. Масталерцем, также имеет смысл, но в моем случае я отказался от текстурного подхода и использовал спрайты.

Создание спрайта:

    private static _createSprite(url: string): THREE.Sprite {
        let spriteMaterial: THREE.SpriteMaterial = null;
        let sprite: THREE.Sprite = new THREE.Sprite(); // Initialize the sprite
    
        this.loader.load(url, (texture) => {
            // Create a sprite material with the loaded texture
            spriteMaterial = new THREE.SpriteMaterial({ map: texture });
        
            // Assign the material to the sprite
            sprite.material = spriteMaterial;
    
            // Set the dimensions of the sprite
            sprite.scale.set(32, 32, 1);
    
            // Indicate that the sprite needs an update
            sprite.material.needsUpdate = true;
    
            // this.render(); // Uncomment if you need to render the scene after loading the texture
        });
    
        // Return the sprite, even if the texture is not done loading
        return sprite;
    }

Линия,

// Set the dimensions of the sprite  
sprite.scale.set(32, 32, 1);

играет важную роль в размещении изображения внутри объекта-сетки.

Вот конечный результат