Error in Canvas Coordinates Transformation

[Clydewang]

I've run your demo, and like other post, it seems click event is not working well. And I examined your source code carefully and finally find out the cause.
In markupExt.js, after coordinates in canvas are acquired from event parameters, they are transformed into the relative coordinates in viewport which ranges from -1 to 1. However in your code, Line 56 and 57,

let x = _x / canvas.clientWidth + -1; // scales from -1 to 1
let y = _y / canvas.clientHeight + -1; // scales from -1 to 1

their ranges are (-1, 0), not (-1, 1).
And axis-direction also matters, y-axis is positive downward in canvas, while, according to documentation of THREE.js, it is positive upward in viewport. Positive direction of y-axis is reversed in the transformation. So I thought the expressions you want to write are

let x = 2 * (_x / canvas.clientWidth) - 1; // scales from -1 to 1
let y = -2 * (_y / canvas.clientHeight) + 1; // scales from -1 to 1, with direction reversed

after fixing this, this demo works very well.
Thanks for your Markup Extension, it helped me a lot in my work. Nice work!

[mrnexeon]

@Clydewang still not working for me after tried to fix. Can you send me your fixed demo?

[Clydewang]

@mrnexeon Sure, no problem. Plz leave me your email address.

[mrnexeon]

@Clydewang [email protected]

[Clydewang]

@mrnexeon Oh, the code files was blocked by Gmail because of the security issue. Could you please describe the problem you are now facing? And did you only change these two lines I've mentioned without any others, right?

[mrnexeon]

@Clydewang yes, right

[Clydewang]

@mrnexeon What does browser console say? Is there any error?
You can send your code to my email [email protected], I wanna have a look. It seems interesting. ;-)

[duffra]

@Clydewang THANKS A LOT! Changing only the 2 lines above solves the issue for me. Anyway I find out something weird: limiting the marker to 3 in app.js
var dummyData = []; for (let i=0; i<3; i++) { dummyData.push({ icon: Math.round(Math.random()*3), x: Math.random()*300-150, y: Math.random()*50-20, z: Math.random()*150-130 });
I can correctly click on 2 markers, but 1 remains not functioning (no card shows up after the click); it seems that it remains hovered but nothing shows up... whatever number you choose, 1 marker doesn't function. I attach a screenshot: the yellow marker doesn't function.

Please, can you check if it's happening on your code?
Thanks for your support,
Francesca

[ghost]

Thanks @Clydewang , that 2 line fix has fixed everything. Created a PR for the fix: #7

[ghost]

@SilverGlow I have also fixed this issue. The very first markup (id is 0) will not work. I have fixed is as part of the same PR #7 (#7)