Komponen web <model-viewer>

Menambahkan model 3D ke situs bisa jadi rumit; <model-viewer> semudah menulis HTML.

Joe Medley
Joe Medley

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.

Beberapa gambar pakaian luar angkasa menampilkan responsivitas.
Beberapa gambar pakaian luar angkasa yang mewakili responsivitas.

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.