Jump to content

VirtualJoySticksCamera - detach and attach Controls


Recommended Posts

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?

Link to comment
Share on other sites

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);
                case touchCamera:
                    scene.activeCamera = arcCamera;
                    arcCamera.attachControl(canvas, true);
                case arcCamera:
                    scene.activeCamera = freeCamera;
                    freeCamera.attachControl(canvas, true);
                    case vjCamera:
                    scene.activeCamera = vjCamera;
                    vjCamera.attachControl(canvas, true);

    return scene;

Link to comment
Share on other sites

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. :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...