[SOLVED] Best way to do spatial interface (3D UI) with WebXR (VR)?

Help & Support
1

I’m looking for the best way to do this kind of UI with VR (WebXR):

048_Inspector - Layer

The 3D screen element is good to show elements. But currently, I’m not sure if it’s suitable to do intersectsRay() and have collider in this 3DScreen space to activate the UI element I’m pointing at.

This script is a way to interact with 3D objects in the [VR Starting Kit]. (https://playcanvas.com/project/435780/overview/starter-kit-vr).
I’m not sure If I should work to replicate this script with 3D UI.

ObjectPicker.prototype.pick = function(controller) {
    var hovered = null;
    var distance = Infinity;
    
    this.ray.set(controller.inputSource.getOrigin(), controller.inputSource.getDirection());

    // iterate through each interactible entities
    for(var e = 0; e < this.entities.length; e++) {
        if (! this.entities[e].model)
            continue;

        // get mesh
        var mesh = this.entities[e].model.meshInstances[0];

        // check if it intersects with controllers ray
        if (mesh.aabb.intersectsRay(this.ray, this.vec3A)) {
            // check distance between ray origin and intersecting point
            var dist = this.vec3A.distance(this.ray.origin);
            if (dist < distance) {
                // if closer than previous candidate, remember it
                distance = dist;
                hovered = this.entities[e];
                this.vec3B.copy(this.vec3A);
            }
        }
    }

    if (hovered) {
        controller.fire('hover', hovered, this.vec3B);
    } else if (controller.hoverEntity) {
        controller.fire('blur');
    }
};

What are your recommendations?

2

The UI system has been integrated with WebXR :grimacing:

https://developer.playcanvas.com/en/tutorials/webxr-ray-input/

1 Like
3

Oh my bad!

I remember seeing this demo in the past. :roll_eyes: (facepalm)

Thank you for your answer.