@agent-os-lab/agent-game-sdk 0.1.1

package/src/office/renderers/three/agent-animation.ts

@@ -0,0 +1,205 @@
+import * as THREE from "three";
+
+import type { AgentGameOfficeAgent } from "../../core/types";
+import { updateAgentActivityEffects } from "./agent-activity-effects";
+import type { AgentMeshParts } from "./agent-mesh";
+
+export type AgentAnimationContext = {
+  mesh: AgentMeshParts;
+  agent: AgentGameOfficeAgent;
+  target: THREE.Vector3;
+  facingTarget?: THREE.Vector3;
+  elapsedSeconds: number;
+  deltaSeconds: number;
+  speedUnitsPerSecond?: number;
+};
+
+export type AgentAnimationMode =
+  | "walking"
+  | "working"
+  | "thinking"
+  | "meeting"
+  | "resting"
+  | "idle"
+  | "entertaining"
+  | "offline";
+
+export function resolveAgentAnimationMode(
+  agent: AgentGameOfficeAgent,
+  moving: boolean,
+): AgentAnimationMode {
+  if (agent.sceneState === "offline") {
+    return "offline";
+  }
+  if (moving) {
+    return "walking";
+  }
+  return agent.sceneState;
+}
+
+export function isSeatedAnimationMode(mode: AgentAnimationMode): boolean {
+  return mode === "working" || mode === "meeting" || mode === "resting";
+}
+
+export function hasVisibleActivity(agent: Pick<AgentGameOfficeAgent, "activityLabel">): boolean {
+  return Boolean(agent.activityLabel?.trim());
+}
+
+export function isAgentMoving(current: THREE.Vector3, target: THREE.Vector3, epsilon = 0.05): boolean {
+  return current.distanceTo(target) > epsilon;
+}
+
+export function stepToward(current: THREE.Vector3, target: THREE.Vector3, maxStep: number): THREE.Vector3 {
+  const delta = target.clone().sub(current);
+  const distance = delta.length();
+  if (distance <= maxStep) {
+    return target.clone();
+  }
+  return current.clone().add(delta.normalize().multiplyScalar(maxStep));
+}
+
+export function calculateMoveStep(
+  distance: number,
+  deltaSeconds: number,
+  speedUnitsPerSecond: number,
+): number {
+  const maxStep = speedUnitsPerSecond * deltaSeconds;
+  if (distance <= maxStep) {
+    return distance;
+  }
+  const easing = Math.max(0.35, Math.min(1, distance / 1.4));
+  return maxStep * easing;
+}
+
+export function updateAgentMotion(context: AgentAnimationContext): boolean {
+  const speed = context.speedUnitsPerSecond ?? 4.2;
+  const current = context.mesh.group.position;
+  const distance = current.distanceTo(context.target);
+  const next = stepToward(current, context.target, calculateMoveStep(distance, context.deltaSeconds, speed));
+  const direction = next.clone().sub(current);
+
+  if (direction.lengthSq() > 0.0001) {
+    faceToward(context.mesh.group, next);
+  }
+
+  context.mesh.group.position.copy(next);
+  const moving = isAgentMoving(next, context.target);
+  if (!moving) {
+    faceToward(context.mesh.group, context.facingTarget ?? context.target);
+  }
+  return moving;
+}
+
+export function applyAgentPose(
+  mesh: AgentMeshParts,
+  agent: AgentGameOfficeAgent,
+  moving: boolean,
+  elapsedSeconds: number,
+): void {
+  resetPose(mesh);
+  applyPoseMode(mesh, resolveAgentAnimationMode(agent, moving), elapsedSeconds);
+
+  const hasActivity = hasVisibleActivity(agent) && agent.sceneState !== "offline";
+  mesh.activityGlow.visible = hasActivity;
+  if (hasActivity) {
+    const scale = 1 + Math.sin(elapsedSeconds * 4) * 0.08;
+    mesh.activityGlow.scale.set(scale, scale, scale);
+  }
+  updateAgentActivityEffects(mesh.activityEffects, agent, elapsedSeconds);
+}
+
+function resetPose(mesh: AgentMeshParts): void {
+  mesh.visualRoot.position.y = 0;
+  mesh.body.rotation.set(0, 0, 0);
+  mesh.head.rotation.set(0, 0, 0);
+  mesh.leftArm.rotation.set(0, 0, 0);
+  mesh.rightArm.rotation.set(0, 0, 0);
+  mesh.leftLeg.rotation.set(0, 0, 0);
+  mesh.rightLeg.rotation.set(0, 0, 0);
+  mesh.leftFoot.rotation.set(0, 0, 0);
+  mesh.rightFoot.rotation.set(0, 0, 0);
+  mesh.body.scale.set(1, 1, 1);
+  mesh.activityGlow.scale.set(1, 1, 1);
+}
+
+function applyPoseMode(
+  mesh: AgentMeshParts,
+  mode: AgentAnimationMode,
+  elapsedSeconds: number,
+): void {
+  switch (mode) {
+    case "walking": {
+      const phase = elapsedSeconds * 8;
+      const swing = Math.sin(phase);
+      mesh.visualRoot.position.y = Math.abs(swing) * 0.075;
+      mesh.leftLeg.rotation.x = swing * 0.62;
+      mesh.rightLeg.rotation.x = -swing * 0.62;
+      mesh.leftFoot.rotation.x = Math.max(0, swing) * 0.22;
+      mesh.rightFoot.rotation.x = Math.max(0, -swing) * 0.22;
+      mesh.leftArm.rotation.x = -swing * 0.5;
+      mesh.rightArm.rotation.x = swing * 0.5;
+      mesh.body.rotation.z = swing * 0.04;
+      return;
+    }
+    case "working": {
+      const phase = elapsedSeconds * 7;
+      applySeatedLowerBody(mesh);
+      mesh.visualRoot.position.y = -0.08;
+      mesh.body.rotation.x = -0.1;
+      mesh.head.rotation.x = -0.06;
+      mesh.leftArm.rotation.x = 0.58 + Math.sin(phase) * 0.18;
+      mesh.rightArm.rotation.x = 0.58 - Math.sin(phase) * 0.18;
+      mesh.leftArm.rotation.z = -0.08;
+      mesh.rightArm.rotation.z = 0.08;
+      return;
+    }
+    case "thinking":
+      mesh.head.rotation.y = Math.sin(elapsedSeconds * 1.2) * 0.35;
+      mesh.head.rotation.x = Math.sin(elapsedSeconds * 0.9) * 0.08;
+      mesh.body.rotation.z = Math.sin(elapsedSeconds * 1.6) * 0.07;
+      return;
+    case "meeting":
+      applySeatedLowerBody(mesh);
+      mesh.visualRoot.position.y = -0.08;
+      mesh.head.rotation.x = Math.sin(elapsedSeconds * 2) * 0.08;
+      mesh.leftArm.rotation.x = 0.08;
+      mesh.rightArm.rotation.x = -0.08;
+      return;
+    case "resting": {
+      const breath = 1 + Math.sin(elapsedSeconds * 1.2) * 0.025;
+      applySeatedLowerBody(mesh);
+      mesh.visualRoot.position.y = -0.12;
+      mesh.body.scale.set(1, breath, 1);
+      mesh.body.rotation.x = 0.08;
+      mesh.head.rotation.z = Math.sin(elapsedSeconds * 0.8) * 0.05;
+      return;
+    }
+    case "idle": {
+      const breath = 1 + Math.sin(elapsedSeconds * 0.9) * 0.012;
+      mesh.body.scale.set(1, breath, 1);
+      return;
+    }
+    case "entertaining":
+      mesh.visualRoot.position.y = Math.abs(Math.sin(elapsedSeconds * 4)) * 0.12;
+      mesh.body.rotation.z = Math.sin(elapsedSeconds * 5) * 0.1;
+      mesh.leftArm.rotation.z = -0.22 + Math.sin(elapsedSeconds * 5) * 0.38;
+      mesh.rightArm.rotation.z = 0.22 - Math.sin(elapsedSeconds * 5) * 0.38;
+      return;
+    case "offline":
+      return;
+  }
+}
+
+function applySeatedLowerBody(mesh: AgentMeshParts): void {
+  mesh.leftLeg.rotation.x = -1.15;
+  mesh.rightLeg.rotation.x = -1.15;
+  mesh.leftFoot.rotation.x = 0.8;
+  mesh.rightFoot.rotation.x = 0.8;
+}
+
+function faceToward(group: THREE.Group, target: THREE.Vector3): void {
+  const direction = target.clone().sub(group.position);
+  if (direction.lengthSq() > 0.0001) {
+    group.rotation.y = Math.atan2(direction.x, direction.z);
+  }
+}

