Creates a virtual joystick for mobile first person controls


## Description

Ensure to have the following tag in your html `<head>`:

`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />`

as this will prevent the screen from zooming in and out when using a finger to translate and another to rotate.

And if you are using an iphone, you may need to also add the following css:
- to prevent page reload when swiping down:

``` css
body {
	overscroll-behavior-y: none;
	position: fixed;
	overflow: hidden;
}
```

- and to disable page zoom from double tap or when using 2 fingers:

``` css
body {
	touch-action: none;
}
```


## Parameters

<table>
<thead>
	<tr>
		<th>Name</th>
		<th>Type</th>
		<th>Description</th>
	</tr>
</thead>
<tr>
	<td>colliderObject</td>
	<td><div class='bg-indigo-800 px-2 py-px text-white rounded-sm'>node_path</div></td>
	<td>collider object</td>
</tr>
<tr>
	<td>capsuleRadius</td>
	<td><div class='bg-yellow-800 px-2 py-px text-white rounded-sm'>float</div></td>
	<td>collision Capsule Radius</td>
</tr>
<tr>
	<td>capsuleHeight</td>
	<td><div class='bg-yellow-800 px-2 py-px text-white rounded-sm'>float</div></td>
	<td>collision Capsule Height</td>
</tr>
<tr>
	<td>physicsSteps</td>
	<td><div class='bg-orange-800 px-2 py-px text-white rounded-sm'>integer</div></td>
	<td>physics Steps</td>
</tr>
<tr>
	<td>gravity</td>
	<td><div class='bg-blue-800 px-2 py-px text-white rounded-sm'>vector3</div></td>
	<td>gravity</td>
</tr>
<tr>
	<td>translateSpeed</td>
	<td><div class='bg-yellow-800 px-2 py-px text-white rounded-sm'>float</div></td>
	<td>translation speed</td>
</tr>
<tr>
	<td>rotateSpeed</td>
	<td><div class='bg-yellow-800 px-2 py-px text-white rounded-sm'>float</div></td>
	<td>rotation speed</td>
</tr>
<tr>
	<td>customTranslateElement</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>specify a custom HTML element</td>
</tr>
<tr>
	<td>translateElementSelector</td>
	<td><div class='bg-purple-800 px-2 py-px text-white rounded-sm'>string</div></td>
	<td>jump HTML element selector</td>
</tr>
<tr>
	<td>jumpAllowed</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>jump Allowed</td>
</tr>
<tr>
	<td>jumpStrength</td>
	<td><div class='bg-yellow-800 px-2 py-px text-white rounded-sm'>float</div></td>
	<td>jump Force</td>
</tr>
<tr>
	<td>customJumpElement</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>specify a custom HTML element</td>
</tr>
<tr>
	<td>jumpElementSelector</td>
	<td><div class='bg-purple-800 px-2 py-px text-white rounded-sm'>string</div></td>
	<td>jump HTML element selector</td>
</tr>
<tr>
	<td>runAllowed</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>run Allowed</td>
</tr>
<tr>
	<td>runSpeedMult</td>
	<td><div class='bg-yellow-800 px-2 py-px text-white rounded-sm'>float</div></td>
	<td>run speed mult</td>
</tr>
<tr>
	<td>customRunElement</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>specify a custom HTML element</td>
</tr>
<tr>
	<td>runElementSelector</td>
	<td><div class='bg-purple-800 px-2 py-px text-white rounded-sm'>string</div></td>
	<td>jump HTML element selector</td>
</tr>
<tr>
	<td>updateCollider</td>
	<td><div class='bg-cyan-800 px-2 py-px text-white rounded-sm'>button</div></td>
	<td>recompute colliding geo</td>
</tr>
<tr>
	<td>startPosition</td>
	<td><div class='bg-blue-800 px-2 py-px text-white rounded-sm'>vector3</div></td>
	<td>start Position</td>
</tr>
<tr>
	<td>startRotation</td>
	<td><div class='bg-blue-800 px-2 py-px text-white rounded-sm'>vector3</div></td>
	<td>start Position</td>
</tr>
<tr>
	<td>reset</td>
	<td><div class='bg-cyan-800 px-2 py-px text-white rounded-sm'>button</div></td>
	<td>reset</td>
</tr>
<tr>
	<td>minPolarAngle</td>
	<td><div class='bg-yellow-800 px-2 py-px text-white rounded-sm'>float</div></td>
	<td>min polar angle</td>
</tr>
<tr>
	<td>maxPolarAngle</td>
	<td><div class='bg-yellow-800 px-2 py-px text-white rounded-sm'>float</div></td>
	<td>max polar angle</td>
</tr>
</table>