Skip to content

marlon360/whiteboard-vr

Repository files navigation

Whiteboard VR

Banner

A web-bassed online whiteboard which is platform independent. Use VR, Desktop or Mobile. Share your ideas or educate your students.

Preview

Demo

Video: https://www.youtube.com/watch?v=YjOsA-EFc9I&feature=youtu.be

Try it yourself: https://whiteboard-vr.herokuapp.com

How to run locally

  1. Clone the project git clone https://github.com/marlon360/whiteboard-vr.git
  2. Navigate to directory cd whiteboard-vr
  3. Install dependencies npm run install
  4. Build project npm run build
  5. Start Webserver (with socket.io) npm run start

Technologies

  • A-Frame
  • Three.js
  • Socket.io

Features

  • draw in VR
  • pick color in VR
  • draw in 2D with touch or mouse
  • pick color in 2D
  • change brush size in 2D
  • rooms for separation of groups
  • join group with room code
  • realtime sync of drawing

Roadmap

  • send current draw state if a new user joins
  • change brush size in VR
  • undo/redo
  • erase
  • polish UI for brush size and eraser in VR and 2D
  • audio chat
  • display number of people in a room
  • display user names
  • add images
  • save board
  • endless scrolling
  • permission system: view/edit or view
  • add text box
  • Pen/Eraser hand models in VR

Project structure

index.html for Desktop and Mobile View

vr.html for VR View

/components/ all components for A-Frame

About

🖍 A web-based collaborative whiteboard for VR, Desktop and Mobile

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published