Cannot get drag & drop working

[aconite]

Hello everybody,

I'm trying to implement the drag and drop functionality into my project like it is done in this example http://www.babylonjs-playground.com/?18. 

But it just won't work and I don't know why. I've tried to debug but it seems that the functions like onPointerMove are never called. Can you give me a hint to the right direction?

 

// The babylon engine
var engine;
// The current scene
var scene;
// The HTML canvas
var canvas;

// The function onload is loaded when the DOM has been loaded
document.addEventListener("DOMContentLoaded", function () {
    init();
}, false);

// Resize the babylon engine when the window is resized
window.addEventListener("resize", function () {
    if (engine) {
        engine.resize();
    }
},false);

/**
 * Onload function : creates the babylon engine and the scene
 */
var init = function () {
    // Engine creation
    canvas = document.getElementById("renderCanvas");
    engine = new BABYLON.Engine(canvas, true);

    // Scene creation
    initScene();

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

};

var initScene = function() {
    // scene = new BABYLON.Scene(engine);

    scene = addDragAndDropFunctionality(ground);


    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
    camera.setPosition(new BABYLON.Vector3(20, 200, 400));

    camera.lowerBetaLimit = 0.1;
    camera.upperBetaLimit = (Math.PI / 2) * 0.99;
    camera.lowerRadiusLimit = 150;

    scene.clearColor = new BABYLON.Color3(0, 0, 0);

    var h = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, -1), scene);

    var d1 = new BABYLON.DirectionalLight("dir", new BABYLON.Vector3(1, -1, -2), scene);
    d1.position = new BABYLON.Vector3(-300,300,600);

    var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 2, scene, false);
    ground.material = new BABYLON.StandardMaterial("ground", scene);
    ground.material.diffuseColor = BABYLON.Color3.FromInts(193, 181, 151);
    ground.material.specularColor = BABYLON.Color3.Black();

};

function addDragAndDropFunctionality(ground) {
    var scene = new BABYLON.Scene(engine);

    var canvas = engine.getRenderingCanvas();
    var startingPoint;
    var currentMesh;

    var getGroundPosition = function () {
        // Use a predicate to get position on the ground
        var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh == ground; });
        if (pickinfo.hit) {
            return pickinfo.pickedPoint;
        }

        return null;
    }

    var onPointerDown = function (evt) {
        debugger;
        if (evt.button !== 0) {
            return;
        }

        // check if we are under a mesh
        var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh !== ground; });
        if (pickInfo.hit) {
            currentMesh = pickInfo.pickedMesh;
            startingPoint = getGroundPosition(evt);

            if (startingPoint) { // we need to disconnect camera from canvas
                setTimeout(function () {
                    camera.detachControl(canvas);
                }, 0);
            }
        }
    };

    var onPointerUp = function () {
        debugger;
        if (startingPoint) {
            camera.attachControl(canvas, true);
            startingPoint = null;
        }
    };

    var onPointerMove = function (evt) {
        debugger;
        if (!startingPoint) {
            return;
        }

        var current = getGroundPosition(evt);

        if (!current) {
            return;
        }

        var diff = current.subtract(startingPoint);
        currentMesh.position.addInPlace(diff);

        startingPoint = current;

    };

    canvas.addEventListener("pointerdown", onPointerDown, false);
    canvas.addEventListener("pointerup", onPointerUp, false);
    canvas.addEventListener("pointermove", onPointerMove, false);

    scene.onDispose = function () {
        canvas.removeEventListener("pointerdown", onPointerDown);
        canvas.removeEventListener("pointerup", onPointerUp);
        canvas.removeEventListener("pointermove", onPointerMove);
    };

    this.canvas = canvas;

    return scene;
}

 

[JohnK]

Welcome to BabylonJS and to the forum. Have you looked at the Javascipt console for any errors there?

You seem to have called your function addDragAndDropFunctionality with the parameter ground before ground is created.

Suggest you try to do the task in the Playground first before you go off and write the full code. Then if this does not work it is much easier to ask for and get help.

Also passing scene as a parameter through different functions can make your code messy. Stick to the playground method of using

var createScene = function() {

// Your BJS code here

    return scene;
}

to keep code clean.

Read more on why this is a good approach here.

[Wingnut]

Hi guys.  Welcome to the forum, @aconite! 

Here's a quick playground.  I agree with John... using a function to "add drag and drop functionality" is a little strange... but what the heck.

http://playground.babylonjs.com/#GUBMT#1

This playground has some minor problems.  It looks like line 83 has problems with the variable scene... surely a scope problem. 

Notice I send many more args... to addDragAndDropFunctionality() call. 

I adjusted the cam, shrunk the ground, did a few other minor little things.  No biggie.  The Get Zip button will work, if anyone wants the "home version".

The dragging is working.  Yay.  I'll let you experts play with this playground, for now... to work on the scoping problem. 

Yet another free playground... by Mister Wingnut.  (oh boy)   Hey, new forum users, you know?  I like to welcome them with a sugar-coated handshake.  heh.  

[aconite]

Thanks for your answers, I really appreciate that.

I've just started working with webgl and babylon js, so my code might seem a little messed up. I'll rework it like you suggested

[Wingnut]

Cool.  Yeah, maybe not messed up.  Perhaps... a little unexpected, that's all.  I didn't expect to see the drag'n'drop code... put into a function like that.

Sort of an activateDragAndDrop() function.  Actually, I kind of like that idea.  But I screwed-up your init() function.  (actually killed it).  Sorry. 

Have you studied it, much?  That drag'n'drop is very dependent-upon that getGroundPosition() function... and the ground has to be present.  Want to see something weird?  I knew ya did.  http://playground.babylonjs.com/#GUBMT#2

Try to drag-on mesh areas... that do not have ground behind them.  They won't drag, right?  Wherever you click-to-drag... must have some ground behind it... because the getGroundPosition() NEEDS it.

This can cause trouble when your camera is low and horizon-tal.  http://playground.babylonjs.com/#GUBMT#3

Dragging mesh can be a bit more challenging... with the low-altitude camera.  (Just thought I'd warn you about possible low-altitude camera issues)    Party on!