ui/cubes: add labels

pkgs/clan-app/ui/src/components/Sidebar/Sidebar.css

@@ -1,5 +1,5 @@
 div.sidebar {
-  @apply w-60 border-none;
+  @apply w-60 border-none z-10;
 
   & > div.header {
   }

pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css

@@ -1,5 +1,5 @@
 div.sidebar-pane {
-  @apply w-full max-w-60 border-none;
+  @apply w-full max-w-60 border-none z-10;
 
   & > div.header {
     @apply flex items-center justify-between px-3 py-2 rounded-t-[0.5rem];

pkgs/clan-app/ui/src/scene/cubes.css

@@ -13,3 +13,9 @@
   justify-content: center;
   align-items: center;
 }
+
+
+.machine-label {
+  @apply text-white bg-fg-def-2 py-1 px-3 rounded-sm;
+  font-size: 0.8rem;
+}

pkgs/clan-app/ui/src/scene/cubes.tsx

@@ -10,6 +10,10 @@ import "./cubes.css";
 
 import * as THREE from "three";
 import { MapControls } from "three/examples/jsm/controls/MapControls.js";
+import {
+  CSS2DRenderer,
+  CSS2DObject,
+} from "three/examples/jsm/renderers/CSS2DRenderer.js";
 
 import { Toolbar } from "../components/Toolbar/Toolbar";
 import { ToolbarButton } from "../components/Toolbar/ToolbarButton";
@@ -77,6 +81,7 @@ export function CubeScene(props: {
   let scene: THREE.Scene;
   let camera: THREE.OrthographicCamera;
   let renderer: THREE.WebGLRenderer;
+  let labelRenderer: CSS2DRenderer;
   let floor: THREE.Mesh;
   let controls: MapControls;
   // Raycaster for clicking
@@ -195,8 +200,11 @@ export function CubeScene(props: {
 
     renderer.autoClear = false;
     renderer.render(bgScene, bgCamera);
+
     controls.update(); // optional; see note below
+
     renderer.render(scene, camera);
+    labelRenderer.render(scene, camera);
 
     if (frameCount % 30 === 0) logMemoryUsage();
   }
@@ -523,6 +531,15 @@ export function CubeScene(props: {
     renderer.shadowMap.type = THREE.PCFSoftShadowMap;
     container.appendChild(renderer.domElement);
 
+    // Label renderer
+    labelRenderer = new CSS2DRenderer();
+    labelRenderer.setSize(container.clientWidth, container.clientHeight);
+    labelRenderer.domElement.style.position = "absolute";
+    labelRenderer.domElement.style.top = "0px";
+    labelRenderer.domElement.style.pointerEvents = "none";
+    labelRenderer.domElement.style.zIndex = "0";
+    container.appendChild(labelRenderer.domElement);
+
     controls = new MapControls(camera, renderer.domElement);
     controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
     // Enable the context menu,
@@ -716,6 +733,7 @@ export function CubeScene(props: {
       camera.updateProjectionMatrix();
 
       renderer.setSize(container.clientWidth, container.clientHeight);
+      labelRenderer.setSize(container.clientWidth, container.clientHeight);
 
       // Update background shader resolution
       uniforms.resolution.value.set(
@@ -791,6 +809,14 @@ export function CubeScene(props: {
     const baseMesh = createCubeBase([0, BASE_HEIGHT / 2, 0]);
     baseMesh.name = "base"; // Name for easy identification
 
+    const nameDiv = document.createElement("div");
+    nameDiv.className = "machine-label";
+    nameDiv.textContent = `${userData.id}`;
+
+    const nameLabel = new CSS2DObject(nameDiv);
+    nameLabel.position.set(0, CUBE_Y + CUBE_SIZE / 2 + 0.2, 0);
+    cubeMesh.add(nameLabel);
+
     // TODO: Destroy Group in onCleanup
     const group = new THREE.Group();
     group.add(cubeMesh);