Come promesso, vi presento il Web3D ovvero la possibilità di inserire elementi 3D in una pagina HTML, quindi da visualizzare nel browser (anche semplicemente in locale, con alcune accortezze che vediamo dopo).
Le potenzialità sono enormi, si può creare interazione con questi oggetti tridimensionali all'interno della pagina (salvo applicazioni specifiche, non è ancora così diffusa).
Di per sé le soluzioni sarebbero molte e diverse, in alcuni casi complesse da realizzare e gestire, quindi ultimamente ho cercato una soluzione che fosse alla portata di tutti, per riportare i vari step.
1) oggetto 3D (ma dai?): consiglio il formato .glb, altri formati mi hanno creato qualche problemino di compatibilità e più difficoltà di gestione; le possibilità sono due: creare un modello con un software di modellazione 3D come Blender, esportarlo poi in .glb oppure (direi ahah) su un sito come sketchfab.com cercare un modello 3D, la maggior parte sono gratuiti, scaricarlo se presente in formato .glb. Il sito richiede registrazione o accesso es. tramite Google/Facebook per poter scaricare un file
2) file JavaScript: avete bisogno del file che si trova qui, consiglio di salvarlo in locale (salva con nome oppure copia-incolla di tutto e da un editor di testo poi lo nominate ad esempio file.js)
3) creare una cartella dove poi mettere tutti i file
4) file HTML: ora dobbiamo creare un file HTML con questo template di esempio, fate copia-incolla e salvate con estensione .html (NB: i riferimenti ovviamente, file.js e esempio.glb devono avere il nome corretto assegnato e tutti i file per comodità nella stessa directory):
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="file.js"></script>
<style>
model-viewer{
width:100%;
height: 100%;
}
</style>
</head>
<body>
<model-viewer alt="esempio3D" src=nomefile.glb" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
</body>
</html>
5) maledetta CORS Policy: il sistema di sicurezza Cross-origin resource sharing ci complica un pochino le cose, quindi ho identificato tre soluzioni:
- disabilitare CORS dalle impostazioni del browser: bah, io non ci sono riuscito e sono passato oltre, quindi fate voi 😅
- Python: se avete installato Python (meglio Python3, non Python2), oppure seguire la procedura di installazione minimal da python.org questa è poi la procedura più semplice. Una volta installato (a seconda del sistema operativo, es. Windows, mettiamo le variabili d'ambiente (guida) in modo tale che Python sia poi disponibile da ogni directory; dopodiché, ce l'abbiamo fatta! Apriamo il terminale nella directory con i nostri file (oppure es. tramite Windows, prompt dei comandi, ci dobbiamo spostare tramite il comando cd, ad esempio cd Documenti... ecc) e scriviamo il seguente codice:
python3 -m http.server. Ora lasciamo il terminale aperto e, da browser, digitiamo nella barra degli URL: localhost:8000. Magicamente si apre la vostra directory con questi file, voi dovete aprire il file HTML che verrà visualizzato a video come nello screenshot che metto alla fine 🙂 nel caso la porta 8000 fosse già occupata da altri servizi (comunque improbabile), specificate una porta diversa, ad esempio python3 -m http.server 7800 e vi collegate poi a quella. Chiudere alla fine browser e terminale, farà cessare l'attività della scheda aperta
- un vostro server online: beh, se potete accedere ad un vostro spazio di hosting online, fate copia-incolla dei file framite il file manager e quindi semplicemente poi vi collegate a nomedominio.it/file.html, questo quindi lavora definitivamente nel web e non in locale
La cosa veramente bella è che possiamo interagire con l'oggetto a nostro piacimento (sia zoom che ruotarlo)! Aggiungendo altro codice volendo lo si può anche spostare nella pagina o associare ad eventi JavaScript in modo da avere interazioni di diverso genere... Potenzialità enormi insomma.
Cosa ne pensate? Spero sia piacevole e sufficientemente facile da seguire. Il web è 3D... E noi qui? 🙂
Infine alcuni screenshot.
