Augmented reality dengan model-viewer

Pada bulan Februari, kami memperkenalkan komponen web <model-viewer>, yang memungkinkan Anda menambahkan model 3D ke halaman web secara deklaratif, 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 dibuat 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.

Penjelajah Mars

Mari lihat cara melakukan augmented reality dengan <model-viewer>.

Atribut

Seperti yang Anda ketahui, komponen web tidak memerlukan pengetahuan khusus untuk digunakan. Tag tersebut berperilaku seperti elemen HTML standar, memiliki tag unik serta properti dan metode. Setelah menginstalnya dengan tag <script>, gunakan elemen ini seperti elemen HTML lainnya.

<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>

Tampilannya sangat mirip dengan yang saya temukan di artikel sebelumnya. Perhatikan hal yang saya jelaskan di bagian paling akhir. Itu adalah atribut baru.

Menginstal versi baru

Jika sudah menggunakan <model-viewer>, Anda mungkin mengimpor komponen menggunakan tag <script> persis seperti yang ditampilkan dalam dokumentasi. Kami terus melakukan peningkatan. Jika ingin menguji fitur baru sebelum sengaja mengupgrade dan men-deploy, Anda harus menginstal versi <model-viewer> tertentu. Untuk melakukannya, tambahkan nomor versi ke URL file seperti yang ditunjukkan di bawah. Kemudian, lihat halaman rilis untuk melihat 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 diselamatkan di GitHub.