package/src/office/renderers/three/agent-body-instancing.ts

@@ -0,0 +1,119 @@
+import * as THREE from "three";
+
+import type { AgentMeshParts } from "./agent-mesh";
+import {
+  resolveAgentBodyPartRenderSpecs,
+} from "./agent-mesh";
+
+export type AgentBodyInstanceRecord = {
+  mesh: AgentMeshParts;
+  renderIndex: number;
+  visible: boolean;
+};
+
+type AgentBodyBatch = {
+  mesh: THREE.InstancedMesh;
+  capacity: number;
+  count: number;
+};
+
+const geometryCache = new Map<string, THREE.BoxGeometry>();
+const materialCache = new Map<number, THREE.MeshLambertMaterial>();
+const matrixHelper = new THREE.Matrix4();
+
+export class AgentBodyInstancedLayer {
+  private readonly scene: THREE.Scene;
+  private readonly batches = new Map<string, AgentBodyBatch>();
+
+  constructor(scene: THREE.Scene) {
+    this.scene = scene;
+  }
+
+  update(records: AgentBodyInstanceRecord[]): void {
+    this.batches.forEach((batch) => {
+      batch.count = 0;
+      batch.mesh.count = 0;
+    });
+
+    records.forEach((record) => {
+      if (!record.visible) {
+        return;
+      }
+      record.mesh.group.updateMatrixWorld(true);
+      resolveAgentBodyPartRenderSpecs(record.renderIndex).forEach((part) => {
+        const batch = this.ensureBatch(part, records.length);
+        const object = record.mesh[part.key];
+        object.updateMatrixWorld(true);
+        matrixHelper.copy(object.matrixWorld);
+        batch.mesh.setMatrixAt(batch.count, matrixHelper);
+        batch.count += 1;
+      });
+    });
+
+    this.batches.forEach((batch) => {
+      batch.mesh.count = batch.count;
+      batch.mesh.visible = batch.count > 0;
+      batch.mesh.instanceMatrix.needsUpdate = true;
+    });
+  }
+
+  dispose(): void {
+    this.batches.forEach((batch) => {
+      this.scene.remove(batch.mesh);
+    });
+    this.batches.clear();
+  }
+
+  private ensureBatch(
+    part: ReturnType<typeof resolveAgentBodyPartRenderSpecs>[number],
+    requiredCapacity: number,
+  ): AgentBodyBatch {
+    const key = `${part.key}:${part.width}:${part.height}:${part.depth}:${part.color}`;
+    const existing = this.batches.get(key);
+    if (existing && existing.capacity >= requiredCapacity) {
+      return existing;
+    }
+    if (existing) {
+      this.scene.remove(existing.mesh);
+    }
+
+    const mesh = new THREE.InstancedMesh(
+      getGeometry(part.width, part.height, part.depth),
+      getMaterial(part.color),
+      Math.max(requiredCapacity, 1),
+    );
+    mesh.castShadow = false;
+    mesh.receiveShadow = false;
+    mesh.name = `agentBody:${key}`;
+    this.scene.add(mesh);
+
+    const batch = { mesh, capacity: Math.max(requiredCapacity, 1), count: 0 };
+    this.batches.set(key, batch);
+    return batch;
+  }
+}
+
+export function createAgentBodyInstancedLayer(scene: THREE.Scene): AgentBodyInstancedLayer {
+  return new AgentBodyInstancedLayer(scene);
+}
+
+function getGeometry(width: number, height: number, depth: number): THREE.BoxGeometry {
+  const key = `${width}:${height}:${depth}`;
+  const cached = geometryCache.get(key);
+  if (cached) {
+    return cached;
+  }
+  const geometry = new THREE.BoxGeometry(width, height, depth);
+  geometryCache.set(key, geometry);
+  return geometry;
+}
+
+function getMaterial(color: number): THREE.MeshLambertMaterial {
+  const cached = materialCache.get(color);
+  if (cached) {
+    return cached;
+  }
+  const material = new THREE.MeshLambertMaterial({ color });
+  materialCache.set(color, material);
+  return material;
+}

