Skip to content

Add XrMenu script and example for WebXR hand/controller menus#8407

Merged
willeastcott merged 20 commits into
mainfrom
xr-menu
Jan 25, 2026
Merged

Add XrMenu script and example for WebXR hand/controller menus#8407
willeastcott merged 20 commits into
mainfrom
xr-menu

Conversation

@willeastcott

@willeastcott willeastcott commented Jan 25, 2026

Copy link
Copy Markdown
Contributor

Summary

xr-palm-menu-physics.mp4
  • Adds new XrMenu ESM script that provides a hybrid WebXR menu system supporting both hand tracking and controllers
  • Adds new xr-menu example demonstrating the menu in a VR gallery with interactive features

XrMenu Script Features

  • Hand Tracking Mode: Detects "palm facing camera" gesture to show menu anchored above the palm
  • Controller Mode: Toggle menu visibility with a configurable gamepad button
  • PlayCanvas UI System: Uses Screen, Element, and Button components for proper text rendering and interaction
  • Finger Touch Interaction: Activate buttons by touching with index finger (hand tracking)
  • Click Sound Feedback: Optional audio feedback when buttons are pressed
  • Smooth Following: Configurable interpolation speed for menu position/rotation
  • Input Blocking: Fires xr:input:blocked event to coordinate with navigation scripts
  • Customizable Appearance: Button dimensions, spacing, font size, colors, and texture

Example Features

  • VR gallery environment with physics colliders
  • Three menu actions: Spawn Cube, Reset, Exit XR
  • Physics-enabled cube spawning with dynamic rigidbodies
  • Keyboard shortcuts (B = spawn, R = reset) for desktop testing
  • Integrates XrSession, XrControllers, and XrNavigation scripts

Checklist

  • I have read the contributing guidelines
  • My code follows the project's coding standards
  • This PR focuses on a single change

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds a comprehensive WebXR menu system for the PlayCanvas engine with support for both hand tracking and controller inputs. The XrMenu script provides a hybrid UI that can detect palm gestures in hand tracking mode or toggle via controller buttons.

Changes:

  • Adds XrMenu ESM script with hand tracking palm detection, controller button toggle, and PlayCanvas UI integration for rendering menus
  • Adds xr-menu example demonstrating the menu in a VR gallery with physics-enabled cube spawning and interactive features
  • Includes supporting assets (button texture, click sound, font, thumbnails)

Reviewed changes

Copilot reviewed 5 out of 10 changed files in this pull request and generated 11 comments.

Show a summary per file
File Description
scripts/esm/xr-menu.mjs New XrMenu script implementing hybrid WebXR menu with hand/controller support, palm gesture detection, and UI rendering
examples/src/examples/xr/xr-menu.example.mjs Example demonstrating XrMenu integration with XR session, controllers, navigation, and physics
examples/src/examples/xr/xr-menu.ui.html HTML template for AR/VR entry buttons
examples/src/examples/xr/xr-menu.ui.css Styling for UI buttons and messages
examples/assets/textures/blue-button.png Button texture asset for menu appearance
examples/assets/sounds/click.mp3 Audio feedback for button interactions
examples/assets/fonts/roboto-extralight.json Font asset for menu text rendering
examples/thumbnails/xr_xr-menu_small.webp Small thumbnail for example
examples/thumbnails/xr_xr-menu_large.webp Large thumbnail for example

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread scripts/esm/xr-menu.mjs Outdated
Comment thread scripts/esm/xr-menu.mjs
Comment thread scripts/esm/xr-menu.mjs
Comment thread scripts/esm/xr-menu.mjs
Comment thread scripts/esm/xr-menu.mjs Outdated
Comment thread scripts/esm/xr-menu.mjs
Comment thread examples/src/examples/xr/xr-menu.example.mjs Outdated
Comment thread scripts/esm/xr-menu.mjs Outdated
Comment thread scripts/esm/xr-menu.mjs
Comment thread scripts/esm/xr-menu.mjs
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@willeastcott willeastcott merged commit c952a7c into main Jan 25, 2026
7 checks passed
@willeastcott willeastcott deleted the xr-menu branch January 25, 2026 23:36
willeastcott added a commit that referenced this pull request Jan 26, 2026
* Add XR Menu script and example

* Add XR gallery environment

* Add physics

* Improve AR and VR buttons

* Simplify example code

* Add camera controls

* Polish

* Tweak menu position in relation to the palm

* Add click sound

* Tweak lag and offset

* Add thumbs

* Update examples/src/examples/xr/xr-menu.example.mjs

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Implement feedback

* Fix docs about xr:menu:active event

* Use BUTTON_TRANSITION_MODE_TINT constant

* Improve JSDoc

* Update scripts/esm/xr-menu.mjs

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update scripts/esm/xr-menu.mjs

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Improve JSDoc

* Tweak colors

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: examples area: scripts area: xr XR related issue enhancement Request for a new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants