Skip to main content

Picking and Interactions

WebGi includes PickingPlugin that handles pointer/mouse/touch interaction with the scene objects, object selection state, and Transform Controls. PickingPlugin provides events and configuration when the user interacts with the scene objects.

The plugin must be added to the viewer before use: 

const picking = await viewer.addPlugin(PickingPlugin);

Events​

hitObject event is dispatched whenever the user clicks/taps on a 3d object in the scene. To get the object:

picking.addEventListener('hitObject', (e)=>{
    console.log('Hit Event:', e);
    console.log('Hit Time:', e.time);
    console.log('Hit Intersect:', e.intersects.intersect);
    console.log('Hit Object:', e.intersects.selectedObject);

    // To disable object selection, set `e.intersects.selectedObject` to null before return
    e.intersects.selectedObject = null
    // or change the selection to something else
    e.intersects.selectedObject = e.intersects.selectedObject.parent
})

Other events:

  • selectedObjectChanged event is fired after hitObject with the final selected object.
  • hoverObjectChanged fired when the pointer enters or leaves hovering an object. (Hover is when the pointer is moving over an element but no button is pressed).

For more granular control over mouse interactions its possible to add events listeners directly to the canvas element from viewer.canvas and get the raw pointer data. See Pointer Events Web API