Sign in to follow this  
X3MC2

Freecamera won't move in localhost

Recommended Posts

Hi there, 

I'm having a problem getting a playground sample to work on my xampp localhost, I got the Zip file of the Collisions example from the playground (http://www.babylonjs-playground.com/#  -9 Collisions), the freecamera works perfectly when I run the online example, but when I test it on the localhost, the camera won't move at all, it will rotate with the mouse, but will not respond to my arrow key presses.

 

Can someone explain why does the example works online and not on local ?

 

Update: When tested using Internet Explorer, it works, but does not work using Firefox or Opera. So is there a difference between IE and other browsers conserning handling local html files ?

Share this post


Link to post
Share on other sites
55 minutes ago, Wingnut said:

Hiya X3.  Umm... perhaps Firefox and Opera need hand.js helper?  Did you include that?  *shrug*  Just a possibility.  http://www.babylonjs.com/hand.minified-1.2.js

Yep its already included in the source: 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="http://www.babylonjs.com/cannon.js"></script>
        <script src="http://www.babylonjs.com/oimo.js"></script>
        <script src="http://www.babylonjs.com/babylon.js"></script>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
        
            // Lights
            var light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, -5, 2), scene);
            var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, -5, -2), scene);
        
            // Need a free camera for collisions
            var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, -8, -20), scene);
            camera.attachControl(canvas, true);
        
            //Ground
            var ground = BABYLON.Mesh.CreatePlane("ground", 20.0, scene);
            ground.material = new BABYLON.StandardMaterial("groundMat", scene);
            ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
            ground.material.backFaceCulling = false;
            ground.position = new BABYLON.Vector3(5, -10, -15);
            ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
        
            //Simple crate
            var box = new BABYLON.Mesh.CreateBox("crate", 2, scene);
            box.material = new BABYLON.StandardMaterial("Mat", scene);
            box.material.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene);
            box.material.diffuseTexture.hasAlpha = true;
            box.position = new BABYLON.Vector3(5, -9, -10);
        
            //Set gravity for the scene (G force like, on Y-axis)
            scene.gravity = new BABYLON.Vector3(0, -0.9, 0);
        
            // Enable Collisions
            scene.collisionsEnabled = true;
        
            //Then apply collisions and gravity to the active camera
            camera.checkCollisions = true;
            camera.applyGravity = true;
        
            //Set the ellipsoid around the camera (e.g. your player's size)
            camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
        
            //finally, say which mesh will be collisionable
            ground.checkCollisions = true;
            box.checkCollisions = true;
        
            return scene;
        }
        
        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

Share this post


Link to post
Share on other sites
33 minutes ago, Deltakosh said:

This seems to be related to a security issue. Do you have anything on the console? Any errors?

No errors, just the info from babylon that it was launched : 

BJS - [16:37:16]: Babylon.js engine (v2.5.-alpha) launched

As @aWeirdo mentionned, if setPreventDefault is set to false, it works.

This thread can be closed, as the solution was given by aWeirdo.

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.