JSFiddle - React, Tailwind, and code Playground

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.147/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.147/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
  overflow: hidden;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { TransformControls } from 'three/addons/controls/TransformControls.js' 

let mesh, renderer, scene, camera, controls, transformControl;

const vsShader = `
			varying vec4 pos;
			void main() {
				pos = modelMatrix * vec4(position, 1.0);
				gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
			}
			`;

const fragmentShader = `
				uniform vec3 boxMin;
			uniform vec3 boxMax;
			uniform vec3 boxColor;
			varying vec4 pos;

			void main() {
				// Calculate the position of the model vertex

				// Check if the model vertex is outside the box range
				if (pos.x < boxMin.x || pos.x > boxMax.x ||
					pos.y < boxMin.y || pos.y > boxMax.y ||
					pos.z < boxMin.z || pos.z > boxMax.z) {
				// If it is outside the range, change the vertex color to boxColor
				gl_FragColor = vec4(boxColor, 1.0);
				} else {
				// If it is within the range, use the original color
				gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
				}
			}
			`;

init();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

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

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 10000);
  camera.position.set(60, 60, 60);

  // controls
  controls = new OrbitControls(camera, renderer.domElement);

  // ambient
  scene.add(new THREE.AmbientLight(0x222222));

  // light
  const light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(20, 20, 0);
  scene.add(light);

  const box = new THREE.BoxGeometry(
    192,
    124,
    220
  );

  const lineMaterial = setLineMaterial();
  const lineSegments = new THREE.LineSegments(box, lineMaterial);
  const boxMesh = new...