VirtualJoySticksCamera - detach and attach Controls

[jessepmason]

Hello Everybody,

 

I am trying to switch active cameras from the Virtual joy stick camera to the Arc rotate camera and back.

Is there a good way to just hide the virtual Joy stick camera controls instead of removing them with the dispose function?

 

Right now I am using the dispose function and creating a new camera every time I want to switch between the two cameras.

But I want to just toggle on and off the joystick camera controls

 

any ideas?

[iiceman]

http://www.babylonjs-playground.com/#1FE2KF

 

Click one of the cubes to cycle between cameras. Is that what you want?

[jessepmason]

Thanks for the Help!

Your close, the problem exists when you switch to a Virtual Joystick camera because it creates a canvas or something for the controls.

 

If you take what you did but switch to a Virtual Joystick camera you will see the issue.

 

I tried creating it in the playground to show you but because the Virtual Joystick camera creates a canvas for the controls and the z-index is not set on the playground. It doesn't really work.

If someone knows how add the Virtual Joystick camera to the playground too that would be awesome!

but here is the code I tried to add into the plaground:

 

var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    // Setup a simple environment
    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
    var box1 = BABYLON.Mesh.CreateBox("b1", 1.0, scene);
    var box2 = BABYLON.Mesh.CreateBox("b2", 1.0, scene);
    box2.position.x = -3;
    var box3 = BABYLON.Mesh.CreateBox("b3", 1.0, scene);
    box3.position.x = 3;

    // ArcRotateCamera >> Camera rotating around a 3D point (here Vector zero)
    // Parameters : name, alpha, beta, radius, target, scene
    var arcCamera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
    arcCamera.setPosition(new BABYLON.Vector3(0, 0, 50));
    arcCamera.target = new BABYLON.Vector3(3, 0, 0);

    // FreeCamera >> You can move around the world with mouse and keyboard (LEFT/RIGHT/UP/DOWN)
    // Parameters : name, position, scene
    var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, 5), scene);
    freeCamera.rotation = new BABYLON.Vector3(0, Math.PI, 0);

    // TouchCamera >> Move in your world with your touch screen (or with your mouse, by drag/drop)
    // Parameters : name, position, scene
    var touchCamera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 0, 10), scene);
    touchCamera.rotation = new BABYLON.Vector3(0, Math.PI, 0);

    //added VJCamera
    var vjCamera = new BABYLON.VirtualJoysticksCamera("VJ_camera", new BABYLON.Vector3(0, 0, 5), scene);

    // Attach a camera to the scene and the canvas
    scene.activeCamera = freeCamera;
    freeCamera.attachControl(canvas, true);
    
    // When click event is raised
    window.addEventListener("click", function () {
        // We try to pick an object
        var pickResult = scene.pick(scene.pointerX, scene.pointerY);
        if (pickResult.hit) {
            // Switch between cameras
            switch (scene.activeCamera) {
                case freeCamera:
                    scene.activeCamera = touchCamera;
                    touchCamera.attachControl(canvas, true);
                    break;
                case touchCamera:
                    scene.activeCamera = arcCamera;
                    arcCamera.attachControl(canvas, true);
                    break;
                case arcCamera:
                    scene.activeCamera = freeCamera;
                    freeCamera.attachControl(canvas, true);
                    break;
                    case vjCamera:
                    scene.activeCamera = vjCamera;
                    vjCamera.attachControl(canvas, true);
                    break;
            }
        }
    });
    
    
    

    return scene;
}

[iiceman]

Sorry for the late reply, I actually don't know how to solve it. And since nobody else seems to have an idea it might be best to stick with the dispose and re-init for now. Let us know if you figure out something better, though.

[GameMonetize]

iiceman is right. The best option is to dispose / recreate. The process is fast and most of all: reliable

[jessepmason]

okay, will do! Thanks guys!