package/src/office/renderers/three/agent-label.ts

@@ -0,0 +1,82 @@
+import * as THREE from "three";
+
+import type { AgentGameOfficeAgent } from "../../core/types";
+
+export type AgentLabelRecord = {
+  root: HTMLDivElement;
+  title: HTMLDivElement;
+  activity: HTMLDivElement;
+};
+
+export function formatAgentLabel(
+  agent: Pick<AgentGameOfficeAgent, "name" | "statusLabel" | "activityLabel">,
+): { title: string; activity?: string } {
+  const activity = agent.activityLabel?.trim();
+  return {
+    title: `${agent.name} · ${agent.statusLabel}`,
+    ...(activity ? { activity } : {}),
+  };
+}
+
+export function createAgentLabel(overlay: HTMLElement): AgentLabelRecord {
+  const root = document.createElement("div");
+  root.style.position = "absolute";
+  root.style.transform = "translate(-50%, -100%)";
+  root.style.padding = "4px 7px";
+  root.style.borderRadius = "6px";
+  root.style.background = "rgba(17, 24, 39, 0.76)";
+  root.style.color = "white";
+  root.style.font = "12px system-ui, sans-serif";
+  root.style.lineHeight = "1.25";
+  root.style.maxWidth = "180px";
+  root.style.textAlign = "center";
+  root.style.boxSizing = "border-box";
+
+  const title = document.createElement("div");
+  title.style.fontWeight = "600";
+  title.style.whiteSpace = "nowrap";
+  title.style.overflow = "hidden";
+  title.style.textOverflow = "ellipsis";
+  root.appendChild(title);
+
+  const activity = document.createElement("div");
+  activity.style.marginTop = "2px";
+  activity.style.fontSize = "11px";
+  activity.style.opacity = "0.88";
+  activity.style.whiteSpace = "nowrap";
+  activity.style.overflow = "hidden";
+  activity.style.textOverflow = "ellipsis";
+  activity.style.display = "none";
+  root.appendChild(activity);
+
+  overlay.appendChild(root);
+
+  return { root, title, activity };
+}
+
+export function updateAgentLabel(record: AgentLabelRecord, agent: AgentGameOfficeAgent): void {
+  const label = formatAgentLabel(agent);
+  record.title.textContent = label.title;
+  record.activity.textContent = label.activity ?? "";
+  record.activity.style.display = label.activity ? "block" : "none";
+  record.root.style.display = agent.sceneState === "offline" ? "none" : "block";
+}
+
+export function updateAgentLabelPosition(
+  record: AgentLabelRecord,
+  position: THREE.Vector3,
+  camera: THREE.Camera,
+  viewport: HTMLElement,
+): void {
+  const projected = position.clone();
+  projected.y += 2.2;
+  projected.project(camera);
+  const x = (projected.x * 0.5 + 0.5) * viewport.clientWidth;
+  const y = (-projected.y * 0.5 + 0.5) * viewport.clientHeight;
+  record.root.style.left = `${x}px`;
+  record.root.style.top = `${y}px`;
+}
+
+export function removeAgentLabel(record: AgentLabelRecord): void {
+  record.root.remove();
+}

