Search the Community

For now, I'm basically just trying to understand some of the code behind the "drag and drop" sample in the Babylon.js playground. I would eventually like to create a 3d arcade style game, starting here by being able to move the meshes around WITHOUT the camera moving. But first things first tho, I need to understand the code thats here. I've read as much of the documentation and tutorials as I could, and I didn't see any previous post really related to what I'm looking for. There's are some things I dont get with the event listeners: getGroundPosition(), onPointerDown, onPointerMove. I altered the scene and added it to my hosting. I removed everything but the sphere. http://portfolio.blenderandgame.com/draganddrop.html Posting the code here, I commented the parts of the code I dont get: With getGroundPosition(), I dont get the predicate. Not sure i entirely grasp the concept of "predicate". I know that its a callback that returns a boolean value: returns true if ground was clicked. I just dont know what purpose that boolean serves. What other piece of code is that impacting? Not sure how it ties in. I notice that if you comment that part out, so that x and y are the only parameters, then the meshes will "sink" in into the ground instead of staying on the surface. I want to understand it on a code level tho. var getGroundPosition = function () { var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh == ground; }); //?? dont understand purpose of predicate if (pickinfo.hit) { return pickinfo.pickedPoint; } return null; }I have the same question about the scene.pick predicate in onPointerDown (this one returns true if the ground was NOT what was clicked on. ) One OTHER question about this: startingPoint is assigned a value of getGroundPosition(evt). I know its passing the event. But getGroundPosition was defined WITHOUT parameters. So why is a parameter being passed to it? And what difference does that make? I've never seen an example like that with addEventListener. var onPointerDown = function (evt) { if (evt.button !== 0) { return; } var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh !== ground; }); //dont understand purpose of predicate again if (pickInfo.hit) { currentMesh = pickInfo.pickedMesh; startingPoint = getGroundPosition(evt); //dont understand why argument is passed if fucntion was defined with no parameters.. if (startingPoint) { setTimeout(function () { camera.detachControl(canvas); }, 0); } } } Because of those two questions. There is a LOT I dont get about onPointerMove. But hopefully once I understand the above, it will help me figure out the rest. Dont want to bombard with my questions here on my first post Muchas Gracias to anyone that can help. Can't get any further with this and I dont want to give up and move on. Everything else I see with regard to movement is actually just moving the camera, not translating a mesh with a static camera view. This is the only sample I've come across that actually disengages the camera (at least only when the mesh is being moved).

Hi, I took the drag and drop demo and added collisions to it. Basically that means that in onPointerMove: I move the mesh I do mesh.computeWorldMatrix I check for an intersection of the mesh with every other mesh and if I discover one I move the mesh back Everything works fine and the meshes generally don't "go through" each other. However, if I drag a mesh fast enough it will slightly intersect with another mesh before actually being stopped by it. I can't understand why this is happening. Any ideas? Thanks!

Hi everyone, I would like to create a simple interior design tool. Basically a drag and drop tool, where you can drag and drop furniture, lighting, wallpapers, pictures, windows, floors, anything really. For this type of project, should I use Babylon.js or Three.JS? Thanks!

Currently I am using Notepad++ to practice with Babylon.js, but there is no code hint like what Unity's MonoDevelop has. What Babylon.js' IDE should I use to get the code hints? The online visual editor (editor.babylonjs.com) works, but I need an offline visual editor, because I will go to a place with very weak internet connection. I tried the offline visual editor (github.com/BabylonJS/Editor), but it does not work like the online version. Is there other offline visual editor I can use?

How to move an entity on dragstart as i am not able to see drag moment of entity in dragstart

Hey all I've used the standard method for drag and dropping meshes in my app (ie the one with the getGroundPosition function.) it works fine. However I don't really like it - I don't want to have a ground plane in the scene as the user is building up building blocks and is able to rotate the camera all around the evolving structure and make changes. The ground plane gets in the way of this. So - has anyone come up with an alternative strategy for this? If I remove the ground mesh it does kind of work but is glitchy - the mesh being dragged suddenly starts moving toward or away from the camera randomnly as there is no ground mesh to use as an 'anchor'. I'll have a play but wondered if the brains behind this operation had any thoughts ... would having the scene inside some kind of giant 'universe' cube, where the sides of the cube form the background and the boundaries of the scene, work? I guess if the user ventured towards the edges of the cube they could still end up intersecting with it and seeing odd behaviour. Cheers Rich

