SDK3DVerse_VirtualJoystick_Ext

Allow to create and bind virtual nipplejs joysticks. Just import extension and css to auto create default virtual joysticks if mobile device detected.

See https://www.npmjs.com/package/nipplejs.

This extension require the following CSS:

  • SDK3DVerse_VirtualJoystick_Ext.css This extension require the following extension installed:

Methods

bindJoystickManagerAsGamepad(manager, axisTypeopt)

Bind a virtual joystick manager to SDK3DVerse.streamer.inputRelay as a gamepad controller.

Parameters:
Name Type Attributes Default Description
manager Object

Nipplejs manager

axisType String <optional>
leftThumb

One of ('leftThumb', 'rightThumb', 'triggers'). For example if the SDK3DVerse.engineAPI.cameraAPI.getCamera().controller.type == CameraAPI.controller_type.editor:
- leftThumb move forward/backward and straff left/right
- rightThumb look around (camera orientation)
- triggers move up/down

createDefaultJoysticks()

Create default joystick layout

createJoystickManager(options) → {Object}

Create a virtual joysticks manager where options.zone is either a DOM element or a string. If options.zone is a string it's the id attribute of the DOM element of the zone, and if the DOM element does not exist then it's created and append to this.rootElement.

Parameters:
Name Type Description
options Object

Nipplejs options (see https://github.com/yoannmoinet/nipplejs#options)

Returns:

The created Nipplejs manager aka (see https://github.com/yoannmoinet/nipplejs#nipplejs-instance-manager)

Type
Object

destroyDefaultJoysticks()

Destroy default joystick layout

installExtension(options, rootElement)

Example
defaultNipplejsOptions: {
    zone        : null,
    color       : '#c7c7c7',
    mode        : 'static',
    dynamicPage : true,
    restJoystick: true,
    restOpacity : .8,
    size        : '5rem'
}
Parameters:
Name Type Description
options Object

The module options

Properties
Name Type Attributes Default Description
initDefaultJoysticks Boolean <optional>
true

Create default joystick layout

detectMobile Boolean <optional>
true

Create default joystick layout only if mobile detected

nipplejsOptions Object <optional>
defaultNipplejsOptions

Nipplejs default options used by SDK3DVerse_VirtualJoystick_Ext#createJoystickManager
See https://github.com/yoannmoinet/nipplejs#options.
It's merged with the defaultNipplejsOptions in the upper example.
options.nipplejsOptions.size can be set as "80px" or "2%" or "5rem".

rootElement Element

A DOM element on which for module:SDK3DVerse_VirtualJoystick_Ext#createJoystickManager to attach auto created nipplejs options.zone.
Used by module:SDK3DVerse_VirtualJoystick_Ext#createDefaultJoysticks.
Default: parent element of SDK3DVerse.streamer.canvas or document.body

isMobile(options) → {String}

Use mobile-detect (https://www.npmjs.com/package/mobile-detect) return new MobileDetect(window.navigator.userAgent).mobile()

Parameters:
Name Type Description
options Object

Nipplejs options (see https://github.com/yoannmoinet/nipplejs#options)

Returns:

Returns the detected phone or tablet type or null if it is not a mobile device. (see doc at https://hgoebl.github.io/mobile-detect.js/doc/MobileDetect.html)

Type
String

unbindJoystickManagerAsGamepad(manager)

Unbind a virtual joystick manager from SDK3DVerse.streamer.inputRelay as a gamepad controller.

Parameters:
Name Type Description
manager Object

Nipplejs manager