Pick the UI button in webvrcamera

Questions
1

https://www.babylonjs-playground.com/#0Y75BA#42
this example show that the handle can cast a ray and pick the button,so i want to know how to achieve this(:sweat_smile:can not search the script)
or could you teach me how to realize picking the button in vrcamera

2

Inviting @RaananW to the conversation

3

Hi @tomas,

WebVR supports pointer events, and using the interaction mode you will get rays that could interact with the buttons.

The simple ā€œmagicā€ are those two lines of code:

var vrhelper = scene.createDefaultVRExperience();
vrhelper.enableInteractions();

Those two lines will enable VR, and will enable interactions (emulate pointer events in VR).

Hope this helps!

4

Thanks for your last helpļ¼ŒI got it

there is another problem.I want to remove the camera with my handle pad,the problem is that when I pressed the pad,the debug display the cameraā€™s position has change,but in the screen the picture doā€™t changed at all.

Is there an acess to refresh the acreen every frame ?

So sorry to disturb you again.Wait for your replyļ¼

(Attachment vrCameraHelper.js is missing)

5

hey @tomas,

I am sorry, but I will need a better explanation. Maybe a demo?
I am not sure what you are trying to achieve (I think the confusing part for me is ā€œremoving the cameraā€ , which i donā€™t quite get)

6

hey @RaananW,
itā€™s the answer of the last reply,the following is the script screenshots.
I create a scence cope the babylon.js playground.The function picking UI button is successedļ¼Œproblem is that the vrCamera canā€™t move with the hand pandle.but you can see the origin of ray is changing once the pandle pressed.

image
image1438Ɨ4192 808 KB

Thank you for your helpļ¼Œall the time

7

Hi,

Iā€™m always glad to help :grin:

Sorry, but it would be much more helpful to have the code as text and be able to actually run it. Is that possible?

Thanks :blush:

8

(:rofl: :rofl: :rofl: Iā€™m a new user,and canā€™t upload attachments,so I stick all the script followling)
var canvas=document.querySelector("#renderCanvas");
var engine=new BABYLON.Engine(canvas, true);
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera=new BABYLON.WebVRFreeCamera(ā€œvrCameraā€,new BABYLON.Vector3(0,10,-15),scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas,true);
var light = new BABYLON.DirectionalLight(ā€œlightā€, new BABYLON.Vector3(0, -0.5, 1.0), scene);
light.position = new BABYLON.Vector3(0, 15, -6);
var score = 0;
// Create default environment
var environment = scene.createDefaultEnvironment({
skyboxSize: 300,
groundSize: 200
});
environment.setMainColor(new BABYLON.Color3(0.1, 0.3, 0.5));
// Create spheres
var numberOfSpheres = 10;
var spheres = [];
for (let index = 0; index < numberOfSpheres; index++) {
spheres[index] = BABYLON.Mesh.CreateIcoSphere(ā€œsphereā€, {radius:0.8, flat:true, subdivisions: 16}, this.scene);
spheres[index].material = new BABYLON.StandardMaterial(ā€œmaterialā€, scene)
spheres[index].material.diffuseColor = new BABYLON.Color3(0.588, 0.805, 0.896)
spheres[index].position = new BABYLON.Vector3(Math.random() * 20 - 10, 10, Math.random() * 10 - 5);
}
scene.activeCamera = camera;
var _tag=false;
var diff_move=0.02;
let cameraMesh=BABYLON.Mesh.CreateSphere(ā€œcamMeshā€,0.01,0.01,scene);
cameraMesh.position=camera.position;
//cameraMesh.rotation=camera.rotation;

