JSFiddle - React, Tailwind, and code Playground

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/[email protected]/build/three.webgpu.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
		}
	}
</script>

CSS

* {
  margin: 0;
  border: 0;
  padding: 0;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
  background-color: #808080;
}

.click-through {
  &,
  & * {
    pointer-events: none;
  }
}

table {
  display: table;
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

tr,
td,
th {
  vertical-align: middle;
}

JavaScript

import * as THREE from "three"
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"
;(async function () {
  const body = document.body
  const renderer = new THREE.WebGPURenderer({
    antialias: false,
    logarithmicDepthBuffer: false,
    powerPreference: "high-performance",
  })
  renderer.outputColorSpace = THREE.SRGBColorSpace
  const textureLoader = new THREE.TextureLoader()
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(
    75,
    body.offsetWidth / body.offsetHeight,
    0.01,
    10000,
  )
  const pivot = new THREE.Object3D()
  const cameraBase = new THREE.Object3D()
  scene.add(pivot)
  pivot.add(cameraBase)
  cameraBase.add(camera)
  pivot.position.set(0, 1, 0)
  cameraBase.position.set(0, 0, -4)
  cameraBase.rotation.set(0, THREE.MathUtils.degToRad(90), 0)
  /////////////////////////////////////////////////////////
  /////////////////////////////////////////////////////////
  const directionalLight0 = new THREE.DirectionalLight(0xffffff, Math.PI * 0.85)
  directionalLight0.position.set(1, 5, 3)
  scene.add(directionalLight0)
  /////////////////////////////////////////////////////////
  /////////////////////////////////////////////////////////
  const directionalLight1 = new THREE.DirectionalLight(0xffffff, Math.PI * 0.85)
  directionalLight1.position.set(-2, -5, -1)
  scene.add(directionalLight1)
  /////////////////////////////////////////////////////////
  /////////////////////////////////////////////////////////
  const ambientlight = new THREE.AmbientLight(0xffffff, Math.PI * 0.1)
  scene.add(ambientlight)
  /////////////////////////////////////////////////////////
  /////////////////////////////////////////////////////////
  const mesh_ground = await (async () => {
    const geometry = new THREE.PlaneGeometry(20, 20)
    const material = new THREE.MeshLambertMaterial({
      side: THREE.FrontSide,
      map: await getGrassTexture(textureLoader),
    })
    const mesh = new THREE.Mesh(geometry,...