Error in Canvas Coordinates Transformation #5
Description
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!