Chapter 630: XRControllerModelFactory

Core Idea

Allows to create controller models for WebXR controllers that can be added as a visual representation to your scene. XRControllerModelFactory will automatically fetch controller models that match what the user is holding as closely as possible. The models should be attached to the object returned from getControllerGrip in order to match the orientation of the held device.

This module depends on the motion-controllers third-part library.

Key Concepts

gltfLoader : GLTFLoader: A glTF loader that is used to load controller models.
onLoad : function: A callback that is executed when a controller model has been loaded.
path : string: The path to the model repository.

Code Examples

const controllerModelFactory = new XRControllerModelFactory();
const controllerGrip = renderer.xr.getControllerGrip( 0 );
controllerGrip.add( controllerModelFactory.createControllerModel( controllerGrip ) );
scene.add( controllerGrip );

What it demonstrates: Typical usage of XRControllerModelFactory.

Reference Tables

Constructor

Signature
`new XRControllerModelFactory( gltfLoader : GLTFLoader, onLoad : function )`

Properties

Property	Description
`.gltfLoader : GLTFLoader`	A glTF loader that is used to load controller models.
`.onLoad : function`	A callback that is executed when a controller model has been loaded.
`.path : string`	The path to the model repository.

Methods

Method	Description
`.createControllerModel( controller : Group ) : XRControllerModel`	Creates a controller model for the given WebXR controller.
`.setPath( path : string ) : XRControllerModelFactory`	Sets the path to the model repository.

Key Takeaways

Most relevant properties: gltfLoader, onLoad, path.
Key methods: createControllerModel, setPath.

Connects To

Source: examples/jsm/webxr/XRControllerModelFactory.js