Proof of concept for a live VR code editor using svelte, three.js, threlte and peer.js.
threlte-vr-code-editor-demo.mp4
- Make sure you have a threlte project set up (including the extras and xr packages), or create a new one by running:
npm create threlte my-project
cd my-project
- Install the following two dependencies:
npm i threlte-uikit peerjs
-
Copy the
editor
folder insrc/routes
from this project into your projectssrc/routes
folder. -
Either make sure your main scene is in
src/lib/components/Scene.svelte
or change the import insrc/routes/editor/[id]/vr/EditScene.svelte
to point to your main scene. -
make sure your vr device and pc are on the same network.
-
run
npm run dev
in your project and navigate toyour-host-ip/editor/[your random id]/vr
on your vr device (replaceyour random id
with your own string). You should see the scene from your main scene file. -
Open
your-host-ip/editor/[your random id]/pc
on your pc (with the sameyour random id
as in step 5). Click connect, choose what you want to share (e.g. your screen or just a window) and click sharne. -
You should now see your pc screen in the vr scene. Edit the scene with using your computers mouse and keyboard and see the changes in vr.
Note: some threlte components don't work in vr. Specificially when installing a fresh threlte project, the <ContactShadow>
component will cause the scene to not render in vr. You can remove it from your main scene file to fix this.