Module: SDK3DVerse_VirtualJoystick

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)

Parameters:

Name	Type	Attributes	Default	Description
`options`	Object			The module options
`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

Example

defaultNipplejsOptions: {
    zone        : null,
    color       : '#c7c7c7',
    mode        : 'static',
    dynamicPage : true,
    restJoystick: true,
    restOpacity : .8,
    size        : '5rem'
}

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