From 4b84be30cc64744234cab0aabbbc5da472ce9139 Mon Sep 17 00:00:00 2001 From: Pascal Galle Date: Sat, 4 Dec 2021 21:36:00 +0100 Subject: [PATCH 1/6] add first try on pointerlockcontrols --- .../controls/PointerLockControls.svelte | 154 ++++++++++++++++++ src/lib/index.js | 1 + .../03-first-person-camera/index.svelte | 36 ++++ .../_content/03-first-person-camera/meta.json | 3 + 4 files changed, 194 insertions(+) create mode 100644 src/lib/components/controls/PointerLockControls.svelte create mode 100644 src/routes/examples/_content/03-first-person-camera/index.svelte create mode 100644 src/routes/examples/_content/03-first-person-camera/meta.json diff --git a/src/lib/components/controls/PointerLockControls.svelte b/src/lib/components/controls/PointerLockControls.svelte new file mode 100644 index 0000000..f0745b7 --- /dev/null +++ b/src/lib/components/controls/PointerLockControls.svelte @@ -0,0 +1,154 @@ + diff --git a/src/lib/index.js b/src/lib/index.js index a4e3a76..95558fb 100644 --- a/src/lib/index.js +++ b/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'; diff --git a/src/routes/examples/_content/03-first-person-camera/index.svelte b/src/routes/examples/_content/03-first-person-camera/index.svelte new file mode 100644 index 0000000..e24a387 --- /dev/null +++ b/src/routes/examples/_content/03-first-person-camera/index.svelte @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + diff --git a/src/routes/examples/_content/03-first-person-camera/meta.json b/src/routes/examples/_content/03-first-person-camera/meta.json new file mode 100644 index 0000000..a7a0f66 --- /dev/null +++ b/src/routes/examples/_content/03-first-person-camera/meta.json @@ -0,0 +1,3 @@ +{ + "title": "First Person Controls" +} From 14a6d0ad42b90bcdeb2eba697db61749c938cace Mon Sep 17 00:00:00 2001 From: Pascal Galle Date: Sat, 4 Dec 2021 21:36:52 +0100 Subject: [PATCH 2/6] update pointerlockcontrols --- .../controls/PointerLockControls.svelte | 15 +++++++++++++++ .../_content/03-first-person-camera/index.svelte | 7 ++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/lib/components/controls/PointerLockControls.svelte b/src/lib/components/controls/PointerLockControls.svelte index f0745b7..d053d1f 100644 --- a/src/lib/components/controls/PointerLockControls.svelte +++ b/src/lib/components/controls/PointerLockControls.svelte @@ -4,6 +4,7 @@ import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js'; import { createEventDispatcher } from 'svelte'; import { onFrame } from '../../utils/lifecycle.js'; + import * as SC from 'svelte-cubed'; export let maxPolarAngle = Math.PI; export let minPolarAngle = 0; @@ -14,10 +15,14 @@ export let moveLeft = false; export let moveRight = false; export let canJump = false; + /** @type {SC.Mesh[]} */ + export let objects = []; let isLocked = false; let prevTime = performance.now(); const direction = new THREE.Vector3(); + /** @type {THREE.Raycaster} */ + let raycaster const { root } = setup(); const dispatch = createEventDispatcher(); @@ -26,6 +31,8 @@ let controls; root.controls.set((camera, canvas) => { + raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 10 ); + controls = new PointerLockControls(camera, canvas); controls.addEventListener('start', (e) => { @@ -125,6 +132,14 @@ if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta; if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta; + raycaster.ray.origin.copy( camera.position ); + raycaster.ray.origin.y -= 10; + + console.log(objects); + // const intersections = raycaster.intersectObjects( objects.map(object => object.mesh), false ); + + // const onObject = intersections.length > 0; + // if (onObject === true) { // velocity.y = Math.max(0, velocity.y); // canJump = true; diff --git a/src/routes/examples/_content/03-first-person-camera/index.svelte b/src/routes/examples/_content/03-first-person-camera/index.svelte index e24a387..026170c 100644 --- a/src/routes/examples/_content/03-first-person-camera/index.svelte +++ b/src/routes/examples/_content/03-first-person-camera/index.svelte @@ -1,6 +1,9 @@ - + From 2c5cc57b7f974f0e6c721aa8adc8b7ba18157be1 Mon Sep 17 00:00:00 2001 From: Pascal Galle Date: Mon, 6 Dec 2021 21:51:33 +0100 Subject: [PATCH 3/6] add basic pointer lock controls --- src/lib/components/Canvas.svelte | 3 + .../controls/PointerLockControls.svelte | 123 +----------------- .../03-first-person-camera/index.svelte | 4 +- 3 files changed, 11 insertions(+), 119 deletions(-) diff --git a/src/lib/components/Canvas.svelte b/src/lib/components/Canvas.svelte index ef93737..9717208 100644 --- a/src/lib/components/Canvas.svelte +++ b/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; diff --git a/src/lib/components/controls/PointerLockControls.svelte b/src/lib/components/controls/PointerLockControls.svelte index d053d1f..eb8c949 100644 --- a/src/lib/components/controls/PointerLockControls.svelte +++ b/src/lib/components/controls/PointerLockControls.svelte @@ -1,28 +1,12 @@ diff --git a/src/routes/examples/_content/03-first-person-camera/index.svelte b/src/routes/examples/_content/03-first-person-camera/index.svelte index 2931c10..24eecd9 100644 --- a/src/routes/examples/_content/03-first-person-camera/index.svelte +++ b/src/routes/examples/_content/03-first-person-camera/index.svelte @@ -2,8 +2,16 @@ import * as THREE from 'three'; import * as SC from 'svelte-cubed'; - let floor - let cube + /** @type {Record} */ + let pressedKeys = {} + let speed = 1 + $: { + if (pressedKeys['Shift']) { + speed = 5 + } else { + speed = 1 + } + } - +