ThreeJS Texure Distorsion

HTML

<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.164.0/build/three.module.js"
		}
	}
</script>

CSS

body {
	  margin: 0;
}

JavaScript

import * as THREE from "three";

import { OrbitControls } from "https://unpkg.com/three@0.139.2/examples/jsm/controls/OrbitControls.js";

let scene, renderer, camera;

init();
animate();

function init() {
  // Container
  const container = document.createElement("div");
  document.body.appendChild(container);

  // Scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x2a3441);

  // Renderer
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  // renderer.outputEncoding = THREE.sRGBEncoding;

  // renderer.shadowMap.enabled = true;

  // Camera
  camera = new THREE.PerspectiveCamera(
    40,
    window.innerWidth / window.innerHeight,
    1,
    40000
  );
  camera.position.set(0, 0, 400);

  // Controls
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.update();

  // Object Infos
  const vertices = [16, 112, 16, -16, 112, 16, -32, 144, 32, 32, 144, 32];
  const indices = [3, 2, 1, 1, 0, 3];
  const uvs = [0, 1, 1, 1, 1, 0, 0, 0];
  const texture =
   ...