javascript - How to synchronize the Three.js and HTML/SVG coordinate systems (especially w.r.t. the y-axis)? -


i'm combining 3d content three.js html , svg content. three.js cssloader pretty job synchronizing placement of html , svg content in 3d world.

but svg/html coordinate systems 'left-handed', whereas three.js coordinate system 'right-handed'. means y-axes reversed. in svg/html, y/top goes go down screen, , three.js uses more standard mathematical convention of y going down go down screen.

i have continually convert 1 other, pretty error prone. know not first run (for example, look here). has come general solution? here's tried:

  1. do in object3d .scale.y = -1. may suspect, turns out disaster. turns inside-out, , don't try put camera in there.

  2. do in object3d .rotate.x = math.pi. more promising, z axis no longer consistent html concept of z-index. still, i'm using now.

  3. in html, don't use top, use bottom. in svg, inside <g transform="scale(1, -1)"> inside <g transform="translate(0, imageheight)">. however, feel more confusing developers, , imageheight has kept date @ times, yet burden.

has come better? perhaps library this?

i suggest use svg global transform attribute, if post example of code, edit answer , post example here, maybe jsfiddle.

basically need add transformation svg, in case change direction of y-axis, can "scale(1,-1)".

see w3 documentation examples in following link: http://www.w3.org/tr/svg/coords.html#svgglobaltransformattribute

the first common use of attribute:

most projectedcrs have north direction represented positive values of second axis , conversely svg has y-down coordinate system. that's why, in order follow usual way represent map north @ top, recommended kind of projectedcrs use ‘svg:transform’ global attribute 'scale(1, -1)' value in third example below.

they have examples there too, hope solves problem. :)


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -