Hey guys I am struggling a bit with a function that I want to implement in my code and could need some advice:
The idea is to drag a HTML image over the renderCanvas and instead of showing the image, I want the mesh to appear and follow the mousepointer, so that you can place it in the scene like a drag and drop function. The mesh has a pointerDragBehavior, which works pretty nice when dropped. But the process of dragging-over works quite bad.
var setPositionToPointerXZ = function(evt, obj){
var pickResult = scene.pick(evt.offsetX, evt.offsetY); //works only in the ground area!
if(pickResult){
//if i add Math rounding like Math.round(pickResult.pickedPoint.x) it works better
obj.position.x = pickResult.pickedPoint.x;
obj.position.z = pickResult.pickedPoint.z;
}
}
I encounter the following problems:
the positioning is imprecise and kinda wobbles (if I round the pickedPoint it gets better but depends on the mesh)
the method is slow on some computers (the dragover event maybe gets fired too often)
pickedPoint only has a value if I hit the ground-mesh (is there a way to get a pickedPoint withouth any ray-hits?)
And at last my evt.dataTransfer.setDragImage(new Image(), 0, 0); to hide the dragged image only seems to work in firefoxâŚ
Will this example still work with HTML-images ? I see you used the babylonGUI here,
I need a crossover later that can interact with HTML elementsâŚ
Thatâs why I used the jquery-stuff in the Playground.
The idea was to build a GUI in HTML and handle the 3D stuff in the babylon canvas
Donât see why not. You already deal with the pointer down over your HTML image just adapt this. Cannot see anything that would not be available to you
Now I had the time to take a closer look and the way you solved it is really nice!
I still have problems to figure out how to do it without the use of Babylon.GUIâŚ
here is my example (with your Gizmo in it): https://www.babylonjs-playground.com/#F7ZZJF#4
The problem here seems that the scene.onPointerObservable.add((pointerInfo) that you use, does not fire/update, because the renderCanvas has no âfocusâ while dragging the image! The dragging of the image happens kinda outside and the scene.Pointer wonât update anymore I havenât tested it yet, but guess that we will have the same behavoir with pointer downâŚ
That was btw the reason I used the evt.offsetX, evt.offsetY in the first code I provided
Please note that I am a beginner in webtech and maybe got things wrong
Using again your code from Version 4 brought me a âbreakthroughâ check: https://www.babylonjs-playground.com/#F7ZZJF#6
(need to proof it a bit more, but could not hold it back to share)
I used the code you supplied and just changed the the pointer.X to evt.offsetX!
Will now try it in my project code where the canvas has other dimensions. I hope that will not affect the offsetX values in a way that it breaks the behavoir.