Menambahkan model 3D ke situs web bisa menjadi hal yang rumit; <model-viewer> sama mudahnya dengan menulis HTML.
Menambahkan model 3D ke situs web itu tidak mudah. Model 3D idealnya ditampilkan pada penampil yang dapat bekerja secara responsif pada semua browser, termasuk smartphone, desktop, atau bahkan layar baru yang dipasang di kepala. Penampil harus mendukung progressive enhancement untuk performa dan kualitas rendering. Fitur ini harus mendukung kasus penggunaan di semua perangkat, mulai dari smartphone lama yang berdaya lebih rendah hingga perangkat baru yang mendukung augmented reality. Aplikasi Anda harus selalu diperbarui dengan teknologi saat ini. Aplikasi harus berperforma tinggi dan dapat diakses. Namun, membuat penonton seperti itu memerlukan keterampilan pemrograman 3D khusus, dan dapat menjadi tantangan bagi developer web yang ingin menghosting model mereka sendiri, bukan menggunakan layanan hosting pihak ketiga.
Namun, komponen web <model-viewer>
memungkinkan Anda menambahkan model 3D secara deklaratif
ke halaman web, sambil menghosting model di situs Anda sendiri.
Tujuan komponen ini adalah memungkinkan penambahan model 3D ke
situs Anda tanpa memahami teknologi dan platform yang mendasarinya.
Komponen web mendukung desain responsif,
dan kasus penggunaan seperti augmented reality di beberapa perangkat.
Library ini mencakup fitur untuk aksesibilitas, kualitas rendering, dan
interaktivitas.
Apa yang dimaksud dengan komponen web?
Komponen web adalah elemen HTML kustom yang dibuat dari fitur platform web standar. Komponen web berperilaku untuk semua intent dan tujuan seperti elemen
standar. Tag ini memiliki tag unik, dapat memiliki properti dan metode, serta dapat mengaktifkan dan merespons peristiwa. Singkatnya, Anda tidak perlu mengetahui hal khusus untuk
menggunakan komponen web apa pun, apalagi <model-viewer>.
Artikel ini membahas fitur khusus untuk <model-viewer>.
Jika Anda tertarik mempelajari komponen web lebih lanjut,
webcomponents.org adalah tempat yang tepat untuk memulai.
Apa yang dapat dilakukan <model-viewer>?
Contoh berikut menunjukkan beberapa kemampuan <model-viewer>.
Model 3D dasar
Menyematkan model 3D semudah mengikuti markup berikut. Dengan menggunakan file glb, komponen ini akan berfungsi di browser utama apa pun.
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
id="mv-shark"
src="shark.glb"
camera-controls
></model-viewer>
Kode tersebut dirender seperti ini:
Menambahkan gerakan dan interaktivitas
Atribut auto-rotate dan camera-controls memberikan gerakan dan kontrol
pengguna. Itu bukan satu-satunya atribut yang memungkinkan. Baca dokumentasi untuk mengetahui daftar lengkap atribut.
<model-viewer src="shark.glb" auto-rotate camera-controls>
Tunda pemuatan dengan gambar poster
Semua model 3D memerlukan waktu untuk dimuat, menambahkan atribut poster
berarti gambar akan ditampilkan hingga model siap digunakan.
Gambar poster yang akan terlihat identik dengan render 3D
dapat dibuat menggunakan editor.
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
Desain responsif
Komponen ini menangani beberapa jenis desain responsif, dengan penskalaan untuk perangkat seluler dan desktop. Objek ini juga dapat mengelola beberapa instance di halaman dan menggunakan Intersection Observer untuk menghemat daya baterai dan siklus GPU saat model tidak terlihat.
Penggunaan editor yang dijelaskan sebelumnya untuk membuat gambar poster memungkinkan
satu gambar tersebut cocok dengan render 3D, meskipun rasio aspek <model-viewer>
merespons berbagai ukuran layar.
Fitur lainnya
Pelajari dokumentasi <model-viewer>
untuk demo fitur lanjutan lainnya.
Hal ini mencakup kemampuan untuk menambahkan
skybox yang diproyeksi ke bumi,
dan membuat
tekstur animasi,
dan hotspot.