yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui/3d-fonts: replace troika with 3d rendered default font

Browse Source
This commit is contained in:
Johannes Kirschbauer
2025-09-03 21:34:26 +02:00
parent 92151331f3
commit 629ef65ce5
1 changed files with 41 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
pkgs/clan-app/ui/src/scene/MachineRepr.ts
View File

@@ -2,9 +2,9 @@ import * as THREE from "three";
import { ObjectRegistry } from "./ObjectRegistry"; import { ObjectRegistry } from "./ObjectRegistry";
import { Accessor, createEffect, createRoot, on } from "solid-js"; import { Accessor, createEffect, createRoot, on } from "solid-js";
import { renderLoop } from "./RenderLoop"; import { renderLoop } from "./RenderLoop";
// @ts-expect-error: No types for troika-three-text import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
import { Text } from "troika-three-text"; import { FontLoader } from "three/examples/jsm/Addons";
import ttf from "../../.fonts/ArchivoSemiCondensed-Medium.ttf"; import jsonfont from "three/examples/fonts/helvetiker_regular.typeface.json";
// Constants // Constants
const BASE_SIZE = 0.9; const BASE_SIZE = 0.9;
@@ -201,26 +201,49 @@ export class MachineRepr {
private createLabel(id: string) { private createLabel(id: string) {
const group = new THREE.Group(); const group = new THREE.Group();
// 0x162324 // 0x162324
const text = new Text(); // const text = new Text();
text.text = id; // text.text = id;
text.font = ttf; // text.font = ttf;
text.fontSize = 0.1; // text.fontSize = 0.1;
text.color = 0xffffff; // text.color = 0xffffff;
text.anchorX = "center"; // text.anchorX = "center";
text.anchorY = "middle"; // text.anchorY = "middle";
text.position.set(0, 0, 0.01); // text.position.set(0, 0, 0.01);
text.outlineWidth = 0.005; // text.outlineWidth = 0.005;
text.outlineColor = 0x162324; // text.outlineColor = 0x162324;
// text.sync(() => {
// renderLoop.requestRender();
// });
// Re-render on text changes const textMaterial = new THREE.MeshPhongMaterial({
text.sync(() => { color: 0xffffff,
renderLoop.requestRender();
}); });
const textGeo = new TextGeometry(id, {
font: new FontLoader().parse(jsonfont),
size: 0.09,
depth: 0.001,
curveSegments: 12,
bevelEnabled: false,
});
const text = new THREE.Mesh(textGeo, textMaterial);
textGeo.computeBoundingBox();
const bbox = textGeo.boundingBox;
if (bbox) {
const xMid = -0.5 * (bbox.max.x - bbox.min.x);
// const yMid = -0.5 * (bbox.max.y - bbox.min.y);
// const zMid = -0.5 * (bbox.max.z - bbox.min.z);
// Translate geometry so center is at origin / baseline aligned with y=0
textGeo.translate(xMid, -0.035, 0);
}
// --- Background (rounded rect) --- // --- Background (rounded rect) ---
const padding = 0.04; const padding = 0.04;
// TODO: compute from text.bounds after sync const textWidth = bbox ? bbox.max.x - bbox.min.x : 1;
const bgWidth = text.text.length * 0.07 + padding; const bgWidth = textWidth + 10 * padding;
// const bgWidth = text.text.length * 0.07 + padding;
const bgHeight = 0.1 + 2 * padding; const bgHeight = 0.1 + 2 * padding;
const radius = 0.02; const radius = 0.02;
@@ -230,8 +253,6 @@ export class MachineRepr {
const bg = new THREE.Mesh(bgGeom, bgMat); const bg = new THREE.Mesh(bgGeom, bgMat);
bg.position.set(0, 0, -0.01); bg.position.set(0, 0, -0.01);
// bg.position.set(0, 0, -0.01); // slightly behind text
// --- Arrow (triangle pointing down) --- // --- Arrow (triangle pointing down) ---
const arrowShape = new THREE.Shape(); const arrowShape = new THREE.Shape();
arrowShape.moveTo(-0.05, 0); arrowShape.moveTo(-0.05, 0);