Pada bulan Februari, kami memperkenalkan komponen web <model-viewer>,
yang memungkinkan Anda menambahkan model 3D secara deklaratif ke halaman web, sekaligus menghosting
model di situs Anda sendiri. Satu hal yang tidak didukungnya adalah augmented reality. Artinya, Anda tidak dapat merender gambar sumber komponen di atas feed kamera
perangkat.
Untuk melakukannya, kami menambahkan dukungan untuk Magic Leap dan Quick Look di iOS. Sekarang,
kami mengumumkan dukungan untuk AR di Android dengan penambahan atribut
ar. Atribut ini dibangun di fitur ARCore baru yang disebut Scene Viewer,
aplikasi eksternal untuk melihat model 3D. Untuk mempelajari Scene Viewer lebih lanjut,
lihat Melihat model 3D dalam AR dari browser Android.
Mari kita lihat cara melakukan augmented reality dengan <model-viewer>.
Atribut
Seperti yang Anda ingat, komponen web tidak memerlukan pengetahuan khusus untuk digunakan. Elemen ini
berperilaku seperti elemen HTML standar, memiliki tag unik serta properti
dan metode. Setelah
menginstalnya dengan tag <script>,
gunakan seperti elemen HTML lainnya.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
Tampilannya hampir sama dengan yang saya miliki di artikel sebelumnya. Perhatikan hal yang saya perjelas di bagian akhir. Itu adalah atribut baru.
Menginstal versi baru
Jika sudah menggunakan <model-viewer>, Anda mungkin mengimpor komponen
menggunakan tag <script> persis
seperti yang ditunjukkan dalam dokumentasi.
Kami terus melakukan peningkatan. Jika ingin menguji fitur baru sebelum
melakukan upgrade dan deployment secara sengaja, Anda harus menginstal versi
<model-viewer> tertentu. Untuk melakukannya, tambahkan nomor versi ke URL file seperti yang ditunjukkan
di bawah. Kemudian, tonton halaman rilis untuk mengetahui informasi terbaru.
<script type="module"
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>
<script nomodule
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>
Kesimpulan
Coba <model-viewer> versi baru dan beri tahu kami pendapat Anda.
Masalah dan masukan
diterima di GitHub.