Interactivity

Description

Previously interactive samples from three-mesh-ui/examples/ are now converted as re-usable pieces of code.

As they located in three-mesh-ui/examples folder, feel free to use them is they fit your need.

InteractiveRaycaster

Repeat the logic previously shown in interactive examples such as button, keyboard into a reuseable piece.

let camera, scene, renderer, vrControl, interactiveRaycaster;
function init(){
    // optional option for interactiveRaycaster 
    vrControl = VRControl( renderer );
    scene.add( vrControl.controllerGrips[ 0 ], vrControl.controllers[ 0 ] );

    interactiveRaycaster = new InteractiveRaycaster( camera, scene, renderer, vrControl );
    interactiveRaycaster.start();

    const button = new ThreeMeshUI.Text({textContent: "click me"});
    scene.add( button );
    
    interactiveRaycaster.addObject( button );

    // Interaction from raycaster with button can now be retrieved as event
    buttonPrevious.addEventListener( 'click' , (event) => {
    
        console.log( "me clicked, me happy!", event );

    });
}

function loop(){
    // same as ThreeMeshUI, raycaster need to be updated
    ThreeMeshUI.update();
    interactiveRaycaster.update();
}

InteractiveListener

Some interaction logics can be tweaked, reused and shared accross users and projects by extending the abstract class ThreeMeshUI.InteractiveListener.

Read three-mesh-ui/examples/interactive/listeners/InteractiveTooltip source code for sample.

Available listeners from three-mesh-ui/examples/ are :

• InteractiveCursor : Displays a html cursor when interactive objects are hovered.
• InteractiveTooltip : Displays a html tooltip when interactive objects are hovered.
• KeyboardListener : Handles and reports key interaction from virtual Keyboard to Text textContent property. Built-in with Keyboard element.