This repository provides a fully functional WebXR template for creating immersive virtual reality experiences. It is tailored for the Meta Quest 2 and other WebXR-compatible devices. The template includes essential features like object grabbing, haptic feedback, visual interaction indicators, and sound effects, making it an ideal starting point for your VR projects.
+++ Features +++
Grabbing and Interaction: Allows users to grab and move objects with VR controllers. Haptic Feedback: Provides tactile feedback when objects are grabbed. Visual Indicators: Highlights interactive objects when hovered over. Audio Effects: Plays hover and grab sound effects for better immersion. Customizable Environment: Includes a simple ground plane, lighting, and an interactive object to demonstrate functionality.
-
Save the code locally as index.html or host it on a platform like Glitch, GitHub Pages, or Replit.
-
Open the page using the Oculus Browser on your Quest 2.
-
Use your controllers to interact with the environment.
<><><> Repository Structure <><><> / ├── index.html # The main HTML file containing the WebXR implementation ├── hover.mp3 # Hover sound effect (replaceable with custom sound) ├── grab.mp3 # Grab sound effect (replaceable with custom sound) └── README.md # Documentation for using and customizing the template
Getting Started ++++++++++++++++++++++++++
- Clone the Repository
git clone https://github.com/yourusername/WebXR-VR-Template.git cd WebXR-VR-Template
- Install Dependencies
No external dependencies are required since the project uses Three.js through a CDN.
- Add Your Own Assets
{Replace the provided hover.mp3 and grab.mp3 files with your own audio files in the same directory.} {Customize the index.html file to add new objects, environments, and interactions.}
<>
++ Customization ++
{The ground plane and lighting can be edited in the index.html file:}
const groundGeometry = new THREE.PlaneGeometry(100, 100); const groundMater ial = new THREE.MeshStandardMaterial({ color: 0x008800 }); const ground = new THREE.Mesh(groundGeometry, groundMaterial);
<>
+++ Add New Interactive Objects +++
{Create a new mesh:}
const newObject = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.5, 0.5), new THREE.MeshStandardMaterial({ color: 0x0000ff })); newObject.position.set(2, 0.25, -2); newObject.userData.isGrabbable = true; // Mark as grabbable newObject.userData.originalColor = newObject.material.color.clone(); scene.add(newObject);
{Ensure that the object has the property userData.isGrabbable = true.}
<>
{Change Audio Effects}
Replace the existing sound files (hover.mp3 and grab.mp3) with your custom sound files. Ensure they have the same names or update the file paths in the code:
audioLoader.load('hover.mp3', buffer => hoverSound.setBuffer(buffer)); audioLoader.load('grab.mp3', buffer => grabSound.setBuffer(buffer)); Add New Interactions Customize the event listeners for controller input to define additional behaviors:
controller.addEventListener('selectstart', customFunction); controller.addEventListener('selectend', anotherCustomFunction); Supported Devices This template works on devices that support the WebXR API. Tested on:
Meta Quest 2 (Oculus Browser) WebXR-enabled desktop browsers with VR emulators
We welcome contributions! To contribute:
Fork the repository. Create a feature branch. Commit your changes. Open a pull request.
+++ License +++ This project is licensed under the MIT License. See LICENSE for details.
<<>><<>>
+++Future Enhancements (Suggestions)+++
<> Spatial Audio: Make sound effects originate from the object’s position in 3D space. <> Snap-to-Grid: Implement snapping for objects when released. <> Multiplayer Support: Enable collaborative VR environments using WebRTC or libraries like three-meshroom. <> Advanced Object Interaction: Add physics-based interactions using a library like Ammo.js.
Support For help or feature requests, open an issue in this repository or contact me at [email protected]
<Happy Coding! 🚀>
