AxisWebInfra

An open-source robot teleoperation platform using MuJoCo physics simulation in the broswer!

Features • Quick Start • Controls • Add Tasks • Tech Stack

---

Overview

Control a Franka Emika Panda robotic arm with keyboard inputs to complete various manipulation tasks. This platform provides high-fidelity physics simulation, intuitive teleoperation controls, and trajectory recording capabilities — all running directly in your browser with no backend required.

Demo Video

demo_infra_task1.mp4

Simulation	Task Completion
Physics-based robot control	Goal-oriented manipulation tasks

---

Features

Core Capabilities MuJoCo Physics Engine High-fidelity simulation with realistic robot dynamics and contact physics 6DOF Teleoperation Intuitive keyboard controls for full end-effector motion control Task Framework Extensible architecture with built-in task completion verification

Developer Features Trajectory Recording Capture and export control data for learning and analysis Frontend-Only Architecture Zero backend dependencies — works out of the box Modular Design Easy to extend with new tasks, checkers, and robot models

---

Quick Start

Prerequisites

Requirement	Version
Node.js	18+
npm / yarn	Latest

Installation

# Clone the repository
git clone https://github.com/your-username/axis-mujoco-infra.git
cd axis-mujoco-infra

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

Production Build

npm run build
npm start

---

Keyboard Controls

Movement

Translation	Vertical
Key Action ↑ Forward (+Y) ↓ Backward (-Y) ← Left (-X) → Right (+X)	Key Action E Move Up (+Z) D Move Down (-Z)

Rotation

Key	Axis	Direction
Q / W	Roll	Positive / Negative
A / S	Pitch	Positive / Negative
Z / X	Yaw	Positive / Negative

Actions & Camera

Robot Actions Key Action Space Toggle Gripper R Reset Scene

Camera Controls Input Action Left Drag Orbit Right Drag Pan Scroll Zoom

---

Example Task: Close the Box

The platform includes a demonstration task where the robot must push a box lid closed.

Objective: Use the gripper to push the hinged lid until the box is fully closed.

Step	Action
1	Position gripper above the box lid
2	Apply downward pressure to close the lid
3	Verify complete closure (automatic detection)

---

Adding New Tasks

Step 1: Create Scene File

Create an MJCF XML scene in public/mujoco-assets/scenes/:

<!-- your_scene.xml -->
<mujoco>
  <include file="../includes/franka_panda.xml"/>
  <!-- Add your objects here -->
</mujoco>

Step 2: Register Task

Add your task definition to public/data/tasks.json:

{
  "id": 2,
  "name": "Your Task Name",
  "description": "Brief description of the task objective",
  "difficulty_stars": 2,
  "expected_duration": 300,
  "time_limit": 180,
  "mjcf_xml": "scenes/your_scene.xml",
  "checker_config": {
    "type": "joint_position",
    "joint_name": "body_name/joint_name",
    "target_position": 0.0,
    "tolerance": 0.05,
    "comparison": "less_than"
  },
  "steps": [
    { "order": 1, "description": "First step" },
    { "order": 2, "description": "Second step" }
  ]
}

Checker Types

Type	Description	Parameters
joint_position	Verify joint reaches target	joint_name, target_position, tolerance, comparison
gripper_open	Check gripper state	expected_open (boolean)
composite	Combine multiple checkers	checkers (array of checker configs)

Comparison Options: less_than, greater_than, equal (default)

---

Project Structure

├── public/
│   ├── data/
│   │   └── tasks.json                 # Task definitions
│   └── mujoco-assets/                 # MuJoCo models (~44MB)
│       ├── scenes/                    # Task scene files
│       ├── includes/                  # Shared model components
│       └── robots/franka_emika_panda/ # Robot meshes (67 files)
│
├── src/
│   ├── app/
│   │   ├── page.tsx                   # Home (redirects to /tasks)
│   │   ├── tasks/                     # Task selection page
│   │   ├── task-running/              # MuJoCo control interface
│   │   └── api/tasks/[id]/            # Task data endpoint
│   │
│   ├── components/
│   │   ├── GlobalNav.tsx              # Navigation
│   │   ├── GlobalFooter.tsx           # Footer
│   │   └── mujoco-framework-next/     # Core simulation framework
│   │       ├── main.js                # Entry point
│   │       ├── mujocoUtils.js         # MuJoCo helpers
│   │       ├── checkers/              # Task completion logic
│   │       └── utils/                 # IK, keyboard, debug utilities
│   │
│   └── lib/
│       ├── task-metadata.ts           # Task type definitions
│       ├── trajectory-types.ts        # Recording data structures
│       └── use-trajectory-recorder.ts # Recording React hook
│
└── package.json

---

Tech Stack

Next.js 16

React 19

TypeScript

Three.js

Tailwind CSS

Component	Technology
Framework	Next.js 16 (App Router)
UI Library	React 19
Physics Engine	MuJoCo (via WASM)
3D Rendering	Three.js
Styling	Tailwind CSS
Language	TypeScript

---

Acknowledgements

This project builds upon the excellent work of the open-source community:

• MuJoCo — Physics simulation engine by DeepMind
• mujoco_wasm — WebAssembly port enabling browser-based simulation
• Franka Emika — Panda robot model and specifications

---

License

This project is licensed under the Apache License 2.0 — see the LICENSE file for details.

---

Back to Top

_{Built for robotics research and education}