Una delle numerose richieste e domande che mi viene posta è quella di poter integrare un visualizzatore 3D (o un configuratore) in una pagina WordPress, sia essa un post oppure una pagina vera e propria.
E’ una richiesta lecita in quanto WordPress è divenuto negli anni il CMS più utilizzato in ambito mainstream (non certamente in ambiti più specifici e professionali) e dunque con la necessità di adattarsi a diversi contesti come ad esempio quello dei prodotti visualizzati in tre dimensioni.
Implementare un visualizzatore è abbastanza semplice in quanto WordPress permette, attraverso i suoi comandi di scrittura, di incorporare facilmente del codice HTML. E’ tutto quell oche ci serve per ottenere ad esempio il risultato sottostante.
L’esempio è realizzato utilizzando il motore grafico e di configurazione di 3DConfigurator.io (di cui trovate info a questo link) in cui ho caricato un modello 3D di uno smartphone.
Di seguito il codice usato nell’esempio di questo articolo:
Codice HTML
<div class=”viewer-container”>
<iframe src=”{viewer-link}” allowfullscreen=”allowfullscreen”></iframe>
</div>
Codice CSS
.viewer-container {
position: relative;
padding-bottom: 65%;
height: 0;
overflow: hidden;
}
.viewer-container iframe {
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
}