package/src/office/renderers/three/agent-layout.ts

@@ -0,0 +1,72 @@
+import * as THREE from "three";
+
+import type { AgentGameOfficeAgent } from "../../core/types";
+import {
+  DESK_SEATS,
+  LARGE_MEETING_X,
+  LARGE_MEETING_Z,
+  LOUNGE_CENTER,
+  MEETING_SEATS,
+  OFFICE_LAYOUT_SCALE,
+  scaleOfficeX,
+  scaleOfficeZ,
+} from "./scene";
+
+export function resolveAgentPosition(
+  agent: AgentGameOfficeAgent,
+  index: number,
+  totalAgents: number,
+): THREE.Vector3 {
+  if (agent.targetPosition) {
+    return new THREE.Vector3(agent.targetPosition.x, 0, agent.targetPosition.z);
+  }
+  switch (agent.zoneId) {
+    case "desk":
+      return new THREE.Vector3(
+        DESK_SEATS[index % DESK_SEATS.length]!.x,
+        0,
+        DESK_SEATS[index % DESK_SEATS.length]!.z,
+      );
+    case "meeting-room":
+      return new THREE.Vector3(
+        MEETING_SEATS[index % MEETING_SEATS.length]!.x,
+        0,
+        MEETING_SEATS[index % MEETING_SEATS.length]!.z,
+      );
+    case "lounge":
+      return new THREE.Vector3(
+        LOUNGE_CENTER.x - 1.7 * OFFICE_LAYOUT_SCALE + (index % 4) * 1.15 * OFFICE_LAYOUT_SCALE,
+        0,
+        LOUNGE_CENTER.z - 0.8 * OFFICE_LAYOUT_SCALE + Math.floor(index / 4) * 0.95 * OFFICE_LAYOUT_SCALE,
+      );
+    case "pantry":
+      return new THREE.Vector3(scaleOfficeX(-9.2), 0, scaleOfficeZ(5.2 + index * 0.4));
+    case "review-area": {
+      const angle = (index / Math.max(totalAgents, 1)) * Math.PI * 2;
+      return new THREE.Vector3(
+        scaleOfficeX(0.5) + Math.cos(angle) * 2.2 * OFFICE_LAYOUT_SCALE,
+        0,
+        scaleOfficeZ(4) + Math.sin(angle) * 1.4 * OFFICE_LAYOUT_SCALE,
+      );
+    }
+    case "offstage":
+      return new THREE.Vector3(scaleOfficeX(-13), 0, scaleOfficeZ(8));
+  }
+}
+
+export function resolveAgentFacingTarget(agent: AgentGameOfficeAgent): THREE.Vector3 {
+  switch (agent.zoneId) {
+    case "desk":
+      return new THREE.Vector3(scaleOfficeX(-7), 0, scaleOfficeZ(-5));
+    case "meeting-room":
+      return new THREE.Vector3(LARGE_MEETING_X, 0, LARGE_MEETING_Z);
+    case "lounge":
+      return new THREE.Vector3(LOUNGE_CENTER.x, 0, LOUNGE_CENTER.z);
+    case "review-area":
+      return new THREE.Vector3(scaleOfficeX(0.5), 0, scaleOfficeZ(3.05));
+    case "pantry":
+      return new THREE.Vector3(scaleOfficeX(-9.2), 0, scaleOfficeZ(5.2));
+    case "offstage":
+      return new THREE.Vector3(scaleOfficeX(-13), 0, scaleOfficeZ(8));
+  }
+}

