JSFiddle - React, Tailwind, and code Playground

HTML

<script type="importmap">
	{
		"imports": {
  		"three": "https://unpkg.com/[email protected]/build/three.webgpu.js"
		}
	}
</script>
<div id="buttonContainer" style="width:500px;">
	<div style="">
		<table class="list">
			<tr style="border-top-width:4px;">
				<th style="padding-right:10px;vertical-align:top;">
					points.geometry.boundingSphere.center:
					</th>
				<td style=""><span id="pointsCenterElem"></span></td>
			</tr>
			<tr style="border-top-width:20px;">
				<th style="padding-right:10px;vertical-align:top;">
					points.geometry.boundingSphere.radius:
					</th>
				<td style=""><span id="pointsRadiusElem"></span></td>
			</tr>
			<tr style="border-top-width:20px;">
				<th style="padding-right:10px;vertical-align:top;">
					instancedMesh.boundingSphere.center:
					</th>
				<td style=""><span id="instancedMeshCenterElem"></span></td>
			</tr>
			<tr style="border-top-width:20px;">
				<th style="padding-right:10px;vertical-align:top;">
					instancedMesh.boundingSphere.radius:
					</th>
				<td style=""><span id="instancedMeshRadiusElem"></span></td>
			</tr>
		</table>
		</div>
<div>

CSS

* {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
}

html {
  height: 100%;
  overflow: hidden;
  font-size: 14px;
  color: #ffffff;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
  background-color: #808080;
  /* user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none; */
  position: relative;
}

.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;
}

tr {
  border-color: transparent;
}

table.list > * > tr > *:first-child {
  white-space: nowrap;
  text-align: right;
  width: 0.01px;
}

#buttonContainer {
  position: absolute;
  inset: 0 auto auto 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  z-index: 10;
}

button {
  background-color: #005dc6;
  color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}

JavaScript

import * as THREE from 'three';

(async function () {
  const renderer = new THREE.WebGPURenderer({});
  await renderer.init();
  renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
  const scene = new THREE.Scene();
  const body = document.body;
  const camera = new THREE.PerspectiveCamera(
    70,
    body.offsetWidth / body.offsetHeight,
    0.01,
    1000,
  );
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 20;
  scene.add(camera);
  const canvas = renderer.domElement;
  canvas.style.position = 'absolute';
  canvas.style.zIndex = `5`;
  canvas.style.inset = '0';
  body.appendChild(canvas);

  setCanvasSize();

  function setCanvasSize() {
    renderer.setSize(body.offsetWidth, body.offsetHeight);
    camera.aspect = body.offsetWidth / body.offsetHeight;
    camera.updateProjectionMatrix();
    setTimeout(setCanvasSize, 1000);
  }

  const pointsData = [
    { x: -7505.97314453125, y: 182.7720489501953, z: 6319.98291015625 },
    { x: -3888.849853515625, y: 104.75480651855469, z: -8840.5166015625 },
    { x: 6898.529296875, y: 342.9034423828125, z: -495.22833251953125 },
    { x: 10786.9365234375, y: 311.8286437988281, z: 5985.064453125 },
  ];

  {
    const positions = new Float32Array(pointsData.length * 3);
    pointsData.forEach((p, i) => {
      positions[i * 3] = p.x;
      positions[i * 3 + 1] = p.y;
      positions[i * 3 + 2] = p.z;
    });

    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    geometry.computeBoundingBox();
    geometry.computeBoundingSphere();
    const center = geometry.boundingSphere.center;
    document.getElementById('pointsCenterElem').innerHTML = `
    x: ${center.x}<br/>
    y: ${center.y}<br/>
    z: ${center.z}
    `;
    const radius = geometry.boundingSphere.radius;
    document.getElementById('pointsRadiusElem').innerHTML = radius;

    const material =...