JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.116.1/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.116.1/examples/js/controls/OrbitControls.js"></script>

CSS

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

JavaScript

class App {
  constructor() {
    //
  }

  init() {
    this.camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    this.camera.position.x = 30;
    this.camera.position.z = 30;
    this.camera.position.y = 30;

    this.scene = new THREE.Scene();

    var geometry = new THREE.PlaneBufferGeometry(100, 100, 1);
    geometry.rotateX(-Math.PI * 0.5); // this is how you can do it
    var material = new THREE.MeshLambertMaterial({
      diffuse: 0x888800,
      side: THREE.DoubleSide,
      lights: true
    });
    var plane = new THREE.Mesh(geometry, material);
    plane.receiveShadow = true;
    this.scene.add(plane);

    var light = new THREE.AmbientLight(0x808080);
    var light2 = new THREE.DirectionalLight(0xff4040, 1, 200);
    //var pointLightHelper = new THREE.PointLightHelper(light2, 1.0);
    light2.position.set(10, 20, 10);

    light2.castShadow = true;
    light2.shadow.camera.near = 1;
    light2.shadow.camera.far = 100;
    light2.shadow.bias = -0.005; // reduces self-shadowing on double-sided objects
    light2.shadow.mapSize.width = 2048;  // default
    light2.shadow.mapSize.height = 2048; // default
    
		light2.shadow.camera.left   = -100;
		light2.shadow.camera.right  = 100;
		light2.shadow.camera.top    = 100;
		light2.shadow.camera.bottom = -100;  

    this.scene.add(light, light2);

    var geometry = new THREE.BoxBufferGeometry(2, 2, 2);

    var instancedGeometry = new THREE.InstancedBufferGeometry();

    var offset = new THREE.InstancedBufferAttribute(new Float32Array(300), 3);
    var orientation = new THREE.InstancedBufferAttribute(
      new Float32Array(400),
      4
    );
    instancedGeometry.maxInstancedCount = 100;
    instancedGeometry.addAttribute("offset", offset);
    instancedGeometry.addAttribute("orientation", orientation);

    for (var i = 0; i < 100; i++) {
      offset.setXYZ(
        i,
        50 - Math.random() * 100,
        Math.random() *...