···11+# threlte vr editor
22+33+Proof of concept for a live VR code editor using svelte, three.js, threlte and peer.js.
44+55+## How to use in your own project:
66+77+1. Make sure you have a threlte project set up (including the extras and xr packages), or create a new one by running:
88+99+```bash
1010+npm create threlte my-project
1111+cd my-project
1212+```
1313+1414+2. Install the following two dependencies:
1515+1616+```bash
1717+npm i threlte-uikit peerjs
1818+```
1919+2020+3. Copy the `editor` folder in `src/routes` from this project into your projects `src/routes` folder.
2121+2222+4. Either make sure your main scene is in `src/lib/components/Scene.svelte` or change the import in `src/routes/editor/[id]/vr/EditScene.svelte` to point to your main scene.
2323+2424+5. make sure your vr device and pc are on the same network.
2525+2626+6. run `npm run dev` in your project and navigate to `your-host-ip/editor/[your random id]/vr` on your vr device (replace `your random id` with your own string). You should see the scene from your main scene file.
2727+2828+7. Open `your-host-ip/editor/[your random id]/pc` on your pc (with the same `your 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.
2929+3030+8. 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.
3131+3232+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.
···11+import adapter from '@sveltejs/adapter-auto';
22+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
33+44+/** @type {import('@sveltejs/kit').Config} */
55+const config = {
66+ // Consult https://kit.svelte.dev/docs/integrations#preprocessors
77+ // for more information about preprocessors
88+ preprocess: vitePreprocess(),
99+1010+ kit: {
1111+ // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
1212+ // If your environment is not supported or you settled on a specific environment, switch out the adapter.
1313+ // See https://kit.svelte.dev/docs/adapters for more information about adapters.
1414+ adapter: adapter()
1515+ }
1616+};
1717+1818+export default config;
+18
tsconfig.json
···11+{
22+ "extends": "./.svelte-kit/tsconfig.json",
33+ "compilerOptions": {
44+ "allowJs": true,
55+ "checkJs": true,
66+ "esModuleInterop": true,
77+ "forceConsistentCasingInFileNames": true,
88+ "resolveJsonModule": true,
99+ "skipLibCheck": true,
1010+ "sourceMap": true,
1111+ "strict": true,
1212+ "moduleResolution": "bundler"
1313+ }
1414+ // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
1515+ //
1616+ // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
1717+ // from the referenced tsconfig.json - TypeScript does not merge them in
1818+}