L'intento di questo progetto è quello di fornire una POC navigabile che sfrutti le funzionalità di diverse librerie di 3D per implementare la realtà aumentata e la visualizzazione del modello.
Il progetto è stato creato con NextJS e le cartelle sono così strutturate:
- src:
- app: contiene il layout della pagina principale e lo stile fondamentale per la visualizzazione della pagina
- api: sfruttando i Route Handlers sono stati creati due endpoints:
/api/checkMobileverifica che il dispositivo sia di tipo mobile e ritorna un valore booleano ed un messaggio./api/redirectsi occupa della redirect verso gli assets 3D da caricare in modalità realtà aumentata. Per quanto riguarda Apple basta indicare l'url che fa da host al modello 3D IN FORMATO ..usdz, per Android invece basta sostituire il link al modello con quello contenente il modello da voler visualizzare, questa volta IN FORMATO.gltfo.glb.
- api: sfruttando i Route Handlers sono stati creati due endpoints:
- components: questa cartella comprende i file
scene.tsxeshoe.tsxche integrano e sfruttano la libreria three.js la creazione della scena e dell'ambiente in cui visualizzare il modello 3D. Il fileìnfo.tsxcontiene la card che viene visualizzata al centro della pagina.
- app: contiene il layout della pagina principale e lo stile fondamentale per la visualizzazione della pagina
Per il corretto funzionamento della POC si consiglia fortemente di utilizzare Vercel. In modalità di sviluppo è presente solo la parte di three.js e quindi la visualizzazione del modello 3D. L'AR e gli endpoint non avranno il funzionamento atteso.
Si congilia inoltre, di utilizzare una versione di npm > 18, così com'è indicato nel file .npmrc.