Configuratore 3D in React Three Fiber per SIM2
Per ogni proiettore SIM2, il throw ratio lega la diagonale dello schermo alla distanza di installazione. Il configuratore lo rende visibile in una stanza 3D.
Il problema
Un proiettore non si installa «a una distanza qualsiasi». Ogni modello ha un throw ratio minimo e massimo, una diagonale di schermo ammessa e un intervallo di distanze di installazione. SIM2 aveva bisogno di uno strumento per visualizzarlo, modello per modello, prima di definire la stanza.
Il sito pubblico è un progetto distinto: SIM2, con i modelli 3D nelle schede prodotto. Questo tool è interno e non ha un URL pubblico.
Cosa fa
- Modello: UltraNero 4, Domino 4H, Crystal 4SH, Crystal Gold.
- Schermo: rapporto 16:9 o 2.35:1, larghezza, altezza, diagonale in pollici.
- Distanza di installazione, entro il minimo e il massimo del modello.
- Stanza adattiva: larghezza, altezza e profondità seguono lo schermo.
- Unità di misura: metriche (cm) o imperiali (in).
Per UltraNero 4: schermo da 50" a 300", distanza da 1,5 m a 13 m, throw ratio da 1,26 a 1,99. Domino 4H, Crystal 4SH e Crystal Gold: schermo da 26" a 300", distanza da 1,5 m a 9,5 m, throw ratio da 1,40 a 2,24.
Come funziona il configuratore 3D in React Three Fiber
La scena è sviluppata in React Three Fiber; il modello 3D del proiettore è un GLTF. Nella stanza sono visibili lo schermo e i due limiti, minimo e massimo, della distanza di installazione.
I valori sono vincolati: ogni modello ha la propria configurazione di diagonale, distanza e throw ratio. Modificando la diagonale, la distanza ammessa si ricalcola; cambiando modello, cambiano la stanza di partenza e il file 3D.
La stanza cresce insieme allo schermo, pavimento compreso, invece di restare un volume fisso.
Stack
Next.js, React Three Fiber, drei, Three.js. Servizio correlato: esperienze 3D e WebGL.
I modelli 3D dei proiettori sono di un 3D artist esterno.