Pointerlocks

src/lib/components/Canvas.svelte

@@ -85,6 +85,9 @@
 	/** @param {Function} fn */
 	const run = (fn) => fn();
 
+	/**
+	 * @description is required to rerender the scene if something has changed
+	 */
 	const invalidate = () => {
 		if (frame) return;
 

src/lib/components/controls/PointerLockControls.svelte

@@ -0,0 +1,58 @@
+<script>
+	import { setup } from '../../utils/context.js';
+	import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';
+	import { createEventDispatcher } from 'svelte';
+
+	export let maxPolarAngle = Math.PI;
+	export let minPolarAngle = 0;
+
+	let isLocked = false;
+
+	const { root } = setup();
+	const dispatch = createEventDispatcher();
+
+	/** @type {PointerLockControls} */
+	let controls;
+
+	root.controls.set((camera, canvas) => {
+
+		controls = new PointerLockControls(camera, canvas);
+
+		controls.addEventListener('start', (e) => {
+			dispatch('start', e);
+		});
+
+		controls.addEventListener('end', (e) => {
+			dispatch('end', e);
+		});
+
+		controls.addEventListener('lock', (e) => {
+			isLocked = true;
+			dispatch('lock', e);
+		});
+
+		controls.addEventListener('unlock', (e) => {
+			isLocked = false;
+			dispatch('unlock', e);
+		});
+
+		// allows rotating the camera
+		controls.addEventListener('change', (e) => {
+			dispatch('change', e);
+
+			root.invalidate();
+		});
+
+		canvas.addEventListener('click', () => {
+			controls.lock();
+		});
+
+		return controls;
+	});
+
+	$: if (controls) {
+		controls.isLocked = isLocked;
+		controls.maxPolarAngle = maxPolarAngle;
+		controls.minPolarAngle = minPolarAngle;
+	}
+</script>

src/lib/index.js

@@ -14,6 +14,7 @@ export { default as OrthographicCamera } from './components/cameras/Orthographic
 
 // controls
 export { default as OrbitControls } from './components/controls/OrbitControls.svelte';
+export { default as PointerLockControls } from './components/controls/PointerLockControls.svelte';
 
 // lights
 export { default as AmbientLight } from './components/lights/AmbientLight.svelte';

src/routes/examples/_content/03-first-person-camera/index.svelte

@@ -0,0 +1,41 @@
+<script>
+	import * as THREE from 'three';
+	import * as SC from 'svelte-cubed';
+
+	let floor
+	let cube
+</script>
+
+<SC.Canvas
+	antialias
+	background={new THREE.Color('papayawhip')}
+	fog={new THREE.FogExp2('papayawhip', 0.1)}
+	shadows
+>
+	<SC.Group position={[0, -1 / 2, 0]}>
+		<SC.Mesh
+			bind:this={floor}
+			geometry={new THREE.PlaneGeometry(50, 50)}
+			material={new THREE.MeshStandardMaterial({ color: 'burlywood' })}
+			rotation={[-Math.PI / 2, 0, 0]}
+			receiveShadow
+		/>
+		<SC.Primitive
+			object={new THREE.GridHelper(50, 50, 'papayawhip', 'papayawhip')}
+			position={[0, 0.001, 0]}
+		/>
+	</SC.Group>
+
+	<SC.Mesh
+		bind:this={cube}
+		geometry={new THREE.BoxGeometry()}
+		material={new THREE.MeshStandardMaterial({ color: 0xff3e00 })}
+		scale={[1, 1, 1]}
+		castShadow
+	/>
+
+	<SC.PerspectiveCamera position={[1, 1, 3]} />
+	<SC.PointerLockControls />
+	<SC.AmbientLight intensity={0.6} />
+	<SC.DirectionalLight intensity={0.6} position={[-2, 3, 2]} shadow={{ mapSize: [2048, 2048] }} />
+</SC.Canvas>

src/routes/examples/_content/03-first-person-camera/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "First Person Controls"
+}