Interaction

Multiplatform Interaction

Uva provides an interaction framework which works on desktop and in VR. By default any object in a scene which has a click, hoverEnter, hoverExit or grab function will be raycasted at runtime.

Click

this.click = event => {
	let controllerHand = event.hand // 'left' or 'right', defaults to 'right' when not in XR
	let intersectionDistance = event.distance // distance from raycaster
	let intersectionPoint = event.point // intersection Vector3 in world space
}

Click events happen once, each time you mouse click, hold the trigger, or pinch your fingers at a raycastable object. You need to unpress/unpinch in order to fire another click event. Click is called on only the closest intersecting raycastable object.

Hover

this.hoverEnter = event => {
	let d = event.distance
}
this.hoverExit = event => {}
this.hover = event => {
	let d = event.distance
}

Press

this.press = event => {
	let controllerHand = event.hand // 'left' or 'right'
	let intersectionDistance = event.distance // distance from raycaster
	let intersectionPoint = event.point // intersection Vector3 in world space
}

Press events are called each frame, when the mouse/hand/controller are held down/pinched while intersecting a raycastable object. Only the closest object has their press function called.

Grab

Grab is called when intersecting with an object, with a either the right mouse click, or VR grip controller button.

world.addGrabbable(object)

// To make a child object move an entire object which includes the child object
object.grabParent = someParentObject
world.addGrabbable(object)

// calling addGrabbale will set grabParent as object for all child objects
// this can be useful for other interaction
let grabParent = object.children[0].grabParent
grabParent == object // true

this.update = () => {
	if (this.grabbing) {
		// ... this executes when object is being grabbed when using default grab
	}
}

// on some other object
this.update = () => {
	if (controls.grabbing) {
		// Access the root grab object, when addGrabbable() is called on a nested object
		let grabObject = controls.intersections[0].object.grabParent
	}
}

You can also over-ride the function

this.grab = event => {
	this.position.copy(event.point)
}

Release

this.release = () => {
	this.selected = false
}

Release events occur when a trigger or grip button is released, or when either mouse buttons are released when intersecting with an object.

Hold

When you press an object which is has .hold it will continually call .hold() until you release the trigger. It also block all other interactions while holding.

This is useful in certain situations, for example UI sliders, steering wheels or moving/dragging objects.

this.hold = event => {}