Add: 3D Virtual Robotics Playground#11
Open
Lakshya-2440 wants to merge 2 commits intoalphaonelabs:mainfrom
Open
Add: 3D Virtual Robotics Playground#11Lakshya-2440 wants to merge 2 commits intoalphaonelabs:mainfrom
Lakshya-2440 wants to merge 2 commits intoalphaonelabs:mainfrom
Conversation
WalkthroughThis pull request introduces a complete browser-based 3D gesture-controlled robot assembly simulator. New files in the Changes
Sequence DiagramsequenceDiagram
participant User
participant MediaPipe as MediaPipe<br/>Hand Landmarker
participant GestureDetect as Gesture<br/>Classifier
participant RobotSim as Robot<br/>Simulator
participant Renderer as Canvas<br/>Renderer
loop Animation Frame
alt Gesture Mode
User->>MediaPipe: Capture hand landmarks
MediaPipe-->>GestureDetect: Hand positions
GestureDetect->>GestureDetect: Multi-frame classification<br/>(stable gesture detection)
GestureDetect-->>RobotSim: Gesture action<br/>(move, turn, pinch)
else Manual Mode
User->>RobotSim: Keyboard input
end
RobotSim->>RobotSim: Update robot state<br/>(position, rotation, arm)
RobotSim->>RobotSim: Check object pickup/drop<br/>(range & arm state)
RobotSim->>RobotSim: Scan lidar contacts<br/>(static scene & humans)
RobotSim-->>Renderer: Simulation state +<br/>lidar data
Renderer->>Renderer: Render main canvas<br/>(robot, objects, scene)
Renderer->>Renderer: Render camera preview<br/>& lidar panel
Renderer->>Renderer: Render toolbox UI<br/>(part selection)
Renderer-->>User: Visual feedback
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Adds a new “3D Virtual Robotics Playground” experience and links it into the existing landing page + 2D playground, providing a browser-based robot assembly/demo with gesture (MediaPipe) and manual controls.
Changes:
- Added a new
/3Dpage (HTML/CSS/JS) implementing a canvas-based robot “assembler” with gesture tracking and a manual fallback mode. - Added navigation entries in
index.htmlandhome.htmlto reach the new 3D experience. - Introduced new static assets under
3D/(plus an unintended.DS_Store).
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| index.html | Adds a CTA button to open the 3D playground from the main landing experience. |
| home.html | Adds a “Switch to 3D” link from the existing 2D playground UI. |
| 3D/index.html | New entry page for the 3D playground; loads versioned CSS/JS. |
| 3D/style.css | New CSS to full-screen/center the 3D canvas and hide the camera video element. |
| 3D/app.js | New implementation of the 3D/gesture + manual robot playground (canvas rendering + MediaPipe integration). |
| .DS_Store | macOS metadata file added to the repo (should not be committed). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@3D/app.js`:
- Around line 1606-1631: The setupCamera function can hang indefinitely if the
user leaves the permission prompt open or metadata never fires; modify
setupCamera to enforce a timeout (e.g., 8–15s) around the async operations: wrap
the navigator.mediaDevices.getUserMedia call and the Promise waiting on
video.onloadedmetadata in a race with a timeout Promise that rejects, and on
timeout clean up any partially created mediaStream (stop tracks) and throw a
clear timeout error; reference setupCamera, navigator.mediaDevices.getUserMedia,
mediaStream, and video.onloadedmetadata when implementing the race and cleanup.
- Around line 937-943: The hover handler currently flips selectedParts[category]
when lastHoveredCat !== category (using symbols lastHoveredCat, selectedParts,
TOOLBOX_PARTS, category), which causes parts to toggle on mere hover; to make
activation explicit remove that auto-toggle: stop mutating selectedParts inside
the hover branch and instead only update lastHoveredCat (or add a no-op
visual-only hover state), and move any part-selection logic to the explicit
click/pinch handler (the function that currently changes selectedParts on
click). If you want to keep hover feedback, implement a transient visual cue
(e.g., hoverState or isHovered flag) separate from selectedParts so hovering
shows UI feedback without changing actual selection.
In `@3D/index.html`:
- Around line 7-9: The three http-equiv meta tags (Cache-Control, Pragma,
Expires) provide limited real-world cache control and can be removed or replaced
with an inline comment clarifying they are informational only; rely on the
existing cache-busting query string (?v=${window.__assetVersion}) for asset
invalidation in this project and add a note to configure proper server-side
cache headers (nginx/.htaccess/CDN) for production environments.
- Line 19: The canvas element with id "simCanvas" is missing accessibility
attributes; update the <canvas id="simCanvas"> element to include role="img" and
a descriptive aria-label (matching the pattern used in home.html) so screen
readers can interpret the main interactive area—ensure the aria-label text
clearly describes the simulation or visual content presented by simCanvas.
In `@home.html`:
- Around line 92-96: The "Switch to 3D" anchor (href="/3D/index.html", contains
<span>Switch to 3D</span> and the large button classes) is inconsistent with the
"Assemble a robot in 3D" button on index.html which uses a .page-transition
overlay and a 1200ms delayed navigation; pick one approach and make both
consistent: either add the same page-transition overlay/CSS/JS to this file and
intercept clicks on the "Switch to 3D" link to show the .page-transition and
delay navigation by 1200ms, or remove the overlay/delay logic from the "Assemble
a robot in 3D" handler in index.html so both links navigate immediately. Ensure
you update the click handler targeting the button text ("Assemble a robot in
3D") or the anchor href="/3D/index.html" accordingly and keep ARIA/semantics
intact.
In `@index.html`:
- Around line 593-609: The anchor element with href "/3D/index.html" (className
"tech-btn" and onClick handler using document.getElementById('page-transition')
and setTimeout to set window.location.href) should use a relative path for
consistency—replace both href="/3D/index.html" and the string passed to
window.location.href in the setTimeout with a relative path like
"./3D/index.html" (or "3D/index.html"), keeping the existing overlay activation
and timing logic intact.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: alphaonelabs/coderabbit/.coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 71707aa5-b12b-4432-9f66-035bc265b79f
⛔ Files ignored due to path filters (1)
.DS_Storeis excluded by!**/.DS_Store
📒 Files selected for processing (5)
3D/app.js3D/index.html3D/style.csshome.htmlindex.html
A1L13N
reviewed
Mar 25, 2026
Contributor
Author
|
@A1L13N done |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Introduces an interactive 3D robot experience with gesture and manual controls, modular robot parts, and live sensor-style views for a more immersive robotics demo.
2026-03-25.16-00-14.mp4
Summary
This pull request introduces a new 3D Virtual Robotics Playground feature, providing an interactive browser-based robot simulation experience with gesture and manual control capabilities.
Key Changes
New 3D Application Module (
3D/directory):app.js (1,699 lines): Core simulation engine featuring:
index.html (28 lines): Application entrypoint with no-cache configuration, full-viewport canvas (1920×1080), camera video input element, and dynamic asset injection with cache-busting parameters
style.css (26 lines): Responsive full-viewport layout styling with CSS grid centering and aspect ratio constraints
Navigation Updates:
Functional Impact
User Experience Enhancement
The 3D Playground enriches the robotics demo experience by offering an immersive, interactive way to understand robot assembly and sensor-based decision making through either gesture recognition or traditional keyboard controls.