JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js"></script>
CSS
html,body,canvas{
padding:0;
margin:0;
width:100%;
height:100%;
overflow:hidden;
}
JavaScript
console.clear();
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({});
const camera = new THREE.PerspectiveCamera( 55, window.innerWidth/window.innerHeight, 0.1, 10000 );
renderer.setSize( window.innerWidth, window.innerHeight );
const canvas = renderer.domElement;
document.body.appendChild( canvas );
const THREETextLoader = new THREE.TextureLoader();
const dummy = new THREE.Object3D();
const _material = new THREE.MeshBasicMaterial({ map : THREETextLoader.load(
"https://lh3.googleusercontent.com/proxy/WnnRG3NNbNHLaWKgyak-X6lrTrd0TpTbf1DanQ0TsTRNntMqzmJGzsbrYc8xKPHaPzVJxmZgBJLbUg3qbYAsafSWFw",
)});
const _InstancesRef = [
{ pos:[-0.7,0.5,-3], uv:[0,0.5, 1,0.5, 0,0, 1,0] },
{ pos:[0.5,-0.4,-3], uv:[0,1, 1,1, 0,0.5, 1,0.5] }
];
const _totalInstances = _InstancesRef.length;
const _geometry = new THREE.InstancedBufferGeometry().copy( new THREE.PlaneBufferGeometry( 1, 1 ) );
let _UV = new Float32Array( _totalInstances * 8 );
for(let i=0,l=_totalInstances; i<l; i++){
const UV = _InstancesRef[i].uv,
idx = i*8;
for(let j=0; j<8; j++){ _UV[idx+j]=UV[j]; }
}
////////////////////////////////////
////////////////////////////////////
// delete line below to see the orginal texture with original uv map
_geometry.setAttribute( 'uv', new THREE.InstancedBufferAttribute( _UV, 2 ) );
////////////////////////////////////
////////////////////////////////////
const _InstancedMesh = new THREE.InstancedMesh( _geometry, _material, _totalInstances );
scene.add( _InstancedMesh );
for(let i=0,l=_totalInstances;i<l; i++){
const thing = _InstancesRef[i];
dummy.position.set( thing.pos[0], thing.pos[1], thing.pos[2] );
dummy.updateMatrix();
_InstancedMesh.setMatrixAt( i, dummy.matrix );
}
const render = ()=>{
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();