Menambahkan model 3D ke situs bisa jadi rumit; <model-viewer> semudah menulis HTML.
Menambahkan model 3D ke situs itu rumit. Model 3D idealnya ditampilkan di penampil yang dapat berfungsi secara responsif di semua browser, termasuk smartphone, desktop, atau bahkan layar yang dipasang di kepala yang baru. Penampil harus mendukung progressive enhancement untuk performa dan kualitas rendering. API ini harus mendukung kasus penggunaan di semua perangkat, mulai dari smartphone lama yang berdaya lebih rendah hingga perangkat yang lebih baru yang mendukung augmented reality. Sistem ini harus terus mengikuti perkembangan teknologi saat ini. Aplikasi harus berperforma tinggi dan mudah diakses. Namun, membangun penampil semacam 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, sekaligus menghosting model tersebut di situs Anda sendiri.
Tujuan komponen ini adalah untuk 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.
Fitur 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 maksud dan tujuan seperti elemen
standar. Elemen ini memiliki tag unik, dapat memiliki properti dan metode, serta dapat
mengaktifkan dan merespons peristiwa. Singkatnya, Anda tidak perlu mengetahui hal khusus apa pun untuk
menggunakan komponen web apa pun, apalagi <model-viewer>.
Artikel ini membahas fitur yang khusus untuk <model-viewer>.
Jika Anda tertarik untuk mempelajari lebih lanjut komponen web,
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 markup berikut. Dengan menggunakan file glb, komponen ini akan berfungsi di browser utama mana 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 akan dirender seperti ini:
Menambahkan gerakan dan interaktivitas
Atribut auto-rotate dan camera-controls memberikan kontrol gerakan dan pengguna. Atribut tersebut bukan satu-satunya atribut yang mungkin. Lihat dokumentasi untuk mengetahui daftar lengkap atribut.
<model-viewer src="shark.glb" auto-rotate camera-controls>
Menunda 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, penskalaan untuk perangkat seluler dan desktop. Elemen ini juga dapat mengelola beberapa instance di halaman dan menggunakan Intersection Observer untuk menghemat daya baterai dan siklus GPU saat model tidak terlihat.
Menggunakan editor yang dijelaskan sebelumnya untuk membuat gambar poster memungkinkan
gambar tunggal tersebut cocok dengan render 3D, meskipun rasio aspek <model-viewer>
merespons berbagai ukuran layar.
Fitur lainnya
Pelajari dokumentasi <model-viewer>
untuk demo fitur lanjutan.
Fitur ini mencakup kemampuan untuk menambahkan
skybox yang diproyeksikan ke permukaan tanah,
serta membuat
tekstur animasi,
dan hotspot.