Come sincronizzare i sistemi di coordinate Three.js e HTML/SVG (in particolare con l'asse y)?

Question

Sto unendo il contenuto 3D con Three.js con contenuto HTML e SVG. Three.js CSSLoader fa un ottimo lavoro sincronizzando il posizionamento di contenuti HTML e SVG nel mondo 3D.

Ma i sistemi di coordinate SVG/HTML sono "mancini", mentre il sistema di coordinate Three.js è "destrorso". Ciò significa fondamentalmente che i loro assi y sono invertiti. In SVG/HTML, y/top si attiva mentre si scende lo schermo e Three.js utilizza la convenzione matematica più standard di che scende mentre si scende lo schermo.

Devo continuamente convertire da uno all'altro, che è piuttosto incline agli errori. So di non essere il primo a trovarlo (ad esempio, look here). Qualcuno ha trovato una soluzione generale? Ecco quello che ho provato:

1. fare tutto quanto in un Object3D con .scale.y = -1. Come puoi sospettare, questo risulta essere un disastro. Trasforma tutto dentro e fuori, e non provi nemmeno a mettere la tua macchina lì dentro.

2. Fare tutto in un Object3D con .rotate.x = Math.PI. Questo è più promettente, ma l'asse z non è più coerente con il concetto HTML di z-index. Eppure, questo è quello che sto usando ora.

3. In HTML, non utilizzare top, utilizzare bottom. In SVG, fare tutto all'interno di un <g transform="scale(1, -1)"> all'interno di un <g transform="translate(0, imageHeight)">. Tuttavia, ritengo che ciò potrebbe creare confusione per gli sviluppatori e il imageHeight deve essere costantemente aggiornato, il che costituisce un ulteriore onere.

Qualcuno ha inventato qualcosa di meglio? Forse una biblioteca per aiutare con questo?

Answer 1

Ti suggerisco di utilizzare l'attributo SVG Global Transform, se pubblichi un esempio del tuo codice, potrei modificare la risposta e pubblicare l'esempio qui, forse un JSfiddle.

Fondamentalmente è necessario aggiungere la trasformazione al tuo SVG, nel tuo caso per cambiare la direzione dell'asse y, puoi fare una "scala (1, -1)".

Vedere la documentazione W3 con esempi nel seguente link: http://www.w3.org/TR/SVG/coords.html#SVGGlobalTransformAttribute

Il primo uso comune di questo attributo:

La maggior parte ProjectedCRS hanno la direzione nord rappresentato da valori positivi del secondo asse e viceversa SVG ha un sistema di coordinate Y-down . Ecco perché, per seguire il solito modo di rappresentare una mappa con il nord nella parte superiore, si consiglia per questo tipo di ProjectedCRS di utilizzare l'attributo globale 'svg: transform' con una scala '(1, - 1) 'valore come nel terzo esempio di seguito.

Anche lì ci sono degli esempi, spero che risolva il tuo problema. :)