Three.js – Telecamera ortogonale

Ho lavorato su un’app che mostra alcuni modelli 3D. Carichiamo i modelli, creiamo le maglie, le aggiungiamo alla scena … procedura standard. Dopo aver aggiunto l’ultima mesh, calcoliamo il riquadro di delimitazione per spostare la telecamera e coprire tutta la scena, utilizzando la dimensione della geometria totale e la dimensione della finestra per eseguire i calcoli.

if (bounds.bx / bounds.by < camera.aspect) { /* Vertical max */ r = bounds.by / (2 * Math.tan(Math.PI / 8)); } else { /* Horizontal max */ hFOV = 2 * Math.atan(Math.tan(Math.PI / 8) * camera.aspect); r = bounds.bx / (2 * Math.tan((hFOV / 2))); } 

bounds è un object contenente la larghezza e l’altezza del riquadro di delimitazione. Dopo questo calcolo, spostiamo la fotocamera (più un piccolo rapporto, solo l’estetica, vogliamo un piccolo spazio tra la geometria e il bordo dello schermo :)) e renderizza

  camera.position.z = r * 1.05; 

Finora questo è implementato e funziona ok. Questo è stato fatto con PerspectiveCamera. Ora vogliamo cambiarlo e usare OrthographicCamera … si rivela un casino. I modelli sono troppo piccoli, perdiamo lo zoom della rotellina del mouse dai controlli TrackBall e l’algoritmo per spostare la telecamera non funziona più. Inoltre non capisco i parametri del costruttore per la telecamera … questa larghezza e altezza sono per la geometria o il viewport?

Il pattern per istanziare una camera ortografica in three.js è:

 var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far ); 

dove width e height sono la larghezza e l’altezza del tronco a forma di cubo della camera misurate in unità spazio mondo .

near e far sono le distanze spazio-mondo dai piani vicini e lontani del tronco. Sia near che far dovrebbe essere maggiore di zero.

Per evitare distorsioni, in genere si desidera che il rapporto di formato della videocamera ortografica ( width / height ) corrisponda alle proporzioni della canvas del rendering. (vedi * Nota sotto)

È spiacevole che molti degli esempi window.innerWidth passino window.innerWidth e window.innerHeight come argomenti a questo costruttore. Ciò ha senso solo se la fotocamera ortografica viene utilizzata per il rendering su una trama o se le unità del mondo per la scena ortografica sono in pixel.


* Nota: in realtà, le proporzioni della fotocamera devono corrispondere alle proporzioni della finestra di rendering. La finestra può essere una sub-regione della canvas. Se non si imposta direttamente la viewport del renderer.setViewport() utilizzando renderer.setViewport() , la finestra avrà le stesse dimensioni del canvas e quindi avrà le stesse proporzioni del canvas.

three.js r.73

  camera.top = (.95*camera.top); camera.bottom = (.95*camera.bottom); camera.left = (.95*camera.left); camera.right = (.95*camera.right); 

Per riferimento futuro: buon video 5min

 var w = container.clientWidth; var h = container.clientHeight; var viewSize = h; var aspectRatio = w / h; _viewport = { viewSize: viewSize, aspectRatio: aspectRatio, left: (-aspectRatio * viewSize) / 2, right: (aspectRatio * viewSize) / 2, top: viewSize / 2, bottom: -viewSize / 2, near: -100, far: 100 } _camera = new THREE.OrthographicCamera ( _viewport.left, _viewport.right, _viewport.top, _viewport.bottom, _viewport.near, _viewport.far );