Jump to content

Dragging HTML object and dropping on mesh


Recommended Posts

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 ? 

Link to comment
Share on other sites


- 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?)


Link to comment
Share on other sites

  • 2 weeks later...

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. 

Link to comment
Share on other sites

  • 4 months later...

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?



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...
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:



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

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...