Interactivity - michal-repo/three-mesh-ui GitHub Wiki
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.