yonet / whiteboard-vr

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

Whiteboard VR

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

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