Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(KeyboardControls): support non-qwerty keyboards (#573) #574

Merged
merged 3 commits into from
Jan 2, 2025
Merged

fix(KeyboardControls): support non-qwerty keyboards (#573) #574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8155f16
fix(KeyboardControls): support non-QWERTY keyboards
andretchen0 Dec 25, 2024
1d410b3
docs(KeyboardControls): add mention of QWERTY/non-QWERTY layouts
andretchen0 Dec 25, 2024
5306864
docs(KeyboardControls): fix wording/formatting
andretchen0 Dec 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 15 additions & 14 deletions docs/guide/controls/keyboard-controls.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
# KeyboardControls

KeyboardControls is a special type of controller that allows you to move through the scene using your keyboard, is based on the Unreal Engine Controls.

<DocsDemo>
<KeyboardControlsDemo />
</DocsDemo>

`<KeyboardControls />` is a simple keyboard controller for the camera. The camera's movements are bound to:

* WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards
* Arrow keys

::: info
:memo: KeyboardControls uses `PointerLockControls` under the hood, meaning you can use [all the props from `<PointerLockControls />`](pointer-lock-controls#props) as well as it events.
`<KeyboardControls />` uses `<PointerLockControls />` under the hood. You can use [`<PointerLockControls />` props and events](pointer-lock-controls#props).
:::

## Usage

You can use the ASDW or the arrows keys to move and your mouse to explore your scene.

```vue{3,10}
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
Expand All @@ -31,18 +32,18 @@ import { KeyboardControls, Box } from '@tresjs/cientos'
```

::: warning
Is really important that the Perspective camera is set first in the canvas. Otherwise might break.
You must add a `<TresPerspectiveCamera />` to your scene before adding `<KeyboardControls />`.
:::

## Props

| Prop | Description | Default |
| :---------------------- | :----------------------------------- | ------- |
| **moveSpeed** | Speed movement. | 0.2 |
| **makeDefault** | If `true`, the controls will be set as the default controls for the scene. | `true` |
| **camera** | The camera to control. | `undefined` |
| **domElement** | The dom element to listen to. | `undefined` |
| **selector** | Accept an id element as string, if it is set, the new element will be used as the trigger | `undefined` |
| Prop | Description | Default |
| :-------------- | :----------------------------------- | ------- |
| **moveSpeed** | Speed movement. | 0.2 |
| **makeDefault** | If `true`, the controls will be set as the default controls for the scene. | `true` |
| **camera** | The camera to control. | `undefined` |
| **domElement** | The DOM element to listen to. | `undefined` |
| **selector** | Accept an id element as string. If set, the new element will be used as the trigger | `undefined` |

## Events

Expand All @@ -52,5 +53,5 @@ Is really important that the Perspective camera is set first in the canvas. Othe

| Event | Description |
| :--------- | :--------------------------------------------------------------- |
| **isLock** | Return `true` if "lock", `false` if "unlock" events are trigger. |
| **isLock** | Return `true` if "lock", `false` if "unlock" events are triggered. |
| **change** | Dispatched when the control changes. |
10 changes: 5 additions & 5 deletions src/core/controls/KeyboardControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,14 +70,14 @@ watch(props, () => {
const sidewardMove = ref(0)
const forwardMove = ref(0)

const { w, s, a, d, Up, Down, Left, Right } = useMagicKeys()
const { KeyW, KeyA, KeyS, KeyD, Up, Down, Left, Right } = useMagicKeys()

watchEffect(() => {
if (a.value || Left.value) { sidewardMove.value = -moveSpeed.value }
else if (d.value || Right.value) { sidewardMove.value = moveSpeed.value }
if (KeyA.value || Left.value) { sidewardMove.value = -moveSpeed.value }
else if (KeyD.value || Right.value) { sidewardMove.value = moveSpeed.value }
else { sidewardMove.value = 0 }
if (w.value || Up.value) { forwardMove.value = moveSpeed.value }
else if (s.value || Down.value) { forwardMove.value = -moveSpeed.value }
if (KeyW.value || Up.value) { forwardMove.value = moveSpeed.value }
else if (KeyS.value || Down.value) { forwardMove.value = -moveSpeed.value }
else { forwardMove.value = 0 }
})

Expand Down
Loading