Nex Wobble Office 3d Agents

A Pro-Grade 3D Virtual Workspace for AI Agents

This skill provides a complete, production-ready React Three Fiber scene for visualizing multiple AI agents in a 3D office environment. Built for Next.js, it handles the complex boilerplate of 3D rendering, state management, and asset loading, allowing you to focus on your agent logic.

What it does

• OfficeScene: A modular 3D environment including floors, walls, and customizable zones with floating HTML labels.
• BlobAgent System: A high-performance agent renderer that supports GLB model loading, skeleton cloning (allowing multiple independent instances of the same model), and procedural "wobble" animations.
• AliceAnimator: A bone-level procedural animation engine that drives rigged characters based on agent status (idle, walking, celebrating).
• Zustand Store: Reactive state management for real-time updates to agent positions, roles, and statuses.
• Pi-Optimized: Includes a "Pi Mode" toggle and a multi-stage Dockerfile specifically tuned for ARM64/Raspberry Pi deployments.

Why use this skill?

Rendering multiple independent 3D characters in React Three Fiber is notoriously tricky due to skeleton sharing and performance bottlenecks. This skill solves those issues out-of-the-box using the SkeletonUtils.clone pattern and status-driven emissive materials. It provides a polished, stylized visual layer for your agents that is significantly more engaging than a text-based dashboard.

Technical Foundation

Built with Next.js, Three.js, React Three Fiber, @react-three/drei, and Zustand. It ships with a Docker configuration ready for self-hosting with local network security defaults.

Built by Nex AI. More skills and info at nex-ai.be and slopsome.com.