Pada bulan Februari, kami memperkenalkan komponen web <model-viewer>,
yang memungkinkan Anda menambahkan model 3D ke halaman web secara deklaratif,
model ini di situs Anda sendiri. Satu hal yang tidak didukung adalah augmented reality. Bahwa
adalah, Anda tidak bisa merender gambar sumber komponen di atas atribut
feed kamera.
Untuk melakukannya, kami menambahkan dukungan untuk Magic Leap dan Quick Look di iOS. Baru saja
kami mengumumkan dukungan untuk AR di Android dengan tambahan ar
. Atribut ini dibangun pada 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. Ini
berperilaku seperti elemen HTML standar, memiliki tag unik serta properti
dan metode. Sesudah
menginstalnya dengan tag <script>,
menggunakannya 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 lihat di artikel saya sebelumnya. Perhatikan hal tersebut saya soroti di bagian akhir. Itu adalah atribut baru.
Menginstal versi baru
Jika sudah menggunakan <model-viewer>, Anda mungkin mengimpor komponennya
menggunakan tag <script> dengan tepat
seperti yang ditunjukkan dalam dokumentasi.
Kami terus melakukan peningkatan. Jika Anda ingin menguji
fitur baru sebelum
dengan sengaja meningkatkan dan menerapkan, Anda akan ingin menginstal versi
dari <model-viewer>. Untuk melakukannya, tambahkan nomor versi ke URL file seperti yang ditunjukkan
di bawah ini. Lalu, tonton
halaman rilis
untuk mendapatkan info 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
Cobalah <model-viewer> versi baru dan beri tahu kami pendapat Anda.
Masalah dan masukan
selamat datang di GitHub.