Introduzione alla versione 1.1

per creare modelli 3D per le tue pagine web con la stessa facilità con cui scrivi codice HTML.

Mario Medley

Rob Kochman

I modelli 3D sono più rilevanti che mai. I rivenditori portano le esperienze di acquisto in negozio a casa dei clienti. I musei stanno rendendo i modelli 3D dei loro manufatti disponibili sul web per tutti. Purtroppo, può essere difficile aggiungere un modello 3D a un sito web in un modo che offra un'ottima esperienza utente senza una profonda conoscenza delle tecnologie 3D o senza ricorrere all'hosting di contenuti 3D su un sito di terze parti. Il componente web <model-viewer>, introdotto all'inizio del 2019, ha lo scopo di semplificare l'inserimento di modelli 3D sul web come poche righe di codice HTML. Da allora, il team lavora per rispondere ai feedback e alle richieste della community. Il culmine di questo lavoro è stato la versione 1.0 di <model-viewer>, rilasciata all'inizio di quest'anno. Annunciamo ora il rilascio di <model-viewer> 1.1. Puoi leggere le note di rilascio in GitHub.

Quali sono le novità rispetto all'anno scorso?

La versione 1.1 include il supporto integrato per la realtà aumentata (AR) sul web, miglioramenti a velocità e fedeltà e altre funzionalità richieste di frequente.

Realtà aumentata

Visualizzare un modello 3D su una tela vuota è fantastico, ma riuscire a visualizzarlo nel tuo spazio è ancora meglio. Per una visione 3D e AR interamente all'interno del browser, Chrome Android supporta la realtà aumentata tramite WebXR .

Quando è pronto, potrai utilizzarlo aggiungendo un attributo ar al tag <model-viewer>. Altri attributi ti consentono di personalizzare l'esperienza AR di WebXR, come mostrato nell'esempio di WebXR su modelviewer.dev. L'esempio di codice riportato di seguito mostra il possibile aspetto.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

Ha un aspetto simile a quello del video incorporato mostrato sotto questo titolo.

Controlli della fotocamera

<model-viewer> ora offre il pieno controllo sulla videocamera virtuale della visualizzazione (la prospettiva dello spettatore). che include il target della videocamera, l'orbita (posizione relativa al modello) e il campo visivo. Puoi anche attivare la rotazione automatica e impostare limiti per l'interazione dell'utente (ad es. campi visivi massimo e minimo).

Annotazioni

Puoi anche annotare i tuoi modelli utilizzando HTML e CSS. Questa funzionalità viene spesso utilizzata per "associare" le etichette a parti del modello in modo da spostarsi con il modello mentre viene manipolato. Le annotazioni sono personalizzabili, compresi l'aspetto e la misura in cui sono nascoste dal modello. Le annotazioni funzionano anche in AR.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

Per ulteriori informazioni, consulta la pagina della documentazione relativa alle annotazioni.

Editor

La versione 1.1 introduce e ospita uno strumento di "modifica" <model-viewer>, che consente di visualizzare rapidamente l'anteprima del modello, provare diverse configurazioni di <model-viewer> (ad es. esposizione e morbidezza delle ombre), generare un'immagine poster e ottenere in modo interattivo le coordinate per le annotazioni.

Rendering e miglioramenti delle prestazioni

La fedeltà del rendering è notevolmente migliorata, soprattutto per gli ambienti HDR (High Dynamic Range). <model-viewer> ora utilizza anche un percorso di rendering diretto quando nell'area visibile è presente un solo elemento <model-viewer>, il che aumenta le prestazioni (soprattutto su Firefox). Infine, la scalabilità dinamica della risoluzione di rendering ha migliorato drasticamente la frequenza dei fotogrammi. L'esempio seguente mostra alcuni di questi recenti miglioramenti.

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

Stabilità

Poiché <model-viewer> raggiunge la prima versione principale, la stabilità dell'API è una priorità, quindi le modifiche che provocano errori verranno evitate fino al rilascio della versione 2.0.

Passaggi successivi

<model-viewer> versione 1.0 include le funzionalità più richieste, ma il team non ha ancora finito. Verranno aggiunte altre funzionalità, nonché miglioramenti in termini di prestazioni, stabilità, documentazione e strumenti. Se hai suggerimenti, invia un problema in GitHub. Inoltre, i PR sono sempre benvenuti. Puoi restare in contatto seguendo <model-viewer> su Twitter e controllando la chat della community su Spectrum.