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(
can not search the script)
or could you teach me how to realize picking the button in vrcamera
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!
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)
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)
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.
Thank you for your help，all the time
Hi,
I’m always glad to help 
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 
1 Like
(
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();
});