Dragging HTML object and dropping on mesh

[dsman]

I have checked drag-drop example by @deltakosh   on playground ( http://www.babylonjs.com/playground/?18 ). But that example is about dragging meshes inside the babylon scene. 

 

What I want to achieve is to be able to drag HTML object (an <img> ) and drop on any mesh. Inside the event I should be able to find out and modify mesh on which I dropped. 

 

Any pointer ? 

[davrous]

Idea:

- add your own monitoring drag/drop code on our rendering canvas

- read your image file via the FileReader

- get the clientX and the clientY coordinates after the drag operation

- find the corresponding mesh by sending a ray into the scene using for instance our picking algorithm (check our doc: http://doc.babylonjs.com)

- do whatever you'd like with this mesh and your image (a texture I suppose?)

David

[iiceman]

Hi and welcome to the forum dsman,

 

it's a bit messy but you might get the idea: http://www.babylonjs-playground.com/#25LQ6Q

 

Let me know if that is what you want or if you have questions about it... I'll try to answer even if most of the time I actually don't know what I am doing myself

[dsman]

Thanks @iiceman  and @davrous 

 

I was able to do that as suggested. But I have one another problem now. I tried Flat2009 model from babylon website's home page. Everything worked fine. I was able to change mesh's texture. 

 

Then I used model named "RETAIL"  . Nothing works. I debugged the javascript. Everything is fine. In the drop event pointer's x,y co-ordinates are also detected correctly. But  following function call returns null instead of mesh. I tried running in full screen and clicking everywhere. But it just doesn't hit the mesh.  

 

scene.pick(ev.clientX, ev.clientY);   

 

This is mysterious thing. There's nothing even to suspect here. 

[GameMonetize]

Did you check the mesh are pickable? (mesh.isPickable)

[dsman]

I am sorry. I am just beginner . How do I loop through all meshes to check if they are pickable ? 

[GameMonetize]

no problem:

for (var index = 0; index < scene.meshes.length; index++) {var mesh = meshes[index];}

[Vousk-prod.]

Awesome iiceman !!! What a nice PG !

BTW, doesn't work on FF...

[iiceman]

Glad you like it. Might be the same problem as with my editor, have to check the event handling in firefox, but should't be too hard to fix I guess

[Vousk-prod.]

Yep, check that :

http://stackoverflow.com/questions/21507189/dragenter-dragover-and-drop-events-not-working-in-firefox

[hit2501]

Sorry to write right know but I´m trying to use the iiceman example but I get in the console: "Uncaught TypeError: Cannot read property 'addEventListener' of null" in the line:"canvas.addEventListener('dragover', dragover, false);" What am I doing wrong?

 

Thanks

[iiceman]

Hi hit,

 

you get that error when using that example on your own project, right? The playground is okay, it works there for you? (I just checked, for me the playground still works in firefox and chrome)

 

I am just guessing, but maybe the name of your canvas element might be different then the one used in the playground. That would mean that you have to change this line (line number 12):

var canvas = document.getElementById('canvasZone');

Replace 'canvasZone' with the Id your canvas element actually has. If that doesn't work or you are already using the right id, show us your whole html file and maybe tell us what browser you are using.

[hit2501]

Thanks iiceman, its working now but the size of the scene shrink: 

 

 

How can I fix it?

 

Thanks again and sorry for being a pain in the a**  

[iiceman]

Hard to tell just from the screenshot. Can you upload it to a webserver and give us a link? I assume it's just CSS defining the size of the canvas element. But again, just guessing

[hit2501]

Of course, here is it:

 

http://www.wilawara.com/dragndrop/

[iiceman]

Yeah, it's as I said. Your canvas element has now the id 'canvasZone' but your CSS still referes to renderCanvas. So just change the #renderCanvas in your CSS rule to #canvasZone and it should be the full screen again.

[hit2501]

Thank you iiceman, I need to learn more

[Gerente]

I hate the fast that when a texture is being loaded the previous texture disappear. I had to create an additional mesh to "preload" the next texture and then switch the visibility. 

Anyone has solve this?

 

Just drag Lisa into the sphere and you will see the sphere disappear for some seconds:

 

http://www.babylonjs-playground.com/#25LQ6Q

[Lugtigheid]

On 30-7-2015 at 11:54 PM, Gerente said:

I hate the fast that when a texture is being loaded the previous texture disappear. I had to create an additional mesh to "preload" the next texture and then switch the visibility. 

Anyone has solve this?

 

Just drag Lisa into the sphere and you will see the sphere disappear for some seconds:

 

http://www.babylonjs-playground.com/#25LQ6Q

Great! Has anyone got this example working with touch possibilities, for tablets?