Skip to content

Commit f712627

Browse files
authored
app.control docs (#124)
* app.control docs * move to input.md file
1 parent dbb637e commit f712627

File tree

2 files changed

+81
-3
lines changed

2 files changed

+81
-3
lines changed

docs/scripting/app/App.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,11 @@ NOTE: Blender GLTF exporter renames objects in some cases, eg by removing spaces
6363

6464
Creates and returns a node of the specified name.
6565

66-
#### `.control(options)`: Control
66+
### `.control(options)`
67+
68+
Gets a controller for handling user input. See [Input](/docs/scripting/app/Input.md) for more info.
6769

68-
TODO: provides control to a client to respond to inputs and move the camera etc
6970

7071
#### `.configure(fields)`
7172

7273
Configures custom UI for your app. See [Props](/docs/scripting/app/Props.md) for more info.
73-

docs/scripting/app/Input.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# Input
2+
3+
## `app.control(options)`: Control
4+
5+
The `app.control()` method gives you access to user inputs like keyboard and mouse. It's the primary way to create interactive experiences. You can have multiple active controls, and they are prioritized.
6+
7+
```javascript
8+
// Get a control object
9+
const controls = app.control({ priority: 1 })
10+
11+
// The app will be cleaned up automatically, but if you need to manually release control:
12+
controls.release()
13+
```
14+
15+
**Options**
16+
17+
* `priority` (Number): A number that determines the order of input processing. Higher numbers have higher priority. Defaults to `0`. Player controls usually have a low priority, so scripts can override them.
18+
* `onButtonPress` (Function): A callback for any button press. `(prop, text) => {}`. `prop` is the button property name (e.g. `keyW`), `text` is the character for the key. Return `true` to consume the event.
19+
20+
21+
### Button Events
22+
23+
You can listen to press and release events for keyboard keys and mouse buttons.
24+
25+
```javascript
26+
// Listen for 'W' key press and release
27+
controls.keyW.onPress = () => { console.log('W pressed') }
28+
controls.keyW.onRelease = () => { console.log('W released') }
29+
30+
// Listen for left mouse button
31+
controls.mouseLeft.onPress = () => { console.log('Left mouse button pressed') }
32+
```
33+
34+
Each button object has the following properties:
35+
* `onPress` (Function): Callback for when the button is first pressed down.
36+
* `onRelease` (Function): Callback for when the button is released.
37+
* `down` (Boolean): `true` if the button is currently held down.
38+
* `pressed` (Boolean): `true` for the single frame when the button is first pressed.
39+
* `released` (Boolean): `true` for the single frame when the button is released.
40+
* `capture` (Boolean): If set to `true`, it will consume the event and prevent lower-priority controls from receiving it.
41+
42+
Here is a list of available button properties:
43+
44+
`keyA` to `keyZ`, `digit0` to `digit9`, `minus`, `equal`, `bracketLeft`, `bracketRight`, `backslash`, `semicolon`, `quote`, `backquote`, `comma`, `period`, `slash`, `arrowUp`, `arrowDown`, `arrowLeft`, `arrowRight`, `home`, `end`, `pageUp`, `pageDown`, `tab`, `capsLock`, `shiftLeft`, `shiftRight`, `controlLeft`, `controlRight`, `altLeft`, `altRight`, `enter`, `space`, `backspace`, `delete`, `escape`, `mouseLeft`, `mouseRight`, `metaLeft`.
45+
46+
### Pointer
47+
48+
Access pointer (mouse) information.
49+
50+
```javascript
51+
// Get pointer delta every frame
52+
app.on('update', () => {
53+
const pointerDelta = controls.pointer.delta
54+
if (pointerDelta.x !== 0 || pointerDelta.y !== 0) {
55+
console.log('Pointer moved:', pointerDelta.x, pointerDelta.y)
56+
}
57+
})
58+
```
59+
60+
* `pointer.coords` (Vector3): Pointer coordinates in normalized screen space (`[0,0]` to `[1,1]`).
61+
* `pointer.position` (Vector3): Pointer coordinates in screen pixels.
62+
* `pointer.delta` (Vector3): Change in pointer position since the last frame.
63+
* `pointer.locked` (Boolean): `true` if the pointer is currently locked.
64+
* `pointer.lock()`: Requests to lock the pointer to the screen.
65+
* `pointer.unlock()`: Releases the pointer lock.
66+
67+
### Scroll
68+
69+
Get mouse scroll wheel changes.
70+
71+
```javascript
72+
// The value is the scroll delta for the current frame.
73+
const scrollDelta = controls.scrollDelta.value
74+
```
75+
76+
* `scrollDelta.value` (Number): The scroll delta for the current frame.
77+
* `scrollDelta.capture` (Boolean): If `true`, consumes the scroll event.
78+

0 commit comments

Comments
 (0)