Picking doesn't work as in the playground

[DellaFree]

Hi guys ! I have some problems with this (orrible) playground : http://www.babylonjs-playground.com/#1L0CBO#2

when I use it and test my scene it's all ok, in the sense that when I click on a sphere (my target) in the scene , it disappear; but when I try to put the same function that I created in the playground, in a javascript file, I have to pick different time on the sphere (in particular I have to get closer to it) , before it disappear. Why this happen? The code of my javascript file is :

document.addEventListener("DOMContentLoaded", startBabylonJS, false);var canvas;var engine;var myobj = {};var keysDown = {};window.myobj = myobj;var createScene = function () {    canvas = document.getElementById("renderCanvas");    engine = new BABYLON.Engine(canvas, true);    var scene = new BABYLON.Scene(engine);    //CAMERA    var camera = new BABYLON.FreeCamera("myCamera", new BABYLON.Vector3(10, 15, -70), scene);    camera.attachControl(canvas);    camera.checkCollisions = true;    camera.speed = 2;    camera.angularSensibility = 5000;    scene.collisionsEnabled = true;    scene.activeCamera = camera;    scene.activeCamera.attachControl(canvas);    scene.activeCamera.keysUp.push(87); // W    scene.activeCamera.keysLeft.push(65); // A     scene.activeCamera.keysDown.push(83); // S     scene.activeCamera.keysRight.push(68); // D     engine.isPointerLock = true;    var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(60, 100, 10), scene);    //Skybox    var skybox = BABYLON.Mesh.CreateBox("skyBox", 200.0, scene);    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);    skyboxMaterial.backFaceCulling = false;    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);    skybox.material = skyboxMaterial;    skybox.checkCollisions = true;    //Terrain texture    var extraGround = BABYLON.Mesh.CreateGround("extraGround", 200, 200, 1, scene, false);    var extraGroundMaterial = new BABYLON.StandardMaterial("extraGround", scene);    extraGroundMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);    extraGroundMaterial.diffuseTexture.uScale = 60;    extraGroundMaterial.diffuseTexture.vScale = 60;    extraGround.position.y = -2.05;    extraGround.material = extraGroundMaterial;    extraGround.checkCollisions = true;    //Ground    var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", 'heightMap.png', 100, 100, 40, 0, 10, scene, false, null);    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);    groundMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);    groundMaterial.diffuseTexture.uScale = 6;    groundMaterial.diffuseTexture.vScale = 6;    groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);    ground.position.y = -2.0;    ground.material = groundMaterial;    groundMaterial.checkCollisions = true;    ground.checkCollisions = true;    //the box to save (later this cube should become a character created with Blender)    var box = BABYLON.Mesh.CreateBox("BoxToSave", 2.0, scene);    var boxPos = new BABYLON.Vector3(10, -1, -10);    box.position = boxPos;    box.checkCollisions = true;    //    var sphere = BABYLON.Mesh.CreateSphere("target", 16, 2, scene);    myobj.handleKeyDown = function (event) {        keysDown[event.keyCode] = true;    };    // --------------------------------------------------------------    myobj.handleKeyUp = function (event) {        keysDown[event.keyCode] = false;    };    // keypress and mouse listeners    document.onkeydown = myobj.handleKeyDown;    document.onkeyup = myobj.handleKeyUp;    var beforeRenderFunction = function () {        // Camera        if (camera.beta < 0.1)            camera.beta = 0.1;        else if (camera.beta > (Math.PI / 2) * 0.9)            camera.beta = (Math.PI / 2) * 0.9;        if (camera.radius > 50)            camera.radius = 50;        if (camera.radius < 5)            camera.radius = 5;    };    //----------------------------------------------------------------------------    var speed = 0.5;    var animate = function () {        if (keysDown[81] && camera.position.y < 300) {            // Q, rotate in the postive direction about the y axis            camera.position.y += speed;        }        if (keysDown[69] && camera.position.y > 0) {            // E, rotate in the negative direction about the y axis                  camera.position.y -= speed;        }    };    scene.onPointerDown = function (event, pickResult) {        if (pickResult.hit && pickResult.pickedMesh.name === "target") {            pickResult.pickedMesh.dispose();        }    }    var angle = 0;    scene.registerBeforeRender(function () {        sphere.position.x = 20 * Math.cos(angle);        sphere.position.z = 10 * Math.sin(angle);        angle += 0.01 * scene.getAnimationRatio();        // Casting a ray to get height        var ray = new BABYLON.Ray(new BABYLON.Vector3(sphere.position.x, ground.getBoundingInfo().boundingBox.maximumWorld.y + 1, sphere.position.z),                                    new BABYLON.Vector3(0, -1, 0));         var worldInverse = new BABYLON.Matrix();        ground.getWorldMatrix().invertToRef(worldInverse);        ray = BABYLON.Ray.Transform(ray, worldInverse);        var pickInfo = ground.intersects(ray);        if (pickInfo.hit) {            sphere.position.y = pickInfo.pickedPoint.y + 1;        }        animate();        beforeRenderFunction();    });    return scene;};function startBabylonJS() {        var scene = createScene();        engine.runRenderLoop(function () {            scene.render();        });        // Resize        window.addEventListener("resize", function () {            engine.resize();        });};

And also when I test this javascript (the paths of the resources are ok) on Explorer, the camera does not follow the mouse pointer (insted on Chrome and Firefow work as in the playground). Ah another question, how can I sobstitute the mouse pointer with a gunsight, for exampe ?

Feel free to modify everything to make it better , especially the camera (I'm trying to create a sort of quadcopter/drone view - but I think I am completely failing XD).

Thank you all guys for your time , patience and support. Really thank you again.
Cheers, DellaFree

 

[Wingnut]

Hey, a terrain-following orbiter!  COOL!!

I like that scene!  And, yeah, there's a few fun things that could be done with the camera and the animation loop... to make it "feel" like a drone view.  hmm.  FUN challenge.

http://playground.babylonjs.com/#1MEDUS  See the "floating" of the spheres?  (it was slower on my old computer.  Too fast on this newer puter)  But, floating feels drone-ish, eh?    No? 

Doing "float" just CHOWS scene frames-per-second... WOOFS it down like wolves on a baby deer.  But it's still cool. 

Um, ok, when clicking the sphere in the playground, it works correctly.  In your home scene, it's harder to click the sphere... it needs different click-timing... and sometimes you need to be closer to it?  Right?  *nod* 

Something in your home scene... is slowing the pick-checking, I suspect.  How is your home scene FPS?  And, um, do you have heavy code/calculations in the renderloop (lots of animating)?  When picking moving things, you might need to keep the renderloop running fast fast fast. 

Is your home scene much different from the playground scene?  Probably so, huh?  Yep, I think it's scene load issues.  Pick-checking bog. (guessing)    Maybe. 

I have no answer for the mouse pointer icon issue.  And, I have no answer for "Why no camera-tracking-mouse in IE?"

But, one rumor I heard.  I heard that FF uses hand.js (mouse helper program) and that IE does NOT use it.  It's a rumor... but maybe there is a hint there.

Ok, bye again. 

[pathogen]

And also when I test this javascript (the paths of the resources are ok) on Explorer, the camera does not follow the mouse pointer (insted on Chrome and Firefow work as in the playground).

This will be due to Explorer not supporting Pointer Lock I think?

Pointer Lock @ MDN

[DellaFree]

Hi  guys ! First, thank @Wingnut and @pathogen for your answers. Yes, Wingout, the code that I've posted is the same that I used in my file javascript "basics.js" (I've copied and pasted it here), and the HTML page is like this :

<!DOCTYPE html><html><head>    <title>Test</title>    <script src="../js/lib/babylon/babylon.js"></script>    <script src="../js/lib/babylon/hand.minified-1.2.js"></script>    <script src="../js/basics.js"></script>    <link href="../css/style.css" rel="stylesheet" /></head><body>    <canvas id="renderCanvas"></canvas></body></html>

I don't know why on playground works well but when I test on different browsers (45-50 fps) I have to get closer to the sphere , and pick it different times (sometimes I can not even make it disappear).

I continue to study again and again . I love Babylon js. I hope to find a solution in order to continue with my "project". Repeat feel free to modify the scene to make it better (especially the mouse pointer and the camera).

Again, Thanks for all the patience and support,

cheers

 

p.s

sorry for my english XD

[Wingnut]

Hi again, DF.  Thanks for the "thanks", it's my pleasure to help if/when I can.   And your English is fine.  My reading skills... maybe not so good.  

 

DF, would you try two things for me?

 

1.  I want to make sure you have the exact same version of babylon.js framework AT HOME... as the one used for the playground.  So, would you please right click on this link and choose "save link" or "save link location", and download/save that babylon.js.   Temporarily try that version at home, with your home scene.  Do you notice any changes in the picking?  Thanks.  If you ALREADY KNOW that you are using the exact same babylon.js at home... as the one in the playground... then you can skip this step.

 

2.  Please do "Get .zip" of your most recent playground demo, and unzip it at your home computer.  Then web-browse index.html and see if the picking problem is changed.   If you have tried this already, you can skip this step, too. 

 

Then, report your discoveries, please.  thanks!

[Wingnut]

http://playground.babylonjs.com/#21FIRD  Doing a little play.  // engine.isPointerLock = true;  blech.    i didn't use it.

lines 86-87 turn on your crosshairs, even when mouse button is pressed.

Line 149, I was trying to use canvasZone.style.color and renderCanvas.style.color to constantly "flash" the crosshairs.  Failed - remove that. 

Lines 90 - 107 I added a canvas mouseover watcher.  Turn ON line 101 and open console... to watch the pointer positions.

You could use these mouse pointer positions... to position your own targeting reticle (pretty crosshairs).  Use a plane, with crosshairs-like texture, with alpha (transparent png).  You would put the plane in billboard mode (it always faces the camera).  Center the new targeting reticle plane... on the mouseover coordinates... in the render loop.  It must be done constantly. 

When you have your targeting plane... moving-around with your crosshairs... you can turn-off the crosshairs by:

 document.getElementById('canvasZone').style.cursor = 'none'; canvas.onSelectStart = "this.style.cursor='none'; return false;";

For your camera panning... I would try to use those mouseover coordinates, too.  hmm.  I don't know.  You need a dead zone.  When I am shooting at a moving sphere, I don't want the camera panning all over heck, eh?    *scratch scratch*  I don't know.  Author decisions. 

Another user tried some things.  We used narrow, invisible planes along the borders of the canvas, and only when THOSE were moused-over... did the camera pan.  That made a nice large 'dead zone' in the screen center area... where you could shoot at the enemy and not have camera panning get in the way.  He also didn't attach camera to canvas, of course. 

Thus,  he/we made a new camera panning system that only acted when the edge of the canvas was "rubbed" by the crosshairs.  Check DigitalHillsone threads for more info and some playground demos. 

hmm.  Anyway, I thought I would turn-on mouseover on the canvas and show you the mouse coords being displayed in the console... and see if you had some new ideas.  You might have fresh ideas for camera panning, AND for your new BJS-Plane targeting reticle.   Both will need those mouse-tracking coordinates, I suspect.

You know the pseudo code, right?  In the render loop...

if mouse_location.x > 90%... pan camera right

if mouse_location.x < 10%... pan camera left

if mouse_location.y < 10%... tilt camera up

if mouse_location.y > 90%... tilt camera down

Something like that, eh?  Ideally, use percentages, so when folks use different sized canvas's, your program still works perfectly... because you measured the canvas and then checked the mouse position, and made it into a percentage.    You also placed your targeting reticle... using percentages, right?    Good for any sized canvas!  YAY!  Hide/Show playground editor... it all still works perfectly - because you planned your game for any sized canvas.

Others will have more ideas, and likely BETTER ideas.    Be well, party on!

[DellaFree]

Hi Wingnut,

1.  I want to make sure you have the exact same version of babylon.js framework AT HOME... as the one used for the playground.  So, would you please right click on this link and choose "save link" or "save link location", and download/save that babylon.js.   Temporarily try that version at home, with your home scene.  Do you notice any changes in the picking?  Thanks.  If you ALREADY KNOW that you are using the exact same babylon.js at home... as the one in the playground... then you can skip this step.

So I have tried it , but the problem remain.

 

2.  Please do "Get .zip" of your most recent playground demo, and unzip it at your home computer.  Then web-browse index.html and see if the picking problem is changed.   If you have tried this already, you can skip this step, too.

Instead in this case it works correct (the index.html). So if I download the scene, open the index.html in the browser, it works well, instead if I change the code like I posted before, I have some problems. Again I posted the code of my page and javascript file:

<!DOCTYPE html><html><head>    <title>Test</title>    <script src="../js/lib/babylon/babylon.js"></script>    <script src="../js/lib/babylon/hand.minified-1.2.js"></script>    <script src="../js/basics2.js"></script>      <link href="../css/style.css" rel="stylesheet" /></head><body>    <canvas id="renderCanvas"></canvas></body></html>

and below the "basics,js" file :

/// <reference path="lib/babylon/babylon.js" />document.addEventListener("DOMContentLoaded", startBabylonJS, false);var canvas;var engine;var myobj = {};var keysDown = {};window.myobj = myobj;var createScene = function () {    canvas = document.getElementById("renderCanvas");    engine = new BABYLON.Engine(canvas, true);    var scene = new BABYLON.Scene(engine);    //CAMERA    var camera = new BABYLON.FreeCamera("myCamera", new BABYLON.Vector3(10, 15, -70), scene);    camera.attachControl(canvas);    camera.checkCollisions = true;    camera.speed = 2;    camera.angularSensibility = 5000;    scene.collisionsEnabled = true;    scene.activeCamera = camera;    scene.activeCamera.attachControl(canvas);    scene.activeCamera.keysUp.push(87); // W    scene.activeCamera.keysLeft.push(65); // A     scene.activeCamera.keysDown.push(83); // S     scene.activeCamera.keysRight.push(68); // D     engine.isPointerLock = true;    var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(60, 100, 10), scene);    //Skybox    var skybox = BABYLON.Mesh.CreateBox("skyBox", 200.0, scene);    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);    skyboxMaterial.backFaceCulling = false;    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../img/textures/skybox", scene);    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);    skybox.material = skyboxMaterial;    skybox.checkCollisions = true;    //Terrain texture    var extraGround = BABYLON.Mesh.CreateGround("extraGround", 200, 200, 1, scene, false);    var extraGroundMaterial = new BABYLON.StandardMaterial("extraGround", scene);    extraGroundMaterial.diffuseTexture = new BABYLON.Texture("../img/textures/ground.jpg", scene);    extraGroundMaterial.diffuseTexture.uScale = 60;    extraGroundMaterial.diffuseTexture.vScale = 60;    extraGround.position.y = -2.05;    extraGround.material = extraGroundMaterial;    extraGround.checkCollisions = true;    //Ground    var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", '../img/heightMap.png', 100, 100, 40, 0, 10, scene, false, null);    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);    groundMaterial.diffuseTexture = new BABYLON.Texture("../img/textures/ground.jpg", scene);    groundMaterial.diffuseTexture.uScale = 6;    groundMaterial.diffuseTexture.vScale = 6;    groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);    ground.position.y = -2.0;    ground.material = groundMaterial;    groundMaterial.checkCollisions = true;    ground.checkCollisions = true;    //the box to save (later this cube should become a character created with Blender)    var box = BABYLON.Mesh.CreateBox("BoxToSave", 2.0, scene);    var boxPos = new BABYLON.Vector3(10, -1, -10);    box.position = boxPos;    box.checkCollisions = true;    //     var sphere = BABYLON.Mesh.CreateSphere("target", 16, 2, scene);     myobj.handleKeyDown = function (event) {        keysDown[event.keyCode] = true;    };    // --------------------------------------------------------------    myobj.handleKeyUp = function (event) {        keysDown[event.keyCode] = false;    };    // keypress and mouse listeners    document.onkeydown = myobj.handleKeyDown;    document.onkeyup = myobj.handleKeyUp;    var beforeRenderFunction = function () {        // Camera        if (camera.beta < 0.1)            camera.beta = 0.1;        else if (camera.beta > (Math.PI / 2) * 0.9)            camera.beta = (Math.PI / 2) * 0.9;        if (camera.radius > 50)            camera.radius = 50;        if (camera.radius < 5)            camera.radius = 5;    };    //----------------------------------------------------------------------------    var speed = 0.5;    var animate = function () {        if (keysDown[81] && camera.position.y < 300) {            // Q, rotate in the postive direction about the y axis            camera.position.y += speed;        }        if (keysDown[69] && camera.position.y > 0) {            // E, rotate in the negative direction about the y axis                  camera.position.y -= speed;        }    };    scene.onPointerDown = function (event, pickResult) {        if (pickResult.hit && pickResult.pickedMesh.name === "target") {            pickResult.pickedMesh.dispose();        }    }    var angle = 0;    scene.registerBeforeRender(function () {        sphere.position.x = 20 * Math.cos(angle);        sphere.position.z = 10 * Math.sin(angle);        angle += 0.01 * scene.getAnimationRatio();        // Casting a ray to get height        var ray = new BABYLON.Ray(new BABYLON.Vector3(sphere.position.x, ground.getBoundingInfo().boundingBox.maximumWorld.y + 1, sphere.position.z),                                    new BABYLON.Vector3(0, -1, 0)); // Direction        var worldInverse = new BABYLON.Matrix();        ground.getWorldMatrix().invertToRef(worldInverse);        ray = BABYLON.Ray.Transform(ray, worldInverse);        var pickInfo = ground.intersects(ray);        if (pickInfo.hit) {            sphere.position.y = pickInfo.pickedPoint.y + 1;        }        animate();        beforeRenderFunction();    });    return scene;};function startBabylonJS() {        var scene = createScene();        engine.runRenderLoop(function () {            scene.render();        });        // Resize        window.addEventListener("resize", function () {            engine.resize();        });};

Instead the index.html, get from the playground is (it works perfectely) :

<!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 myobj = {};        var keysDown = {};        window.myobj = myobj;                var createScene = function () {        	var scene = new BABYLON.Scene(engine);        	//CAMERA        	var camera = new BABYLON.FreeCamera("myCamera", new BABYLON.Vector3(10, 15, -70), scene);        	camera.attachControl(canvas);        	camera.checkCollisions = true;        	camera.speed = 2;        	camera.angularSensibility = 5000;                        	scene.collisionsEnabled = true;        	scene.activeCamera = camera;        	        	        	scene.activeCamera.attachControl(canvas);        	scene.activeCamera.keysUp.push(87); // W        	scene.activeCamera.keysLeft.push(65); // A         	scene.activeCamera.keysDown.push(83); // S         	scene.activeCamera.keysRight.push(68); // D         	        	engine.isPointerLock = true;        	                	var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(60, 100, 10), scene);        	//Skybox        	var skybox = BABYLON.Mesh.CreateBox("skyBox", 200.0, scene);            var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);            skyboxMaterial.backFaceCulling = false;            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);            skybox.material = skyboxMaterial;            skybox.checkCollisions = true;        	        	        	//Terrain texture        	var extraGround = BABYLON.Mesh.CreateGround("extraGround", 200, 200, 1, scene, false);        	var extraGroundMaterial = new BABYLON.StandardMaterial("extraGround", scene);        	extraGroundMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);        	extraGroundMaterial.diffuseTexture.uScale = 60;        	extraGroundMaterial.diffuseTexture.vScale = 60;        	extraGround.position.y = -2.05;        	extraGround.material = extraGroundMaterial;        	extraGround.checkCollisions = true;        		        	//Ground        	var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", 'textures/heightMap.png', 100, 100, 40, 0, 10, scene, false, null );        	var groundMaterial = new BABYLON.StandardMaterial("ground", scene);        	groundMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);        	groundMaterial.diffuseTexture.uScale = 6;        	groundMaterial.diffuseTexture.vScale = 6;        	groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);        	ground.position.y = -2.0;        	ground.material = groundMaterial;        	groundMaterial.checkCollisions = true;        	ground.checkCollisions = true;        	        	//the box to save (later this cube should become a character created with Blender)        	var box = BABYLON.Mesh.CreateBox("BoxToSave", 2.0, scene);        	var boxPos = new BABYLON.Vector3(10, -1, -10);        	box.position = boxPos;        	box.checkCollisions = true;        	        	//        	var sphere = BABYLON.Mesh.CreateSphere("target", 16, 2, scene);        	        	        	myobj.handleKeyDown = function (event) {                keysDown[event.keyCode] = true;            };           // --------------------------------------------------------------            myobj.handleKeyUp = function (event) {                keysDown[event.keyCode] = false;            };                           // keypress and mouse listeners            document.onkeydown = myobj.handleKeyDown;            document.onkeyup = myobj.handleKeyUp;        	        	var beforeRenderFunction = function () {                    // Camera                    if (camera.beta < 0.1)                        camera.beta = 0.1;                    else if (camera.beta > (Math.PI / 2) * 0.9)                        camera.beta = (Math.PI / 2) * 0.9;                            if (camera.radius > 50)                        camera.radius = 50;                            if (camera.radius < 5)                        camera.radius = 5;        	};        	        	//----------------------------------------------------------------------------        	var speed = 0.5;	        	var animate = function () {         		if (keysDown[81] && camera.position.y < 300) {        			// Q, rotate in the postive direction about the y axis        			camera.position.y += speed;        		}                		if (keysDown[69] && camera.position.y > 0) {        			// E, rotate in the negative direction about the y axis              			camera.position.y -= speed;        		}        	};        	        	scene.onPointerDown = function (event, pickResult) {         		if (pickResult.hit && pickResult.pickedMesh.name === "target") {         			pickResult.pickedMesh.dispose();        		}        		        	}        	        	var angle = 0;        	scene.registerBeforeRender(function () {        		sphere.position.x = 20 * Math.cos(angle);                sphere.position.z = 10 * Math.sin(angle);                angle += 0.01 * scene.getAnimationRatio();                // Casting a ray to get height                var ray = new BABYLON.Ray(new BABYLON.Vector3(sphere.position.x, ground.getBoundingInfo().boundingBox.maximumWorld.y + 1, sphere.position.z),                                            new BABYLON.Vector3(0, -1, 0));                 var worldInverse = new BABYLON.Matrix();                ground.getWorldMatrix().invertToRef(worldInverse);                ray = BABYLON.Ray.Transform(ray, worldInverse);                var pickInfo = ground.intersects(ray);                if (pickInfo.hit) {                    sphere.position.y = pickInfo.pickedPoint.y + 1;                }                		animate();        		beforeRenderFunction();        		        		           });        	        	return scene;        };                        var scene = createScene();        engine.runRenderLoop(function () {            scene.render();        });        // Resize        window.addEventListener("resize", function () {            engine.resize();        });    </script></body></html>

Regard the other question (the last one), I'm going to study and I hope to reply as soon as possible. I want to undestand very well what you have written. Thanks a lot again.

[DellaFree]

I changed the code (in my javascript file) just for debug, and I noticed that the name of the picked mesh is , the most of the time, "skybox": here the  code that I chenged for debug:

scene.onPointerDown = function (event, pickResult) {        if (pickResult.hit /*&& pickResult.pickedMesh.name === "target"*/) {            console.log(pickResult.pickedMesh.name); //<-- Even if I click on the sphere the name of the mash picked is "skybox" why?            //pickResult.pickedMesh.dispose();        }}

[DellaFree]

Hi guys, Finally I solved the problem. I was using the wrong version of babylon I updated it , and now works fine (yeeeeeeah XD I'm so happy).
Thanks the same for the rest of the answers (you are right Wingnut).
Cheers,
DellaFree

[Wingnut]

Fine troubleshooting, friend!  Good to hear!  Are you going to work-on giving the camera some "floating feel"? 

http://playground.babylonjs.com/#2BPZFZ    I think I'm getting sea sickness.

A little banking on the hard turns, now?  Look out!

Maybe next (year), a genuine drone simulator with the physics engine, and applyImpulse thrusters under each propeller?  Huh?  Alright!

[jerome]

sea sickness indeed.... bboooarrrp (sorry)