JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r92/examples/js/loaders/GLTFLoader.js"></script>
https://jsfiddle.net/qa4L2uog/2/#

JavaScript

import { Water } from 'https://threejs.org/examples/jsm/objects/Water.js';

var container, lighting, ambient, water, mesh, skyBg, skyBg2
var camera, controls, scene, renderer;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
const mouse = new THREE.Vector2();
const target = new THREE.Vector2();
const windowHalf = new THREE.Vector2( window.innerWidth / 2, window.innerHeight / 2 );

init();
animate();

function init() { 
  
  container = document.createElement('div');
  document.body.appendChild(container);

  /* Camera */
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
  camera.position.z = 300;
  camera.position.x = 250;
  camera.position.y = 300;
  // camera.lookAt(100,100,100)

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

  /* ambient light */
  ambient = new THREE.AmbientLight(0xffffff, 0.2);
  //scene.add(ambient);

  /* spotLight */
  var spotLight = new THREE.SpotLight( 0xffffff );
  var spotLightHelper = new THREE.SpotLightHelper( spotLight );
  spotLight.position.set( 22, 1200, 35 );
  spotLight.castShadow = true;
  spotLight.shadow.mapSize.width = 4000;
  spotLight.shadow.mapSize.height = 4000;
  spotLight.shadow.camera.near = 10;
  spotLight.shadow.camera.far = 1000;
  spotLight.shadow.camera.fov = 30;
  spotLight.intensity = 0.7;
  scene.add( spotLight, spotLightHelper );
  
  
  var hemisphereLight = new THREE.HemisphereLight( 0x69696A, 0x69696A, 1 );
  scene.add( hemisphereLight );

  //3d object //]\
  const material = new THREE.MeshPhongMaterial({color: 0x44aa88});  // greenish blue
  const materialFloor = new THREE.MeshPhongMaterial({color: 0x0000ff});  
  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const floorBoxWidth = 150;
  const floorBoxHeight = 0.5;
  const floorBoxDepth = 150;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
  const geometryFloor = new THREE.BoxGeometry(floorBoxWidth, floorBoxHeight, floorBoxDepth);
 ...