Hello, I am working on implementing drag and drop in my scene. I have a sphere being created successfully. But when I click on it (mouse down), I do not get the expected drag behavior. I am basically working from the example and I can even reproduce the example in an "in situ" text fixture (i.e. Visual Studio hosted standalone HTML page). Both work equally well. Next, I want to connect the drag and drop stuff with a jQuery "scene:created" trigger. This is potentially where things fall over. I do not get the pointer down event, for starters, that I think I should be getting. I have verified that the trigger is indeed happening. Here is my on trigger event handler: var sceneCreatedDragAndDropHandler = function(e, args) { var startingPos = null; var currentMesh = null; var s = args._scene; var c = args._canvas; var camera = s.getCameraByName("arc1"); var getGroundPosition = function() { /* use a predicate to get position on the ground */ var pi = s.pick(s.pointerX, s.pointerY, function(m) { return !(/^role-/.test(m.name)); }); return pi.hit ? pi.pickedPoint : null; } var onPointerDown = function(event) { if (event.button !== 0) { return; } /* check if we are under a mesh */ var pi = s.pick(s.pointerX, s.pointerY, function(m) { return /^role-/.test(m.name); }); if (pi.hit) { currentMesh = pi.pickedMesh; startingPos = getGroundPosition(); if (startingPos) { /* we need to disconnect camera from canvas */ setTimeout(function() { camera.detachControl(c); }, 0); } } } var onPointerUp = function() { if (startingPos) { camera.attachControl(c, true); startingPos = null; } } var onPointerMove = function() { if (!startingPos) { return; } var currentPos = getGroundPosition(); if (!currentPos) { return; } var deltaPos = currentPos.subtract(startingPos); currentMesh.position.addInPlace(deltaPos); startingPos = currentPos; } c.addEventListener("pointerdown", onPointerDown, false); c.addEventListener("pointerup", onPointerUp, false); c.addEventListener("pointermove", onPointerMove, false); }; I have confirmed all the other bits are working. Canvas, scene, etc, are all rendering okay. The only thing I can figure is that somehow the scope is an issue, even though I am capturing the handler in a global variable, and that the JavaScript GC is collecting the guts of it. If that's the case and it's a GC issue, I wonder what the best way to capture which elements would be. Things like the event handlers, positions, etc, off the cuff. Suggestions?

Hi all, I'm still beginning on learning how to use babylon js, so for now i just playing a little with babylon playground. right now i just make play ground to combine example of using extention .obj loader and function of drag and drop at default babylon playgorund sample. the play ground i make is working (what i mean is the drag & drop is function and the .obj file is loaded) but i found something funny here, how to fix it maybe : - the ground(camera) can't rotate if i not drag and drop any object before - the .obj file why is it so small, is there a way to make it bigger like the example of using .obj loader ? - when i try to drag the 3D object, the object separate like : when i click and drag "bane" i just drag their 3d feet, body, head or cloth differently, not all full body of the 3D object and it looks quite funny to see it I wonder how to fix this. here my playground : http://www.babylonjs-playground.com/#HV0EA thanks alot, wayan

Hey guys, so im building a tycoon game were you can buy furniture and place it in your house. I have implemented the drag drop system from the playground (http://www.babylonjs-playground.com) and it works for objects which have been placed on the scene. My issue is is that I now want to click a button to BUY an object (mesh) and as soon as I mouse up from the button the mesh would follow my mouse (like the drag and drop) and stop after I click again to place the object. I have tried to expand the drag drop to allow this but in its current implementation it has to have a click/pick event on the mesh I want to move. Has any one expanded the drag drop to work with and without a click event or do I have to make a second set of functions to do this? Cheers for any help you can pass my way.

i confuse thinking about it, i want to able drag sprite and if i drop to the another sprite will call the function? can you help me? var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); function preload() { game.load.image('ilkke', 'assets/sprites/atari800xl.png'); game.load.image('lala', 'assets/sprites/atari800xl.png'); } var sprite; var sprite2; function create() { game.stage.backgroundColor = '#2d2d2d'; game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.arcade.gravity.y = 100; sprite = game.add.sprite(100, 96, 'ilkke'); sprite2 = game.add.sprite(700, 96, 'lala'); game.physics.arcade.enable(sprite); sprite.body.collideWorldBounds = true; sprite.body.velocity.x = 200; sprite.body.bounce.set(0.9); // Also enable sprite for drag sprite.inputEnabled = true; sprite.input.enableDrag(); sprite.events.onDragStart.add(startDrag, this); sprite.events.onDragStop.add(stopDrag, this); game.add.text(32, 32, 'Drag and release the sprite', { font: '16px Arial', fill: '#ffffff' }); } function startDrag() { // You can't have a sprite being moved by physics AND input, so we disable the physics while being dragged sprite.body.moves = false; } function stopDrag() { // And re-enable it upon release sprite.body.moves = true; }

Hi, I'm relatively new to Pixi. I have a problem similar to the one mentioned in this post: http://www.html5gamedevs.com/topic/5766-bunny-drag-example-with-correct-mouse-offset/?hl=%2Bdrag+%2Bpixi I used the code from the post and it worked seamlessly. However, when i began rotating the Sprites the offset became wrong, and the sprite jumps to another location when i begin dragging it. Do i have to use some trigonometric function to reverse the rotation? How can I do this? Here is a version with rotation: http://jsfiddle.net/cXfpq/2/ Here without rotation: http://jsfiddle.net/dirkk0/cXfpq/ Thanks in advance! Felix

I've developed simple game which is scene by scene by task completion, so i developed with section wise so once one task completed next task will appear through page navigation. I couldnt complete one task the task is , in the top list of relevant and irrelevant item should touch scrollable so that user will be touch scroll left and right and the item also should be drag and drop to the container. On leaving the item will be large and drops. Then the dragged item should be in the top scrollable list too. So anyone help me to do. Thanks in adv.