UV Matrix

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
const imgUrl = "https://i.ibb.co/KVbF40w/mesh-texture.png"

// INIT
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 1000);
camera.position.set(5, 5, 20);

let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener("resize", event => {
	camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
})

// TEXTURE FROM IMAGE 
const textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = "Anonymous";
const myTexture = textureLoader.load(imgUrl, tex => {
  tex.minFilter = THREE.NearestFilter;
  tex.magFilter = THREE.NearestFilter;
});

// MATERIAL & SHADERS FOR UV MAPPING
const material =  new THREE.MeshBasicMaterial(
{
  map: myTexture,
  transparent: true, 
  depthWrite: false,
  onBeforeCompile: shader => {
    shader.vertexShader = `
			attribute vec2 iUv;
			varying vec2 instUv;
			${shader.vertexShader}
			`.replace(
      	`#include <begin_vertex>`,
	      `#include <begin_vertex>
				instUv = iUv;
			`);

  	shader.fragmentShader = `
			varying vec2 instUv;
			${shader.fragmentShader}
			`.replace(
      	`#include <map_fragment>`,
	      `
				#ifdef USE_MAP
				vec4 texelColor = texture2D( map, instUv + 0.1 * vUv );
				texelColor = mapTexelToLinear( texelColor );
				diffuseColor *= texelColor;
				#endif
			`,
    );}
})

const gridSize = 10;
const geometry = new THREE.PlaneBufferGeometry( 1, 1 );
const dummy = new THREE.Object3D();
const mesh = new THREE.InstancedMesh( geometry, material, gridSize*gridSize );
const uvMatrix = [];

let index = 0;

// GENERATE SQUARES & MAPS TEXTURE COORDINATES
for (let x=0; x<=gridSize-1; x++) {
	for (let y=0; y<=gridSize-1; y++) {
  	const textureCoordinates = new THREE.Vector2(1,8); // COORDINATES	WITING THE TEXTURE
   ...