stack geometries

by jscastro76

HTML

<script src="https://threejs.org/build/three.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
  
  <canvas id="myCanvas"/>

CSS

body {
      margin: 0;
}
canvas {
    display: block;
}

JavaScript

let scene, camera, renderer;

let cubeGroup;

init();
animate();

function init() {

  const data = [
    [3, 2, 1],
    [6, 5, 4],
    [8, 7, 6],
  ]

  var i = 1;

  height = 500
  fov = 18
  //aspect = width / height
  aspect = 500 / 500
  near = 0.1
  far = 1000

  loader = new THREE.TextureLoader()


  scene = new THREE.Scene(); // ADDED

  camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(-4, 1, 4);
  camera.lookAt(scene.position);


  //max = Math.max.apply(Math, data.map(d=>Math.max.apply(this,d))) 

  cubeGeometries = data.map(row => {
    return row.map(c => {
      //return new THREE.BoxGeometry( 0.2, c/max, 0.2 );
      return new THREE.BoxBufferGeometry(0.2, c / 8, 0.2);
    })
  })


  var materialArray = [];

  const cubeMaterial = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load('https://i.postimg.cc/25m7H09s/metal1.jpg')
  });
  cubeMaterial.color.convertSRGBToLinear();

  const cubeMaterialTwo = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load('https://i.postimg.cc/pXs9NqTN/OIP.jpg')
  });
  cubeMaterialTwo.color.convertSRGBToLinear();

  materialArray.push(cubeMaterial, cubeMaterialTwo);



  const cubeMeshes = cubeGeometries.map(row => {
    return row.map(cubeGeometry => new THREE.Mesh(cubeGeometry, materialArray[Math.floor(Math.random())]))
  })


  cubeGroup = new THREE.Group();
  data.forEach((row, i, iarr) => {
    row.forEach((d, j, jarr) => {
      cubeMeshes[i][j].position.set(
        i / iarr.length - 0.5,
        //d/max*0.5-0.6,
        d / 8 * 0.5 - 0.6,
        j / jarr.length - 0.5);

      //cubeMeshes[i][j].scale.set(1,4,1);
      cubeGroup.add(cubeMeshes[i][j]);
    })
  })


  const mainLight = new THREE.DirectionalLight(0xffffff, 3.0);
  mainLight.position.set(10, 10, 10);


  const ambientLight = new THREE.HemisphereLight(0xddeeff, 0x202020, 3);

  scene.add(cubeGroup);
  scene.add(mainLight);
  scene.add(ambientLight);


  renderer = new...