整个 THREE.BufferGeometry 上的 THREE.JS UV 贴图

Question

这是一个非常简单的 Three.JS 草图，生成以下渲染:

正如您可能看到的，这个 THREE.BufferGeometry 是一个 8x8 矩阵，通过以这种方式设置 UV:

for(var i = 0; i < points.length; i += 4){ quad_uvs.push(...[0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0]); }

uvs = new Float32Array(quad_uvs);
geometry.setAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );

它将纹理应用于每个 8x8 段，但是我需要在整个几何体上放置纹理。
我如何更新 uv 映射以实现它？

    
var img = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAIAAgADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDwSiiivxo/0tCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiuq8I/Crxj49Xd4d8MarrEWcGa0tHeIH3fG0fiaqMZTdoq7Ma1elhoOpWmoxXVtJfezlaK9gf9kT4wRweafA1+VxnCywlv8AvkPn9K8/8V/D3xP4EmWPxF4e1PRGY7UN/avErn/ZLDDfhWs6Famrzg16pnBhs2y/GT9nhsRCcu0ZRb+5M5+iiisD1QooooAKKKKACiiigAooooAKKKKACitrwx4J8Q+Nbprbw/oeo63OuNyafavMVz0ztBx+Nei2/wCyL8YLmDzk8C34TGcSSRI3/fLOD+lbQoVaivCDfomeZic1y/BS5MViIQfaUop/i0eQUV2Pi34O+OPAcTTeIPCer6Vbr1uZ7RxCP+2gG39a46s5QlB2krM66GIo4qHtKE1OPdNNfegoooqToCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACii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AUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//Z";
    
var renderer, scene, camera, controls, glsl;
    
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000);
document.body.appendChild(renderer.domElement);

scene = new THREE.Scene();
loader = new THREE.TextureLoader();
loader.crossOrigin = "";

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 51200);
camera.position.set(-2048, 2048, -2048);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

controls.screenSpacePanning = false;

controls.minDistance = 8;
controls.maxDistance = 5120;
    
camera.position.set(208.48355078304965, 45.28894677815297, 310.34089790619583);
controls.target.set(0, 0, 0);
    
var points = [], indices = [], quad_uvs = [];

for(var x = -512; x < 512; x += 128){
    for(var z = -512; z < 512; z += 128){
    
        
        points.push(new THREE.Vector3(x, 0, z));
        points.push(new THREE.Vector3(x + 128 , 0, z));
        points.push(new THREE.Vector3(x + 128, 0, z + 128));
        points.push(new THREE.Vector3(x, 0, z + 128));
    
    } 
}
    
for(var i = 0; i < points.length; i += 4){
    
    indices.push(i, i + 1, i + 2);
    indices.push(i + 2, i + 3, i);
    
}

var geometry = new THREE.BufferGeometry().setFromPoints(points);
    
for(var i = 0; i < points.length; i += 4){ quad_uvs.push(...[0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0]); }

uvs = new Float32Array(quad_uvs);
geometry.setAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
    
geometry.setIndex( indices );
geometry.computeVertexNormals();

glsl = new THREE.ShaderMaterial( {

    uniforms: {
        
       textureA: { type: 't', value: new THREE.TextureLoader().load(img) }

    },
        
    vertexShader: document.getElementById( "vertexShader" ).textContent,
    fragmentShader: document.getElementById( "fragmentShader" ).textContent

} );
    
glsl.side = THREE.DoubleSide;

    
var plane = new THREE.Mesh(geometry, glsl);
    
scene.add(plane);
        
animate();
        
function animate(){
    
    controls.update();
    renderer.render(scene, camera);
    
    requestAnimationFrame(animate);
    
}
    

body { margin: 0; }

<!DOCTYPE html>
<html>
<head>
    
    <meta charset="utf-8" />
  
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://unpkg.com/three@0.116.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.116.0/examples/js/controls/OrbitControls.js"></script>
    
</head>
<body>
   
<script id="vertexShader" type="x-shader/x-vertex">

        varying vec2 vUv;

        void main() {

            vUv = uv;

            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

        }

    </script>

    <script id="fragmentShader" type="x-shader/x-fragment">

        varying vec2 vUv;
        uniform sampler2D textureA;

        void main() {

            gl_FragColor = texture2D(textureA, vUv);
            
        }

    </script>
    
