Unable to get mesh on click event

[Varsha Kamble]

Hi @deltakosh,

I am trying to get mesh on which I am clicking. For some models, it works fine. But for the attached model it is not getting detected. It returns undefined for the clicked mesh.

Playground created for the same :

https://playground.babylonjs.com/#192JEW

 

It works for other few models One of them is attached in following playground

https://playground.babylonjs.com/#7UG0C3

 

Please suggest the same.
Thanks,

Regards,
Varsha

 

 

[Arte]

Hi @Varsha Kamble and welcome,

Some meshes isPickable = false;

On importing,  set isPickable = true;

https://playground.babylonjs.com/#192JEW#1 

Instead of eventListener you can use scene.onPointerObservable

[Varsha Kamble]

Hi @Arte

Thank for you help. It worked well ?.

I am trying to show axis on click of mesh. Following is playground link for the same.

https://playground.babylonjs.com/#742AA0

here i am getting true value for isVisible property of axis. But still axis are not visible on click. Same works fine with 'cube-earth model'

Please help for the same.

Thanks.

 

Regards,

Varsha

 

[Wingnut]

Hi V!  Hi Arte.  Hi everyone else, too.

https://playground.babylonjs.com/#742AA0#3

I made a parent called axPar (named axesParent)... for the axes thing.

That way, we can switch on/off a complete axes... simply by setting axPar.visibility or isVisible or isEnabled.  Handy.  I also renamed showAxis... to makeAxis.

I assume you want ONLY ONE tri-axes thing showing at one time.  But you can show many at the same time, if you wish (by removing line 124 and doing some other simple things)

That is a GORGEOUS model, I love it.  But, it was sloooow for testing.  SO, I did most of my testing... here:  https://playground.babylonjs.com/#742AA0#2

Careful:  #3 playground uses a BETTER clickMesh func than #2.  SO, use #3 for clickMesh() code. 

You may also wish to make the axPar box really small.  It is currently size 1.  CREATE it smaller (in line 57), but avoid using things like axPar.scaling(.5, .5, .5).  Scaling is handed-down from parents, and axPar is the parent of the axes.  Down-scaling axPar might mess-up the axes lines.

Extra:  You can get a lot of information about the SIZE of a pickedMesh... by using pickedMesh.getBoundingInfo() and pickedMesh.getBoundingInfo().boundingBox.  Both of those objects... contain properties about the size of the mesh. 

I use ONE-size of axes... and if an axes already exists in the scene, I just move the existing one... to the new pickedMesh position. 

YOU might wish to dispose() any already-existing axes... when a new mesh is picked.  Then, retrieve some boundingBox measurements on the new pickedMesh, and then makeAxes(properSizePerPickedMesh).  That way you have axes that are specially sized for the pickedMesh.  Just another option... a possible fancy feature. 

Here's another version which activates showBoundingBox for each picked mesh.  https://playground.babylonjs.com/#742AA0#4  Maybe interesting.   I'm not a pro coder, so... perhaps the code could be smarter.

I hope this helps.  Stay in touch.

[Varsha Kamble]

Hi @Wingnut,

Thank you so much. You are amazing ?. This helped me very well ?.

 

I need more help from you Wingnut. I want these meshes to move or change the positions according to dragged axis.

I was using following code before. But with your given code its not working.  Please help me to rewrite it to achieve required behavior.

 

Quote

 

onPointerMove(evt) {
        var current;
        if (!this.startingPoint) {
            return;
        }
        if (this.pickedAxis == "Y")
            current = this.getGroundPosition(evt);
        else
            current = this.getGroundPosition2D(evt);

        if (!current) {
            return;
        }

        var compensationFactor = 10;
        if (this.pickedAxis != null) {
            switch (this.pickedAxis) {
                case "X":
                    var diff = current.subtract(this.startingPoint);
                    this.currentMesh.position.x += diff.x;
                    break;
                case "Y":
                    var diff = current.subtract(this.startingPoint);
                    this.currentMesh.position.y -= diff.y / compensationFactor;
                    break;
                case "Z":
                    var diff = current.subtract(this.startingPoint);
                    this.currentMesh.position.z += diff.z;
                    break;
            }
        }

        this.startingPoint = current;
    }

 

 

I followed this playground to implement this.

http://www.babylonjs-playground.com/#11AOBV#5

Please suggest for the same.

Thanks.

 

Regards,

Varsha

 

 

[Arte]

@Varsha Kamble

Check Line: 125

https://playground.babylonjs.com/#742AA0#5

Mesh position far away. That why not working.

[Wingnut]

Actually, its more than that... that is preventing dragging from working... in these playgrounds.

These PG's we are doing (742AA0 series) don't have a getGroundPosition() func or a getGroundPosition2D() func.  Plus, we are using scene.onPointerObservable.add instead-of addEventListener and onPointerDown.  So, there's plenty of differences between the 2 systems, and plenty of work and considerations to be done.

I'm pretty swamped in real life, right now.  Perhaps someone else can help for a little bit.

Not only that, but I don't know how this coder is accomplishing Y-axis dragging in PG's like this... https://www.babylonjs-playground.com/#11AOBV#17

We can drag that vertical (top) axes node... without having a ground behind it.  Unusual for drag'n'drop actions.  I think getGroundPosition2D() is being used for that, because that is a custom function.  It's not seen in our playground's drag'n'drop demo... http://playground.babylonjs.com/?18

AND, what would REALLY help us forum helpers... is IF your model wasn't so big and slow-loading.

