Scape - VR World Builder

A WebXR-based VR application that lets you create your own virtual apartment by placing and arranging furniture in a blank 3D space.

• Blank Apartment Canvas: Start with an empty apartment space with floor, walls, and ceiling
• Furniture Placement: Select from various furniture items (chairs, tables, sofas, beds, shelves)
• VR Support: Full WebXR support for immersive VR experiences
• Desktop Mode: Place furniture using mouse clicks when not in VR
• Real-time 3D Rendering: Powered by Three.js with shadows and lighting

• Node.js (v16 or higher)
• Modern web browser with WebXR support (Chrome, Edge, or Firefox)
• VR headset (optional, for VR mode)

npm install

Run the development server:

npm run dev

The application will be available at https://localhost:3000

For Quest VR Testing on Local Network:

npm run dev:host

This will expose the server to your local network. Access it from your Quest VR browser using your computer's IP address (e.g., https://192.168.1.x:3000).

Note: You may need to accept the self-signed certificate warning in your Quest browser.

npm run build

The built files will be in the dist directory.

1. Open the application in your browser
2. Select a furniture type from the menu at the bottom
3. Click on the floor where you want to place the furniture
4. Repeat to add more items

1. Connect your VR headset
2. Click the "Enter VR" button
3. Use your VR controllers to point at the floor
4. Press the trigger button to place furniture at the pointed location
5. The controller beam changes color:
   • Green: Ready to place
   • Red: Placing furniture

• Chair: Small seating with backrest
• Table: Dining or work surface with legs
• Sofa: Comfortable seating with armrests
• Bed: Large sleeping surface with headboard
• Shelf: Vertical storage with multiple levels

• Three.js: 3D graphics rendering
• WebXR Device API: VR/AR capabilities
• Vite: Build tool and dev server
• JavaScript ES6+: Modern JavaScript features

scape/
├── src/
│   ├── main.js          # Application entry point
│   ├── scene.js         # Three.js scene setup
│   ├── apartment.js     # Apartment environment
│   ├── furniture.js     # Furniture creation and management
│   └── vrController.js  # VR controller handling
├── index.html           # HTML entry point
├── package.json         # Dependencies
└── vite.config.js       # Vite configuration

• The application targets 90fps for smooth VR experience
• Shadows are enabled for realistic rendering
• Grid helper shows floor boundaries

For the best experience:

• Desktop: Chrome, Edge, or Firefox with WebXR support
• Quest VR: Use the built-in Meta Quest Browser or Wolvic browser
• Allow access to VR devices when prompted
• HTTPS required for WebXR to work on Quest

1. Install Vercel CLI: npm i -g vercel
2. Run: vercel
3. Follow prompts and get your HTTPS URL
4. Access from Quest browser

1. Install Netlify CLI: npm i -g netlify-cli
2. Run: netlify deploy --prod
3. Get your HTTPS URL
4. Access from Quest browser

1. Push code to GitHub
2. Enable GitHub Pages in repository settings
3. Use the provided HTTPS URL

1. Run npm run dev:host
2. Find your computer's IP address:
   • Mac/Linux: ifconfig | grep "inet "
   • Windows: ipconfig
3. Access from Quest browser: https://YOUR_IP:3000
4. Accept certificate warning in Quest browser

• Save and load room layouts
• More furniture types and customization
• Room dimension adjustments
• Furniture rotation and scaling
• Color customization
• Export/import room designs

MIT

Contributions are welcome! Please feel free to submit a Pull Request.