Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Tablet touch camera

Arktius

By Arktius,
in Questions & Answers

 Share

Recommended Posts

Arktius Newbie

Arktius

Posted
Posted

Hey guys,

 

I want to navigate the camera with the touch features from smartphone/tablet. Neither ArcRotate,Free or Touch-Camera works.

Is Hand.js necessary? 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Babylon - Basic scene</title>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
    <script type="text/javascript" src="http://cdn.babylonjs.com/2-3/babylon.js"></script>
    <script type="text/javascript" src="./hand.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script type="text/javascript">
    // Get the canvas element from our HTML below
    var canvas = document.querySelector("#renderCanvas");
    // Load the BABYLON 3D engine
    var engine = new BABYLON.Engine(canvas, true);
    // -------------------------------------------------------------
    // Here begins a function that we will 'call' just after it's built
    var createScene = function () {
        // Now create a basic Babylon Scene object
        var scene = new BABYLON.Scene(engine);
        // Change the scene background color to green.
        scene.clearColor = new BABYLON.Color3(0, 1, 0);
        // This creates and positions a free camera
        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
        // This targets the camera to scene origin
        camera.setTarget(BABYLON.Vector3.Zero());
        // This attaches the camera to the canvas
        camera.attachControl(canvas, false);
        // This creates a light, aiming 0,1,0 - to the sky.
        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        // Dim the light a small amount
        light.intensity = .5;
        // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene
        var sphere = BABYLON.Mesh.CreateSphere("sphere1", 10, 1, scene);
        // Move the sphere upward 1/2 its height
        sphere.position.y = 1;
        // Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene
        var ground = BABYLON.Mesh.CreateGround("ground1", 3, 3, 2, scene);
        // Leave this function
        return scene;
    }; // End of createScene function
    // -------------------------------------------------------------
    // Now, call the createScene function that you just finished creating
    var scene = createScene();
    // Register a render loop to repeatedly render the scene
    engine.runRenderLoop(function () {
        scene.render();
    });
    // Watch for browser/canvas resize events
    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>
</body>
</html>

 

 

Link to comment
Share on other sites
Wingnut Newbie

Wingnut

Posted
Posted

Hi guys!

   See that "touch-action: none;" in the CSS?  I can't remember what that does.  Perhaps... remove it. 

We also have a new UniversalCamera that is supposed to be very handy.  And, has a touchCamera.

Our cameras tutorial and new camera inputs tutorial... speak-of many great things.  :)

@Arktius - please understand that touch events are attached to the CAMERA... so you pan the arcRotateCamera around the scene... until you can see the back side of the mesh.  I think you can also use a UniversalCamera (or FreeCamera) with a .lockedTarget

To use touch events to rotate the scene/mesh on its Y axis, you will need to code that.

So, to be brief... BY DEFAULT, cameras move around scenes.  Scenes/meshes don't rotate to show us their back sides.  With a little code, you can change all that, though.

Link to comment
Share on other sites
Arktius Newbie

Arktius

Posted
  • Author
Posted

With Hand.js and touch-action: none; everything is fine =)

I used a JoystickCamera: 

<canvas id="canvas" style="position: absolute; width: 80%; height: 80%; touch-action:none; "></canvas>

... 

var cam = new BABYLON.VirtualJoysticksCamera("VJC",new BABYLON.Vector3(, 4, -10) , scene);

// Rotationspeed
cam.angularSensibility = 10000; // 2000

// Output Browser console
console.log(cam.angularSensibility);

//Attach a camera to the scene and the canvas
scene.activeCamera = cam;
cam.attachControl(canvas, false);
Link to comment
Share on other sites
  • 1 year later...
Venerated1 Newbie

Venerated1

Posted
Posted

Just for quick reference, http://handjs.codeplex.com/releases/view/119684   ...is what I found on the babylon instructions to download a copy of hand.js

Although, it is giving a message that it will be closing down... so if anyone just wants to copy/paste from the version I downloaded, this is my server: http://skypodstudios.com/solar/hand.js

I have also been seeing things recently suggesting that we should be moving over to jquery/PEP? I haven't bothered looking into it yet since hand.js is working fine for now.

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.

Guest
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.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

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