package/src/office/renderers/three/agent-mesh.ts

@@ -0,0 +1,145 @@
+import * as THREE from "three";
+
+import type { AgentGameOfficeAgent } from "../../core/types";
+import {
+  type AgentActivityEffects,
+  createAgentActivityEffects,
+} from "./agent-activity-effects";
+
+export type AgentMeshParts = {
+  group: THREE.Group;
+  visualRoot: THREE.Group;
+  body: THREE.Object3D;
+  head: THREE.Object3D;
+  leftEye: THREE.Object3D;
+  rightEye: THREE.Object3D;
+  hairTop: THREE.Object3D;
+  hairBack: THREE.Object3D;
+  leftArm: THREE.Object3D;
+  rightArm: THREE.Object3D;
+  leftLeg: THREE.Object3D;
+  rightLeg: THREE.Object3D;
+  leftFoot: THREE.Object3D;
+  rightFoot: THREE.Object3D;
+  activityGlow: THREE.Mesh;
+  activityEffects: AgentActivityEffects;
+};
+
+const agentColors = [0x2563eb, 0xdc2626, 0x059669, 0xd97706, 0x7c3aed, 0x0891b2];
+const skinColors = [0xffdbac, 0xf5cba7, 0xd4a574, 0xc68642];
+const hairColors = [0x3f2a1d, 0x111827, 0x7c2d12, 0x4b5563];
+export const AGENT_MESH_SCALE = 1.15;
+const activityGlowGeometry = new THREE.RingGeometry(0.56, 0.92, 32);
+const activityGlowMaterial = new THREE.MeshBasicMaterial({
+  color: 0x38bdf8,
+  transparent: true,
+  opacity: 0.35,
+  side: THREE.DoubleSide,
+  depthWrite: false,
+});
+
+export type AgentBodyPartKey =
+  | "body"
+  | "leftLeg"
+  | "rightLeg"
+  | "leftFoot"
+  | "rightFoot"
+  | "head"
+  | "leftEye"
+  | "rightEye"
+  | "hairTop"
+  | "hairBack"
+  | "leftArm"
+  | "rightArm";
+
+export type AgentBodyPartRenderSpec = {
+  key: AgentBodyPartKey;
+  width: number;
+  height: number;
+  depth: number;
+  color: number;
+  x: number;
+  y: number;
+  z: number;
+};
+
+export function resolveAgentBodyPartRenderSpecs(index: number): AgentBodyPartRenderSpec[] {
+  const shirt = agentColors[index % agentColors.length] ?? agentColors[0];
+  const skin = skinColors[index % skinColors.length] ?? skinColors[0];
+  const hair = hairColors[index % hairColors.length] ?? hairColors[0];
+
+  return [
+    { key: "body", width: 0.56, height: 0.62, depth: 0.34, color: shirt, x: 0, y: 0.92, z: 0 },
+    { key: "leftLeg", width: 0.18, height: 0.48, depth: 0.18, color: 0x1f2937, x: -0.14, y: 0.34, z: 0 },
+    { key: "rightLeg", width: 0.18, height: 0.48, depth: 0.18, color: 0x1f2937, x: 0.14, y: 0.34, z: 0 },
+    { key: "leftFoot", width: 0.24, height: 0.12, depth: 0.34, color: 0x111827, x: -0.14, y: 0.06, z: 0.08 },
+    { key: "rightFoot", width: 0.24, height: 0.12, depth: 0.34, color: 0x111827, x: 0.14, y: 0.06, z: 0.08 },
+    { key: "head", width: 0.5, height: 0.48, depth: 0.42, color: skin, x: 0, y: 1.48, z: 0 },
+    { key: "leftEye", width: 0.06, height: 0.07, depth: 0.035, color: 0x111827, x: -0.11, y: 1.5, z: 0.225 },
+    { key: "rightEye", width: 0.06, height: 0.07, depth: 0.035, color: 0x111827, x: 0.11, y: 1.5, z: 0.225 },
+    { key: "hairTop", width: 0.54, height: 0.14, depth: 0.46, color: hair, x: 0, y: 1.78, z: -0.01 },
+    { key: "hairBack", width: 0.52, height: 0.28, depth: 0.09, color: hair, x: 0, y: 1.61, z: -0.23 },
+    { key: "leftArm", width: 0.15, height: 0.56, depth: 0.17, color: shirt, x: -0.43, y: 0.88, z: 0 },
+    { key: "rightArm", width: 0.15, height: 0.56, depth: 0.17, color: shirt, x: 0.43, y: 0.88, z: 0 },
+  ];
+}
+
+export function createAgentMesh(agent: AgentGameOfficeAgent, index: number): AgentMeshParts {
+  const group = new THREE.Group();
+  group.scale.setScalar(AGENT_MESH_SCALE);
+  const visualRoot = new THREE.Group();
+  group.add(visualRoot);
+  const parts = Object.fromEntries(
+    resolveAgentBodyPartRenderSpecs(index).map((part) => [
+      part.key,
+      addPart(visualRoot, part.x, part.y, part.z),
+    ]),
+  ) as Record<AgentBodyPartKey, THREE.Object3D>;
+  const activityGlow = createActivityGlow();
+  const activityEffects = createAgentActivityEffects();
+  group.add(activityGlow);
+  group.add(activityEffects.group);
+  group.name = `agent_${agent.id}`;
+
+  return {
+    group,
+    visualRoot,
+    body: parts.body,
+    head: parts.head,
+    leftEye: parts.leftEye,
+    rightEye: parts.rightEye,
+    hairTop: parts.hairTop,
+    hairBack: parts.hairBack,
+    leftArm: parts.leftArm,
+    rightArm: parts.rightArm,
+    leftLeg: parts.leftLeg,
+    rightLeg: parts.rightLeg,
+    leftFoot: parts.leftFoot,
+    rightFoot: parts.rightFoot,
+    activityGlow,
+    activityEffects,
+  };
+}
+
+function addPart(
+  group: THREE.Group,
+  x: number,
+  y: number,
+  z: number,
+): THREE.Object3D {
+  const part = new THREE.Object3D();
+  part.position.set(x, y, z);
+  group.add(part);
+  return part;
+}
+
+function createActivityGlow(): THREE.Mesh {
+  const glow = new THREE.Mesh(
+    activityGlowGeometry,
+    activityGlowMaterial,
+  );
+  glow.rotation.x = -Math.PI / 2;
+  glow.position.y = 0.03;
+  glow.visible = false;
+  return glow;
+}