Şubat ayında, bir 3D modeli bir web sayfasına bildirimli şekilde eklerken modeli kendi sitenizde barındırabilmenizi sağlayan <model-viewer> web bileşenini kullanıma sunduk. Ancak desteklemediği bir şey de artırılmış gerçeklikti. Diğer bir deyişle, bileşenin kaynak resmini bir cihazın kamera feed'inin üzerinde görüntüleyemezsiniz.
Bunun için Magic Leap ve iOS'te Quick Look özelliklerini kullanıma sunduk. Şimdi de Android'de ar özelliğinin eklenmesiyle artırılmış gerçeklik desteğini duyuruyoruz. Bu özellik, 3D modelleri görüntülemeye yarayan harici bir uygulama olan Scene Viewer adlı yeni bir ARCore uygulaması üzerine kuruludur. Scene Viewer hakkında daha fazla bilgi için Android tarayıcıdan artırılmış gerçeklikte 3D modelleri görüntüleme konusuna göz atın.
<model-viewer> ile artırılmış gerçeklik özelliğini nasıl kullanabileceğimize bakalım.
Özellik
Hatırlayacağınız gibi, bir web bileşeninin kullanımı için özel bilgi gerekmez. Benzersiz bir etiketi, özellikleri ve yöntemleri olan standart bir HTML öğesi gibi davranır. <script> etiketiyle yükledikten sonra diğer HTML öğeleri gibi kullanın.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
Bu bölüm, önceki makalemdekiyle hemen hemen aynı. En sonda vurguladığım şeye dikkat edin. Bu, yeni özelliktir.
Yeni sürüm yükleniyor
Zaten <model-viewer> kullanıyorsanız muhtemelen <script> etiketlerini kullanarak bileşeni belgelerde gösterildiği gibi içe aktarıyorsunuzdur.
Sürekli olarak iyileştirmeler yapıyoruz. Akıllı olarak yükseltmeden ve dağıtmadan önce yeni özellikleri test etmek isterseniz belirli bir <model-viewer> sürümünü yüklemeniz gerekir. Bunu yapmak için sürüm numarasını aşağıda gösterildiği gibi dosya URL'lerine ekleyin. Ardından, güncellemeler için sürümler sayfasını izleyin.
<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>
Sonuç
<model-viewer> uygulamasının yeni sürümünü deneyin ve görüşlerinizi bizimle paylaşın.
Sorunlar ve geri bildirimler GitHub'da kabul edilir.