Menambahkan model 3D ke situs bisa jadi rumit; <model-viewer> semudah menulis HTML.
Menambahkan model 3D ke situs tidaklah mudah. Model 3D idealnya ditampilkan di viewer yang dapat berfungsi secara responsif di semua browser, termasuk smartphone, desktop, atau bahkan layar yang dipasang di kepala. Penampil harus mendukung progressive enhancement untuk performa dan kualitas rendering. Aplikasi ini harus mendukung kasus penggunaan di semua perangkat, mulai dari smartphone lama dengan daya lebih rendah hingga perangkat yang lebih baru yang mendukung augmented reality. Teknologi ini harus terus diperbarui dengan teknologi terbaru. Aplikasi harus berperforma baik dan dapat diakses. Namun, membangun penampil seperti itu memerlukan keterampilan pemrograman 3D khusus, dan dapat menjadi tantangan bagi developer web yang ingin menghosting modelnya sendiri, bukan menggunakan layanan hosting pihak ketiga.
Namun, komponen web <model-viewer>
memungkinkan Anda menambahkan model 3D secara deklaratif, 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 maksud dan tujuan seperti elemen
standar. Fungsi 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 khusus untuk <model-viewer>
.
Jika Anda tertarik untuk 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 sesederhana markup berikut. Dengan menggunakan file glb, komponen ini akan berfungsi di browser utama.
<!-- 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 kontrol gerakan dan
pengguna. Itu 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, yang diskalakan untuk perangkat seluler dan desktop. API 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
satu gambar tersebut cocok dengan render 3D, meskipun rasio aspek <model-viewer>
merespons berbagai ukuran layar.
Fitur lainnya
Pelajari dokumentasi <model-viewer>
untuk melihat demo fitur lanjutan lainnya.
Hal ini mencakup kemampuan untuk menambahkan
skybox yang diproyeksikan bumi,
dan membuat
tekstur animasi,
dan hotspot.