// When a sphere is clicked update the score
scene.onPointerObservable.add((e)=>{
    if(e.type == BABYLON.PointerEventTypes.POINTERDOWN){
        spheres.forEach((s)=>{
            if(e.pickInfo.pickedMesh == s){
                fadeSphere(s);
            }
        });
        camera.initControllers();
        camera.onControllersAttachedObservable.add(() => {
            //console.log("333controllers  "+camera.controllers.length);
            for (let i = 0; i < camera.controllers.length; i++) {
                camera.controllers[i].onPadStateChangedObservable.add(function (stateObject) {
                    _tag = stateObject.pressed;
                });
                camera.controllers[i].onPadValuesChangedObservable.add(function (stateObject) {
                    if (_tag) {
                        let vec2 = new BABYLON.Vector2(stateObject.x, stateObject.y);
                        let value = BABYLON.Vector2.Dot(vec2, new BABYLON.Vector2(1, 0)) / vec2.length();
                        if (value < 0.7 && value > -0.7) {
                            if (vec2.y > 0) {
                                let rotateAngle=camera.deviceRotationQuaternion.toEulerAngles().y;
                                let direct=new BABYLON.Vector3(-Math.sin(rotateAngle),0,-Math.cos(rotateAngle));
                                cameraMesh.translate(direct,diff_move,BABYLON.Space.WORLD);
                            }
                            else {
                                let rotateAngle=camera.deviceRotationQuaternion.toEulerAngles().y;
                                let direct=new BABYLON.Vector3(Math.sin(rotateAngle),0,Math.cos(rotateAngle));
                                cameraMesh.translate(direct,diff_move,BABYLON.Space.WORLD);
                            }
                        }
                        else if (value < -0.7) {
                            let rotateAngle=camera.deviceRotationQuaternion.toEulerAngles().y;
                            let direct=new BABYLON.Vector3(-Math.cos(rotateAngle),0,Math.sin(rotateAngle));
                            cameraMesh.translate(direct,diff_move,BABYLON.Space.WORLD);
                        }
                        else if (value > 0.7) {
                            let rotateAngle=camera.deviceRotationQuaternion.toEulerAngles().y;
                            let direct=new BABYLON.Vector3(Math.cos(rotateAngle),0,-Math.sin(rotateAngle));
                            cameraMesh.translate(direct,diff_move,BABYLON.Space.WORLD);
                        }
                        console.log("control  "+_tag+cameraMesh.position+"--"+camera.position);
                    }
                });
            }
        });

    }
});
//add a function that scales and fades the sphere
function fadeSphere(clickedSphere){
    score++;
    clickedSphere.isPickable = false;
    button.textBlock.text = "Reset Game (Score: "+score+")";
    BABYLON.Animation.CreateAndStartAnimation("sphereScaleDown", clickedSphere, "scaling.x", 30, 10, 1, 0.5, 0);
    BABYLON.Animation.CreateAndStartAnimation("sphereScaleDown", clickedSphere, "scaling.y", 30, 10, 1, 0.5, 0);
    BABYLON.Animation.CreateAndStartAnimation("sphereScaleDown", clickedSphere, "scaling.z", 30, 10, 1, 0.5, 0);
    BABYLON.Animation.CreateAndStartAnimation("sphereVisAnim", clickedSphere, "visibility", 30, 10, 1, 0, 0);
};

function resetGame(){
    score = 0;
    button.textBlock.text = "Reset Game";
    for (let index = 0; index < numberOfSpheres; index++) {
        spheres[index].isPickable = true;
        spheres[index].visibility = 1;
        spheres[index].scaling.x = 1;
        spheres[index].scaling.y = 1;
        spheres[index].scaling.z = 1;
        spheres[index].position = new BABYLON.Vector3(Math.random() * 20 - 10, 10, Math.random() * 10 - 5);
    }
};

// Create a button to restart the game
var plane = BABYLON.Mesh.CreatePlane("plane",100);
plane.position.set(0, 2, 10);
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane);
var button = BABYLON.GUI.Button.CreateSimpleButton("button", "Start Game");
button.width = 0.25;
button.height = "40px";
button.color = "white";
button.background = "black";
button.onPointerUpObservable.add(function () {
    resetGame();
});
advancedTexture.addControl(button);
// Add vr
var helper = scene.createDefaultVRExperience({createDeviceOrientationCamera: false})
helper.enableInteractions();
return scene;

};
var scene=createScene();
engine.runRenderLoop(function(){
scene.render();
});
window.addEventListener(ā€˜resizeā€™,function(){
engine.resize();
});