JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
		}
	}
</script>

CSS

body {
	  margin: 0;
    overflow: hidden;
}

JavaScript

import * as THREE from 'three';
import {
  OrbitControls
} from 'three/addons/controls/OrbitControls.js';
import {
  GUI
} from 'three/addons/libs/lil-gui.module.min.js';

//-----------------
// --- Debug params
//-----------------
const parameters = {
  size: 1024,
  repeat: 2,
  margin: 24,
  gap: 6,
  radius: 36,
  background: "#fff",
  textColor: "#fff",
  color1: "#444",
  color2: "#666",
  textScale: 1,
  topLeftText: "Box Prototype",
  topRightText: "1x1 Meter",
  bottomLeftText: "",
  bottomRightText: "1024 x 1024",
  textureScale: new THREE.Vector2(1, 1),
}

//----------
// --- init
//----------
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 100);
camera.position.set(1.5, 1.5, 1.5);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x999999);

// Box
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshPhysicalMaterial({
  metalness: 0.3,
  roughness: 0.3,
  transparent: true,
  //opacity: 0.5,
  
});

// --------------------------
// --- Extending the material
// --------------------------
extendToGridPrototypeMaterial(material);

const box = new THREE.Mesh(geometry, material);
box.position.set(-0.5, 0.5, 0);
box.castShadow = true;
scene.add(box);

// Ground
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(1, 1, 1),
  new THREE.MeshLambertMaterial()
)
ground.rotation.x = -Math.PI / 2;
ground.scale.setScalar(100);
ground.receiveShadow = true;
scene.add(ground);

// Lights
const light = new THREE.AmbientLight(0xffffff);
const lightsHodler = new THREE.Object3D();
const pointLight1 = new THREE.PointLight(0xff0000, 100);
pointLight1.position.set(3, 4, 3);
pointLight1.castShadow = true;

const pointLight2 = new THREE.PointLight(0x00ff00, 100);
pointLight2.position.set(-3, 4, 3);
pointLight2.castShadow = true;

const pointLight3 = new THREE.PointLight(0x0000ff, 100);
pointLight3.position.set(0, 4, -3);
pointLight3.castShadow = true;

lightsHodler.add(pointLight1,...