</body>
</html>

Answer 1

我已经使用可能的解决方案更新了您的代码。您将看到现在生成的几何体略有不同。最重要的部分是您必须在 [0,1] 范围内生成纹理坐标。跨越整个几何体，而不仅仅是每个四边形。

    
var img = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAIAAgADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDwSiiivxo/0tCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiuq8I/Crxj49Xd4d8MarrEWcGa0tHeIH3fG0fiaqMZTdoq7Ma1elhoOpWmoxXVtJfezlaK9gf9kT4wRweafA1+VxnCywlv8AvkPn9K8/8V/D3xP4EmWPxF4e1PRGY7UN/avErn/ZLDDfhWs6Famrzg16pnBhs2y/GT9nhsRCcu0ZRb+5M5+iiisD1QooooAKKKKACiiigAooooAKKKKACitrwx4J8Q+Nbprbw/oeo63OuNyafavMVz0ztBx+Nei2/wCyL8YLmDzk8C34TGcSSRI3/fLOD+lbQoVaivCDfomeZic1y/BS5MViIQfaUop/i0eQUV2Pi34O+OPAcTTeIPCer6Vbr1uZ7RxCP+2gG39a46s5QlB2krM66GIo4qHtKE1OPdNNfegoooqToCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACii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AUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//Z";
    
var renderer, scene, camera, controls, glsl;
    
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000);
document.body.appendChild(renderer.domElement);

scene = new THREE.Scene();
loader = new THREE.TextureLoader();
loader.crossOrigin = "";

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 51200);
camera.position.set(-2048, 2048, -2048);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

controls.screenSpacePanning = false;

controls.minDistance = 8;
controls.maxDistance = 5120;
    
camera.position.set(208.48355078304965, 45.28894677815297, 310.34089790619583);
controls.target.set(0, 0, 0);
    
var points = [], indices = [], uvs = [];

var step = 128;

for(var x = -512; x < 512; x += step){
    for(var z = -512; z < 512; z += step){
    
        points.push(x, 0, z);
        points.push(x + step , 0, z);
        points.push(x + step, 0, z + step);
        points.push(x, 0, z + step);
            
        var u = x + 512;
        var v = z + 512;
            
        uvs.push(u / 1024, v / 1024);
        uvs.push((u + step) / 1024 , v / 1024);
        uvs.push((u + step) / 1024 ,(v + step) / 1024);
        uvs.push(u / 1024, (v + step) / 1024);
    } 
}

var geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( points, 3 ) );
geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );

var positionAttribute = geometry.getAttribute( 'position' );

for(var i = 0; i < positionAttribute.count; i += 4){

    indices.push(i, i + 1, i + 2);
    indices.push(i + 2, i + 3, i);

}

geometry.setIndex( indices );
geometry.computeVertexNormals();

glsl = new THREE.ShaderMaterial( {

    uniforms: {
        
       textureA: { type: 't', value: new THREE.TextureLoader().load(img) }

    },
        
    vertexShader: document.getElementById( "vertexShader" ).textContent,
    fragmentShader: document.getElementById( "fragmentShader" ).textContent

} );
    
glsl.side = THREE.DoubleSide;

    
var plane = new THREE.Mesh(geometry, glsl);
    
scene.add(plane);
        
animate();
        
function animate(){
    
    controls.update();
    renderer.render(scene, camera);
    
    requestAnimationFrame(animate);
    
}
    

body { margin: 0; }

<!DOCTYPE html>
<html>
<head>
    
    <meta charset="utf-8" />
  
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://unpkg.com/three@0.116.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.116.0/examples/js/controls/OrbitControls.js"></script>
    
</head>
<body>
   
<script id="vertexShader" type="x-shader/x-vertex">

        varying vec2 vUv;

        void main() {

            vUv = uv;

            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

        }

    </script>

    <script id="fragmentShader" type="x-shader/x-fragment">

        varying vec2 vUv;
        uniform sampler2D textureA;

        void main() {

            gl_FragColor = texture2D(textureA, vUv);
            
        }

    </script>
    
</body>
</html>