Feature/vr

src/package.json

@@ -93,7 +93,7 @@
 		"svelte-dnd-action": "^0.9.50",
 		"svelte-french-toast": "^1.2.0",
 		"svelte-tweakpane-ui": "^1.3.0",
-		"three": "^0.168.0",
+		"three": "^0.165.0",
 		"webxr": "^0.0.0"
 	}
 }

src/src/lib/components/sandbox/ModelViewer.svelte

@@ -3,6 +3,7 @@
 	import { Box3, Vector3 } from 'three';
 	import type { Object3D } from 'three';
 	import { writable } from 'svelte/store';
+	import { XR } from '@threlte/xr';
 	import { Checkbox, Pane, ThemeUtils, Slider, List } from 'svelte-tweakpane-ui';
 	import { GLTF, OrbitControls, Sky, TransformControls, useGltfAnimations } from '@threlte/extras';
 
@@ -11,7 +12,7 @@
 
 	export let currentModel: string;
 
-	let model: any;
+	let model: Object3D;
 	let loaded = false;
 	let zoomSpeed: number = 1;
 	let selectedAnimation = '';
@@ -67,7 +68,16 @@
 	}
 </script>
 
-<VR />
+<VR {currentModel} />
+
+<XR>
+	<T.PerspectiveCamera
+		fov={25}
+		makeDefault
+		position={[0, 0, 5]}
+		on:create={({ ref }) => ref.lookAt(0, 0, 0)}
+	/>
+</XR>
 
 <T.PerspectiveCamera
 	fov={25}

src/src/lib/components/sandbox/VR.svelte

@@ -1,10 +1,82 @@
 <script lang="ts">
-	import { XR, Controller, Hand } from '@threlte/xr';
+	import { Vector3 } from 'three';
+	import { onDestroy } from 'svelte';
+	import { spring } from 'svelte/motion';
+	import { useTask } from '@threlte/core';
+	import { GLTF } from '@threlte/extras';
+	import { pointerControls, Controller, Hand } from '@threlte/xr';
+
+	export let currentModel: string;
+
+	const scale = spring(1);
+
+	let ref: any;
+	let point = new Vector3();
+	let lookAt = new Vector3();
+
+	const handleEvent =
+		(type: string) =>
+		(event: any): any => {
+			switch (type) {
+				case 'click': {
+					scale.set(1.5);
+					return;
+				}
+				case 'pointermove': {
+					point.copy(event.point);
+					return;
+				}
+				case 'pointerenter': {
+					scale.set(1.1);
+					return;
+				}
+				case 'pointerleave': {
+					scale.set(1);
+					return;
+				}
+				case 'pointermissed': {
+					scale.set(0.5);
+					return;
+				}
+			}
+		};
+
+	const lookForCursor = () => {
+		point.set(Math.random() - 0.5, 1.5 + Math.random() - 0.5, 1);
+	};
+
+	useTask(() => {
+		lookAt.lerp(point, 0.1);
+		if (ref) ref.lookAt(lookAt.x, lookAt.y, 1);
+	});
+
+	pointerControls('left');
+	pointerControls('right');
+
+	$: lookIntervalId = window.setInterval(lookForCursor, 1000);
+
+	onDestroy(() => {
+		clearInterval(lookIntervalId);
+	});
 </script>
 
-<XR>
-	<Hand left />
-	<Hand right />
-	<Controller left />
-	<Controller right />
-</XR>
+<Controller left />
+<Controller right />
+
+<Hand left />
+<Hand right />
+
+<GLTF
+	bind:ref
+	scale={$scale}
+	url={currentModel}
+	on:click={handleEvent('click')}
+	on:pointerdown={handleEvent('pointerdown')}
+	on:pointerup={handleEvent('pointerup')}
+	on:pointerover={handleEvent('pointerover')}
+	on:pointerout={handleEvent('pointerout')}
+	on:pointerenter={handleEvent('pointerenter')}
+	on:pointerleave={handleEvent('pointerleave')}
+	on:pointermove={handleEvent('pointermove')}
+	on:pointermissed={handleEvent('pointermissed')}
+/>