Arktius Posted March 29, 2016 Share Posted March 29, 2016 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> Quote Link to comment Share on other sites More sharing options...
Arktius Posted March 29, 2016 Author Share Posted March 29, 2016 The Problem is to rotate the sphere, to see the back side. + If I add some HTML Elements like Textareas or Buttons, the camera does nothing.(just show the sphere, not more) Quote Link to comment Share on other sites More sharing options...
OMAR Posted March 29, 2016 Share Posted March 29, 2016 4 hours ago, Arktius said: Is Hand.js necessary? @Arktius yes! Adding hand.js enables support for touch-controls. If you added hand.js properly, your Arc-rotate camera should work. Arktius and Venerated1 2 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted March 29, 2016 Share Posted March 29, 2016 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. webGLmmk and Arktius 2 Quote Link to comment Share on other sites More sharing options...
OMAR Posted March 29, 2016 Share Posted March 29, 2016 20 minutes ago, Wingnut said: See that "touch-action: none;" in the CSS? I can't remember what that does, but I would remove it. That's weird, I thought we had to add this to make touch enabled. I mean I have that on my css and my babylon app responds to touch Venerated1 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted March 29, 2016 Share Posted March 29, 2016 You might be correct. I know nothing about the reason it is there. Thanks for the info. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 29, 2016 Share Posted March 29, 2016 To add support for touch, touch-action:none is mandatory. As well as hand.js Venerated1 and Arktius 2 Quote Link to comment Share on other sites More sharing options...
MarianG Posted March 29, 2016 Share Posted March 29, 2016 And what about UniversalCamera. It support touch without hand,js? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 29, 2016 Share Posted March 29, 2016 nope.. THey all need it Quote Link to comment Share on other sites More sharing options...
MarianG Posted March 30, 2016 Share Posted March 30, 2016 oky. thx Quote Link to comment Share on other sites More sharing options...
Arktius Posted March 31, 2016 Author Share Posted March 31, 2016 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); Quote Link to comment Share on other sites More sharing options...
Venerated1 Posted July 27, 2017 Share Posted July 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
davrous Posted July 27, 2017 Share Posted July 27, 2017 We've switched from hand.js to jQuery PEP. The approach is almost identical: 1 - reference jquery pep in your HTML page 2 - add a touch-action="none" HTML attribute on your rendering canvas (hand.js was using the CSS property before). More here: https://github.com/jquery/PEP David JackFalcon 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.