Array of image three js

by bumpyshot

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js"></script>
<script>
var minPan = new THREE.Vector3( - 20, - 20, - 20 );
var maxPan = new THREE.Vector3( 20, 20, 20 );

THREE.OrbitControls = function ( object, domElement ) {

	if ( domElement === undefined ) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' );
	if ( domElement === document ) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );

	this.object = object;
	this.domElement = domElement;

	// Set to false to disable this control
	this.enabled = true;

	// "target" sets the location of focus, where the object orbits around
	this.target = new THREE.Vector3();

	// How far you can dolly in and out ( PerspectiveCamera only )
	this.minDistance = 0;
	this.maxDistance = Infinity;

	// How far you can zoom in and out ( OrthographicCamera only )
	this.minZoom = 0;
	this.maxZoom = Infinity;

	// How far you can orbit vertically, upper and lower limits.
	// Range is 0 to Math.PI radians.
	this.minPolarAngle = 0; // radians
	this.maxPolarAngle = Math.PI; // radians

	// How far you can orbit horizontally, upper and lower limits.
	// If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
	this.minAzimuthAngle = - Infinity; // radians
	this.maxAzimuthAngle = Infinity; // radians

	// Set to true to enable damping (inertia)
	// If damping is enabled, you must call controls.update() in your animation loop
	this.enableDamping = false;
	this.dampingFactor = 0.05;

	// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
	// Set to false to disable zooming
	this.enableZoom = true;
	this.zoomSpeed = 1.0;

	// Set to false to disable rotating
	this.enableRotate = true;
	this.rotateSpeed = 1.0;

	// Set to false to disable panning
	this.enablePan = true;
	this.panSpeed =...

CSS

body{
    margin:0; 
    height: 100vh;
}

canvas {
    display: block;
}

JavaScript

var clock = new THREE.Clock();

var camera, scene, renderer,
  particle1, particle2,
  light, spotlight, object, lightHelper, loader, plane, planeGeometry;


const mouse = new THREE.Vector2();
const target = new THREE.Vector2();
const windowHalf = new THREE.Vector2( window.innerWidth / 2, window.innerHeight / 2 );

init();
animate();
control();
function init() {
  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera( window.innerWidth / - 50, window.innerWidth / 50, window.innerHeight / 50, window.innerHeight / -50, - 500, 1000); 
  
  renderer = new THREE.WebGLRenderer();
  //renderer.setClearColor(0xEEEEEE, 1);
  renderer.shadowMap.enabled = true;
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor("#e5e5e5");
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.PlaneGeometry( 6,8 );
  const loader = new THREE.TextureLoader();
  loader.crossOrigin = true;
  const textures = [
    loader.load('https://www.wanimo.com/veterinaire/wp-content/uploads/2018/11/[email protected]'),
    loader.load('https://www.wanimo.com/veterinaire/wp-content/uploads/2018/11/[email protected]'),
    loader.load('https://www.wanimo.com/veterinaire/wp-content/uploads/2018/11/[email protected]'),
    loader.load('https://www.wanimo.com/veterinaire/wp-content/uploads/2018/11/[email protected]'),
    
  ]
  for ( let x = 0; x <= 2; x ++ ) {

    for ( let y = 0; y <= 4; y ++ ) {
      for (let i = 0; i <= 11; i ++) {
        if (x==0 && y==0){

        } else{
          console.log(i)
          const material = new THREE.MeshLambertMaterial( { map :textures[i]} );
          const mesh = new THREE.Mesh( geometry, textures[i] );
          mesh.position.x = (x - 1)*10;
          mesh.position.y = (1 - y)*10;
          scene.add( mesh );
        }

      }




    }

  }


/*     planeGeometry = new THREE.PlaneGeometry(6,8);
    var texture = new...