If you could model something less detailed... like an artificial tree made of boxes and rectangles and cylinders, or even BUILD something like that with BJS and don't import a model at all... THAT would be better.

Us forum helpers currently have to wait for that big model to load... every time we test a code change... and it gets annoying and sloooooow.

Make us a simple robot out of boxes and cylinders... either in modeler or BJS scene code... and more forum helpers might come-aboard.

I'll have more time, soon, I hope... but my hands are nicked-up and sore (physical labor - remodeling an apartment)... and it hurts to type right now.    Slow-loading models for every test-run... just doesn't sound very fun, right now.    Sorry.   Keep experimenting, put console.log(anything) all over the place in your/others code... to learn how things work.  Maybe other forum helpers will arrive soon.

[Varsha Kamble]

Hi @Wingnut & @Arte,

 

Thanks for your help. It helped me a lot??.

Now i am facing new issue ?.

 

For adding an arrow in front of Axis, I am using following code.

Quote

  var xArrow = BABYLON.MeshBuilder.CreateCylinder('X', { diameterTop: 0, diameterBottom: 1.5, height: 2.5, tessellation: 10 }, this._scene);
        xArrow.parent = mesh;

 

It works perfectly with Cube model .

 

If i use same height and diameterBottom for the other model, axis are visible, but arrows are not. 

I increased height and diameterBottom property  as following to check if it works:

Quote

  var xArrow = BABYLON.MeshBuilder.CreateCylinder('X', { diameterTop: 0, diameterBottom: 90, height: 100, tessellation: 10 }, this._scene);
        xArrow.parent = mesh;

Now, its very big on cube model and  visible(not as expected but at least its visible) on other model.

 

I think, there is some scaling difference between both of these models (correct me if i am wrong).

I want to add standard size for these arrows which will work for all the models.

Please help for the same.

Thanks.

 

Regards,

Varsha

 

 

[Arte]

@Varsha Kamble "I think, there is some scaling difference between both of these models (correct me if i am wrong)."  Correct 

Can you provide a repro in playground ?

As @Wingnut mentioned "If you could model something less detailed...".

[Varsha Kamble]

Hi @Wingnut,

 

I have updated your playground to work on drag drop of meshes.

https://playground.babylonjs.com/#6HDGLC

 

It is not smooth as it is in example playground https://www.babylonjs-playground.com/#11AOBV%2317

 

Can you please help me on this?

Thanks

Varsha

[Varsha Kamble]

Hi @Arte,

1 hour ago, Arte said:

@Varsha Kamble "I think, there is some scaling difference between both of these models (correct me if i am wrong)."  Correct 

Can you provide a repro in playground ?

As @Wingnut mentioned "If you could model something less detailed...".

Here is the updated playground https://playground.babylonjs.com/#742AA0#6.

I have kept size of axis constant. but on click of any mesh, size of axis varies.

Please check.

 

I have kept other simple model commented, for testing you can use that.

 

 

Thanks,

Varsha

[Wingnut]

#6

You have all parts of axis... parented to mesh.  Scaling is always inherited from parent, so axis will change size when parenting happens.

This is part of the reason why I removed all parenting from makeAxis/showAxis... and then removed all mesh.getChildren() isVisible stuff used to make the axes visible.

In my opinion, making the axes (pieces) be children of pickedMesh... is a bad idea.  Give axes its own tiny-box parent, and avoid adding children to pickedMesh.  This will fix your "it changes size" problem.  Don't parent tiny box to pickedMesh, either.  That will make axis change size again.  (pickedMesh.scaling is handed-down from parent).  Instead... set axesParent.position = pickedMesh.getAbsolutePosition() or similar.  Avoid adding children to main model.  Instead, position-align things with parts-of main model.

Smarter idea for moving pickedMesh with arrowhead drag, when you drag on an arrowhead, move pickedMesh and tiny-box the exact same way, but DON'T parent tiny-box (axes parent) to pickedMesh.

That why I like making all axes parts... be parented to an "axes gizmo"... that little gray box in the center.  The little gray box is easy to make invisible, easy to use .scaling upon (which gets handed-down to all its children).

That's my opinion.  Make axes parts be parented to its own axes-parent.  No getChildren() isVisible stuff to make axes visible/not. 

But feel free to pursue any direction you choose.

I have more IRL work to do.... but might storm.  Thanks for your concern about my hurting hands. 

[Varsha Kamble]

Hi @Wingnut

Thanks for the explanation and support ?

Finally, I am able to make it work? . Here is the link https://playground.babylonjs.com/#6HDGLC#1.

Thanks.

 

Regards,

Varsha

[sable]

Hi @Varsha Kamble

I became far too interested in how to go about implementing this, and ended up making an improved pg based on your one above:

https://www.babylonjs-playground.com/#Q2QLYZ#4

I changed the dragging implementation to use mathematical planes as projection targets (as opposed to just mesh picking). This has the advantage of not needing the pointer to always be above a mesh when dragging, and also means that all three axis should get a nice 1:1 mouse movement to screen movement in the given axis direction.

Hope the above is useful and/or interesting to someone. 

 

[Wingnut]

VERY nice, @sable!!!  Wow!  You're a GOD!  Sweet!

Myself and a friend once made a "tri-plane dragger", but you did the same with mathematical planes... so no need for mesh-type planes!

Spiffy!  Love it.  The only other use of a Babylon.Plane I have ever seen... is in mirrorTextures.