Invalid Mesh Pick

[shaharyar.ahmed]

I set up a small scene in 3Ds max to test object picking in babylon.js. I exported the scene to .obj and then convert it to .babylon using http://www.babylonjs.com/converter.html.

 

But I got some unexpected results, here is the link http://developerslink.net16.net/scene2.html .

 

Its not picking the objects perfectly. You can check it yourself.

 

Here is the one more test but got the same results http://developerslink.net16.net/loadScene.html

[Dad72]

I think that this a report with the white band at the top.
That is what i done:

var pickResult = newScene.pick(evt.clientX, evt.clientY - 33);

This should be more precise

[shaharyar.ahmed]

I've updated the code as you said.. but still the same results....

[shaharyar.ahmed]

I used the 50 instead of 33 

var pickResult = newScene.pick(evt.clientX, evt.clientY - 50);

and it worked.. Wow !! I couldn't imagine that was so simple.. Thanks 

[Dad72]

Yes, 33 is a value approximate. I think that is your white band at the top which must make 50. which corresponds to the offset of pick

[ProfessorF]

This is more precise (assuming your canvas is named renderCanvas)

 

var pickResult=newScene.pick(event.clientX+renderCanvas.offsetLeft, event.clientY - renderCanvas.offsetTop).

[Dad72]

Oh, yes, that is much better. No need to look for the fair value manually.

However in my case it does not work, I think that returns the value 1 at the places of 30.
offsetTop, retrieves the value of 'top' and not 'margin-top'

[ProfessorF]

Hm... I think if your canvas is inside of another element, or if your body has margins you may have to add that as well.  Do you have a link? I can take a look. 

[Dad72]

I work in local. But actually, my canvas is in an html table, I have a tool bar at the top of my table of 30px.

 

Quick Example:

<div style="width:100%;height:30px"> tool bar top </div><table style="width:100%;height:100%">    <tr>         <td><canvas id="canvas" style="width:100%;height:100%"></canvas></td>         <td style="width:500px;">Menu right</td>    </tr></table>

Behold in image on what i work:

[ProfessorF]

oh I see.  Since you canvas is inside of the table, you should give your table and id (like <table id=tbl), then also subtract tbl.offsetTop
 

[Dad72]

Ok, it works like this. Thank You ProfessorF

[Nico]

Why did you handle click on your window, do you really need to catch all click inside the window ? 

If not you can use this :

canvas.addEventListener("click", function(){    var pickResult = newScene.pick(evt.offsetX, evt.offsetY);});

offsetX/Y will give you relative position from delegate.

[Dad72]

Ah yes, it is also a good idea. Thank You