feat(3d-banner): integrate ThreeUI Three.js 3D WebGL Neural Core banner and...

feat(3d-banner): integrate ThreeUI Three.js 3D WebGL Neural Core banner and DeepSeek-V4 model family

mock-fe/apps/app/package.json

@@ -56,6 +56,7 @@
     "@shikijs/transformers": "^4.0.2",
     "@tanstack/react-query": "^5.90.3",
     "@tanstack/react-virtual": "^3.13.23",
+    "@types/three": "^0.185.4",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "ai": "^6.0.146",
@@ -85,6 +86,7 @@
     "shiki": "^4.0.2",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
+    "three": "^0.185.1",
     "tw-animate-css": "^1.4.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
     "zustand": "^5.0.12"

mock-fe/apps/app/src/app/lib/mock-data.ts

@@ -239,22 +239,37 @@ export const MOCK_AGENTS: AgentMember[] = [
   },
 ];
 
+export const DEEPSEEK_API_ENDPOINTS = {
+  openaiBaseUrl: "https://api.deepseek.com",
+  anthropicBaseUrl: "https://api.deepseek.com/anthropic",
+  version: "DeepSeek-V4-Flash-0731",
+  contextLength: "1M (1,000,000 tokens)",
+  maxOutput: "384K tokens",
+  pricing: {
+    inputCacheHit: "$0.007 / 1M tokens",
+    inputCacheMiss: "$0.22 / 1M tokens",
+    output: "$0.66 / 1M tokens",
+  },
+};
+
 export const MOCK_MODELS: ModelItem[] = [
-  { id: "claude-3-7-sonnet", providerID: "anthropic", name: "Claude 3.7 Sonnet", reasoning: true },
+  { id: "deepseek-v4-flash", providerID: "deepseek", name: "DeepSeek V4 Flash (1M Context, Thinking)", reasoning: true },
+  { id: "deepseek-v4-pro", providerID: "deepseek", name: "DeepSeek V4 Pro (1M Context, 384K Out)", reasoning: true },
+  { id: "deepseek-v4-flash-vision-exp", providerID: "deepseek", name: "DeepSeek V4 Vision Exp", reasoning: true },
+  { id: "claude-3-7-sonnet", providerID: "anthropic", name: "Claude 3.7 Sonnet (Hybrid)", reasoning: true },
   { id: "claude-3-5-sonnet", providerID: "anthropic", name: "Claude 3.5 Sonnet", reasoning: false },
   { id: "gpt-4o", providerID: "openai", name: "GPT-4o", reasoning: false },
   { id: "o1", providerID: "openai", name: "OpenAI o1", reasoning: true },
   { id: "o3-mini", providerID: "openai", name: "o3-mini", reasoning: true },
-  { id: "deepseek-chat", providerID: "deepseek", name: "DeepSeek V3", reasoning: false },
   { id: "deepseek-reasoner", providerID: "deepseek", name: "DeepSeek R1", reasoning: true },
 ];
 
 export const MOCK_PROVIDER_LIST = {
-  connected: ["anthropic", "deepseek", "openai"],
+  connected: ["deepseek", "anthropic", "openai"],
   default: {
+    deepseek: "deepseek-v4-flash",
     anthropic: "claude-3-7-sonnet",
     openai: "gpt-4o",
-    deepseek: "deepseek-reasoner",
   },
 };
 

mock-fe/apps/app/src/components/ui/banner-3d-canvas.tsx

+/** @jsxImportSource react */
+import * as React from "react";
+import * as THREE from "three";
+import { Sparkles, Cpu, Zap, Activity, ShieldCheck, Crown, Kanban, Layers, Code2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface Banner3DCanvasProps {
+  className?: string;
+  title?: string;
+  subtitle?: string;
+  showOverlay?: boolean;
+}
+
+export function Banner3DCanvas({
+  className,
+  title = "AI Company Autonomous Headquarters",
+  subtitle = "Hệ thống phối hợp đa tác tử thế hệ mới hỗ trợ DeepSeek-V4 (1M Context) & Claude 3.7",
+  showOverlay = true,
+}: Banner3DCanvasProps) {
+  const canvasContainerRef = React.useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  React.useEffect(() => {
+    const container = canvasContainerRef.current;
+    if (!container) return;
+
+    // 1. Scene & Camera Setup
+    const scene = new THREE.Scene();
+    const width = container.clientWidth || 900;
+    const height = container.clientHeight || 260;
+    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
+    camera.position.set(0, 0, 15);
+
+    // 2. WebGL Renderer
+    const renderer = new THREE.WebGLRenderer({
+      alpha: true,
+      antialias: true,
+      powerPreference: "high-performance",
+    });
+    renderer.setSize(width, height);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.domElement.style.position = "absolute";
+    renderer.domElement.style.inset = "0";
+    renderer.domElement.style.pointerEvents = "none";
+    container.appendChild(renderer.domElement);
+
+    // Center of 3D cluster shifted to the right side of banner
+    const clusterGroup = new THREE.Group();
+    clusterGroup.position.set(width > 768 ? 4.5 : 0, 0, 0);
+    scene.add(clusterGroup);
+
+    // 3. Central Core: Glowing Icosahedron
+    const coreGeo = new THREE.IcosahedronGeometry(2.6, 2);
+    const coreMat = new THREE.MeshStandardMaterial({
+      color: 0x00f0ff,
+      wireframe: true,
+      transparent: true,
+      opacity: 0.7,
+      roughness: 0.1,
+      metalness: 0.9,
+      emissive: 0x0284c7,
+      emissiveIntensity: 0.6,
+    });
+    const coreMesh = new THREE.Mesh(coreGeo, coreMat);
+    clusterGroup.add(coreMesh);
+
+    // Inner Glowing Core Sphere
+    const innerGeo = new THREE.SphereGeometry(1.4, 24, 24);
+    const innerMat = new THREE.MeshBasicMaterial({
+      color: 0x38bdf8,
+      wireframe: false,
+      transparent: true,
+      opacity: 0.8,
+    });
+    const innerMesh = new THREE.Mesh(innerGeo, innerMat);
+    clusterGroup.add(innerMesh);
+
+    // 4. Background Particle Cloud
+    const particleCount = 350;
+    const particleGeo = new THREE.BufferGeometry();
+    const particlePositions = new Float32Array(particleCount * 3);
+    const particleColors = new Float32Array(particleCount * 3);
+
+    const palette = [
+      new THREE.Color(0xf59e0b), // Founder Gold
+      new THREE.Color(0x818cf8), // PM Indigo
+      new THREE.Color(0x06b6d4), // Architect Cyan
+      new THREE.Color(0x34d399), // Coder Emerald
+      new THREE.Color(0xfb7185), // QA Rose
+    ];
+
+    for (let i = 0; i < particleCount; i++) {
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(Math.random() * 2 - 1);
+      const r = 3.5 + Math.random() * 6.5;
+
+      particlePositions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+      particlePositions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
+      particlePositions[i * 3 + 2] = r * Math.cos(phi);
+
+      const col = palette[i % palette.length];
+      particleColors[i * 3] = col.r;
+      particleColors[i * 3 + 1] = col.g;
+      particleColors[i * 3 + 2] = col.b;
+    }
+
+    particleGeo.setAttribute("position", new THREE.BufferAttribute(particlePositions, 3));
+    particleGeo.setAttribute("color", new THREE.BufferAttribute(particleColors, 3));
+
+    const particleMat = new THREE.PointsMaterial({
+      size: 0.22,
+      vertexColors: true,
+      transparent: true,
+      opacity: 0.9,
+      blending: THREE.AdditiveBlending,
+    });
+    const particleSystem = new THREE.Points(particleGeo, particleMat);
+    clusterGroup.add(particleSystem);
+
+    // 5. 5 Orbiting Agent Satellites
+    const agentNodes: THREE.Mesh[] = [];
+    const agentData = [
+      { color: 0xf59e0b, speed: 0.016, radius: 4.6, offset: 0 },
+      { color: 0x818cf8, speed: 0.013, radius: 5.2, offset: 1.25 },
+      { color: 0x06b6d4, speed: 0.019, radius: 4.2, offset: 2.5 },
+      { color: 0x34d399, speed: 0.015, radius: 4.8, offset: 3.75 },
+      { color: 0xfb7185, speed: 0.017, radius: 5.5, offset: 5.0 },
+    ];
+
+    agentData.forEach((data) => {
+      const nodeGeo = new THREE.SphereGeometry(0.38, 16, 16);
+      const nodeMat = new THREE.MeshStandardMaterial({
+        color: data.color,
+        emissive: data.color,
+        emissiveIntensity: 0.9,
+        roughness: 0.1,
+      });
+      const nodeMesh = new THREE.Mesh(nodeGeo, nodeMat);
+      clusterGroup.add(nodeMesh);
+      agentNodes.push(nodeMesh);
+    });
+
+    // 6. Dynamic Laser Rays
+    const lineMat = new THREE.LineBasicMaterial({
+      color: 0x38bdf8,
+      transparent: true,
+      opacity: 0.4,
+      blending: THREE.AdditiveBlending,
+    });
+    const lineGeo = new THREE.BufferGeometry();
+    const linePositions = new Float32Array(agentNodes.length * 2 * 3);
+    lineGeo.setAttribute("position", new THREE.BufferAttribute(linePositions, 3));
+    const lineMesh = new THREE.LineSegments(lineGeo, lineMat);
+    clusterGroup.add(lineMesh);
+
+    // 7. Lighting
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.9);
+    scene.add(ambientLight);
+
+    const pointLight = new THREE.PointLight(0x38bdf8, 3.0, 60);
+    pointLight.position.set(6, 6, 8);
+    scene.add(pointLight);
+
+    // 8. Mouse Tracking with Smooth Damping
+    let mouseX = 0;
+    let mouseY = 0;
+    let targetX = 0;
+    let targetY = 0;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = container.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width - 0.5;
+      const y = (e.clientY - rect.top) / rect.height - 0.5;
+      targetX = x * 2.0;
+      targetY = -y * 2.0;
+    };
+
+    container.addEventListener("mousemove", handleMouseMove);
+
+    // 9. Animation Loop
+    let animationFrameId: number;
+    let clock = new THREE.Clock();
+
+    const animate = () => {
+      animationFrameId = requestAnimationFrame(animate);
+      const elapsed = clock.getElapsedTime();
+
+      mouseX += (targetX - mouseX) * 0.06;
+      mouseY += (targetY - mouseY) * 0.06;
+
+      clusterGroup.rotation.y = elapsed * 0.2 + mouseX * 0.5;
+      clusterGroup.rotation.x = elapsed * 0.1 + mouseY * 0.5;
+
+      coreMesh.rotation.y = elapsed * 0.4;
+      coreMesh.rotation.z = elapsed * 0.2;
+      innerMesh.rotation.y = -elapsed * 0.6;
+      particleSystem.rotation.y = -elapsed * 0.12;
+
+      // Update orbits
+      const positions = lineMesh.geometry.attributes.position.array as Float32Array;
+
+      agentNodes.forEach((node, idx) => {
+        const d = agentData[idx];
+        const angle = elapsed * d.speed * 2.2 + d.offset;
+        const x = Math.cos(angle) * d.radius;
+        const y = Math.sin(angle * 0.9) * (d.radius * 0.6);
+        const z = Math.sin(angle) * (d.radius * 0.8);
+
+        node.position.set(x, y, z);
+
+        const posIdx = idx * 6;
+        positions[posIdx] = 0;
+        positions[posIdx + 1] = 0;
+        positions[posIdx + 2] = 0;
+        positions[posIdx + 3] = x;
+        positions[posIdx + 4] = y;
+        positions[posIdx + 5] = z;
+      });
+
+      lineMesh.geometry.attributes.position.needsUpdate = true;
+
+      renderer.render(scene, camera);
+    };
+
+    animate();
+
+    const handleResize = () => {
+      if (!container) return;
+      const w = container.clientWidth;
+      const h = container.clientHeight;
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+      renderer.setSize(w, h);
+      clusterGroup.position.set(w > 768 ? 4.5 : 0, 0, 0);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      window.removeEventListener("resize", handleResize);
+      container.removeEventListener("mousemove", handleMouseMove);
+      if (renderer.domElement && container.contains(renderer.domElement)) {
+        container.removeChild(renderer.domElement);
+      }
+      renderer.dispose();
+    };
+  }, []);
+
+  return (
+    <div
+      ref={canvasContainerRef}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className={cn(
+        "relative h-64 w-full overflow-hidden rounded-3xl border border-border/70 bg-gradient-to-r from-card/90 via-card/60 to-background/40 p-6 shadow-xl backdrop-blur-md transition-all duration-300 hover:border-primary/50",
+        className,
+      )}
+    >
+      {/* Glassmorphic UI Overlay */}
+      {showOverlay ? (
+        <div className="relative z-10 flex h-full flex-col justify-between pointer-events-none">
+          {/* Top Badges */}
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <div className="flex items-center gap-2 pointer-events-auto">
+              <span className="flex items-center gap-1.5 rounded-full border border-cyan-500/30 bg-cyan-500/10 px-3 py-1 font-mono text-[11px] font-medium text-cyan-400 shadow-xs backdrop-blur-md">
+                <Sparkles className="size-3.5 animate-pulse text-cyan-300" />
+                DeepSeek-V4-Flash & Pro (1M Context)
+              </span>
+              <span className="flex items-center gap-1.5 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2.5 py-1 font-mono text-[10px] text-emerald-400">
+                <span className="size-1.5 rounded-full bg-emerald-400 animate-ping" />
+                60 FPS WebGL 3D Canvas
+              </span>
+            </div>
+
+            <div className="hidden sm:flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground/80 pointer-events-auto">
+              <span className="rounded-md border border-border/40 bg-background/60 px-2 py-0.5">
+                Hit Cache: $0.007/1M
+              </span>
+              <span className="rounded-md border border-border/40 bg-background/60 px-2 py-0.5">
+                Latency: 1.4s
+              </span>
+            </div>
+          </div>
+
+          {/* Central Title & Subtitle */}
+          <div className="my-auto max-w-xl">
+            <h2 className="text-xl font-bold tracking-tight text-foreground sm:text-2xl drop-shadow-sm">
+              {title}
+            </h2>
+            <p className="mt-1 text-xs text-muted-foreground sm:text-sm">
+              {subtitle}
+            </p>
+          </div>
+
+          {/* Bottom Live Agent Orbits Indicator */}
+          <div className="flex flex-wrap items-center gap-2 pt-2 border-t border-border/20 pointer-events-auto">
+            <span className="text-[11px] font-medium text-muted-foreground flex items-center gap-1">
+              <Cpu className="size-3 text-cyan-400" /> 5 Agent Orbits:
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-md bg-amber-500/15 px-2 py-0.5 text-[10px] font-medium text-amber-400 border border-amber-500/20">
+              <Crown className="size-3" /> Thomas (CEO)
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-md bg-indigo-500/15 px-2 py-0.5 text-[10px] font-medium text-indigo-400 border border-indigo-500/20">
+              <Kanban className="size-3" /> Minh (PM)
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-md bg-cyan-500/15 px-2 py-0.5 text-[10px] font-medium text-cyan-400 border border-cyan-500/20">
+              <Layers className="size-3" /> An (Arch)
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-md bg-emerald-500/15 px-2 py-0.5 text-[10px] font-medium text-emerald-400 border border-emerald-500/20">
+              <Code2 className="size-3" /> Đức (Coder)
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-md bg-rose-500/15 px-2 py-0.5 text-[10px] font-medium text-rose-400 border border-rose-500/20">
+              <ShieldCheck className="size-3" /> Hà (QA)
+            </span>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

mock-fe/apps/app/src/react-app/domains/team/team-management-page.tsx

@@ -27,6 +27,7 @@ import {
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MOCK_AGENTS, type AgentMember } from "@/app/lib/mock-data";
+import { Banner3DCanvas } from "@/components/ui/banner-3d-canvas";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -153,6 +154,14 @@ export function TeamManagementPage({
         </div>
       </div>
 
+      {/* 3D WebGL Neural Core Banner */}
+      <div className="mt-6">
+        <Banner3DCanvas
+          title={`Trung Tâm Điều Hành 3D · ${workspaceName}`}
+          subtitle="Mô phỏng quỹ đạo liên kết 5 AI Agent thời gian thực trên nền tảng DeepSeek-V4 (1M Context) & ThreeUI WebGL"
+        />
+      </div>
+
       {/* KPI Stats Strip */}
       <div className="my-6 grid grid-cols-2 gap-4 md:grid-cols-4">
         <div className="rounded-2xl border border-border/60 bg-card p-4 shadow-xs">

mock-fe/pnpm-lock.yaml

@@ -176,6 +176,9 @@ importers:
       '@tanstack/react-virtual':
         specifier: ^3.13.23
         version: 3.13.23(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@types/three':
+        specifier: ^0.185.4
+        version: 0.185.4
       '@xterm/addon-fit':
         specifier: ^0.11.0
         version: 0.11.0
@@ -263,6 +266,9 @@ importers:
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
+      three:
+        specifier: ^0.185.1
+        version: 0.185.1
       tw-animate-css:
         specifier: ^1.4.0
         version: 1.4.0
@@ -1870,6 +1876,9 @@ packages:
     resolution: {integrity: sha512-j4kCkxyfGf9vd5SH/lQxXDr3LsatI9pm6Cr3eMnh1JZQxB4e3fbag7G2StjyUwXV7/90MOfja7xe8ntLIsoO1w==}
     deprecated: 'Moved to @daytona/sdk, same API, no breaking changes. Please update: npm uninstall @daytonaio/sdk && npm i @daytona/sdk'
 
+  '@dimforge/rapier3d-compat@0.12.0':
+    resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
+
   '@dotenvx/dotenvx@1.64.0':
     resolution: {integrity: sha512-6+xRpZaWuHXEqnhBjae+VmQI9Uaqw5Uzu/ScpO+W7ww9Zp3lHSNBoNjFcUxhrCyc7pRGQzyDjhKzloqrPHERiQ==}
     hasBin: true
@@ -4714,6 +4723,9 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@tweenjs/tween.js@23.1.3':
+    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -4809,9 +4821,15 @@ packages:
   '@types/set-cookie-parser@2.4.10':
     resolution: {integrity: sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw==}
 
+  '@types/stats.js@0.17.4':
+    resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
+
   '@types/statuses@2.0.6':
     resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
 
+  '@types/three@0.185.4':
+    resolution: {integrity: sha512-gAsBIC07NIFrxjbf7tH2t71c38uulFfk/RFoC7FNBSjMRAQ8J1x/RBvusX0N5PJouaYFJawXQqfCQ0RKUx/1nA==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -4821,6 +4839,9 @@ packages:
   '@types/validate-npm-package-name@4.0.2':
     resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
 
+  '@types/webxr@0.5.24':
+    resolution: {integrity: sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==}
+
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
@@ -6057,6 +6078,9 @@ packages:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
 
+  fflate@0.8.3:
+    resolution: {integrity: sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==}
+
   figures@6.1.0:
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
     engines: {node: '>=18'}
@@ -6919,6 +6943,9 @@ packages:
     resolution: {integrity: sha512-Sz8FzjzI0kN13GK/6MVEsVzMZEPvOhnmmI1lU5+/1cGOiK3QUahntrNNtdVeihrO7t9JpoH75iMNXg6R6uWflQ==}
     engines: {node: '>=18.0.0'}
 
+  meshoptimizer@1.1.1:
+    resolution: {integrity: sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==}
+
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
@@ -8271,6 +8298,9 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  three@0.185.1:
+    resolution: {integrity: sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg==}
+
   throttleit@2.1.0:
     resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==}
     engines: {node: '>=18'}
@@ -9883,6 +9913,8 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  '@dimforge/rapier3d-compat@0.12.0': {}
+
   '@dotenvx/dotenvx@1.64.0':
     dependencies:
       commander: 11.1.0
@@ -12562,6 +12594,8 @@ snapshots:
   '@turbo/windows-arm64@2.10.7':
     optional: true
 
+  '@tweenjs/tween.js@23.1.3': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.29.7
@@ -12683,8 +12717,19 @@ snapshots:
     dependencies:
       '@types/node': 20.12.12
 
+  '@types/stats.js@0.17.4': {}
+
   '@types/statuses@2.0.6': {}
 
+  '@types/three@0.185.4':
+    dependencies:
+      '@dimforge/rapier3d-compat': 0.12.0
+      '@tweenjs/tween.js': 23.1.3
+      '@types/stats.js': 0.17.4
+      '@types/webxr': 0.5.24
+      fflate: 0.8.3
+      meshoptimizer: 1.1.1
+
   '@types/trusted-types@2.0.7':
     optional: true
 
@@ -12692,6 +12737,8 @@ snapshots:
 
   '@types/validate-npm-package-name@4.0.2': {}
 
+  '@types/webxr@0.5.24': {}
+
   '@types/ws@8.18.1':
     dependencies:
       '@types/node': 20.12.12
@@ -13984,6 +14031,8 @@ snapshots:
       node-domexception: 1.0.0
       web-streams-polyfill: 3.3.3
 
+  fflate@0.8.3: {}
+
   figures@6.1.0:
     dependencies:
       is-unicode-supported: 2.1.0
@@ -14848,6 +14897,8 @@ snapshots:
 
   meriyah@6.1.4: {}
 
+  meshoptimizer@1.1.1: {}
+
   micromark-core-commonmark@2.0.3:
     dependencies:
       decode-named-character-reference: 1.3.0
@@ -16487,6 +16538,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  three@0.185.1: {}
+
   throttleit@2.1.0: {}
 
   tiny-async-pool@1.3.0: