Günümüzde kullanıcılar, ceplerinde artırılmış gerçeklik (AR) ve sanal gerçeklik (VR) özellikli cihazlar taşımayı tercih ediyor. Bu cihazlarda birbirleriyle paylaştığımız içerikler giderek daha fazla 3D oluyor. Bu kod laboratuvarında, web sitenize veya Progresif Web Uygulaması'na (PWA) 3D içerik eklemek için HTML ile resim eklemek kadar kolay bir yöntemden <model-viewer> adında bir web bileşenini nasıl kullanacağınızı öğreneceksiniz.
Oluşturacağınız uygulama
Artırılmış Gerçeklik (AR) rogramlarını görüntüleme özelliğine sahip etkileşimli bir 3D model içeren bir web sitesi
Neler öğreneceksiniz?
<model-viewer>web bileşenini web sitenize yükleme- Standart web düzeninde 3D model sunmak için
<model-viewer>nasıl kullanılır? - Sunuya filtre eklemek için
<model-viewer>nasıl özelleştirilir?
Gerekenler
- Web tarayıcısı. Chrome'u öneririz ancak tüm modern tarayıcılar (Firefox, Safari, Edge) çalışır.
- Node.js ve bir metin düzenleyici veya Glitch'e erişim.
- HTML, CSS, JavaScript ve Chrome Geliştirici Araçları ile ilgili temel bilgiler.
Bu codelab'de <model-viewer> ve 3D modeller bulunmaktadır. Alakalı olmayan kavramlar ve kod blokları işaretlenmiştir ve yalnızca kopyalayıp yapıştırmanız için kullanımınıza sunulmuştur.
1. Seçenek: Açıklama
Projenizi barındırmak ve değişiklikleri görmek için Glitch gibi bir online kod düzenleme aracı kullanabilirsiniz.
Glitch'i kullanmaya başlamak için aşağıdaki düğmeyi tıklayın:
Önceden yüklenmiş Glitch ortamınızı açma
Ardından, dosyalarınızı değiştirmek için Glitch'teki kod düzenleyiciyi kullanabilirsiniz. Hazır olduğunuzda "Canlı Yayını Göster" düğmesini kullanarak uygulamanızı yayınlamaya başlayın. Bunu şimdi deneyin. Aşağıdaki sayfayı göreceksiniz:
2. Seçenek: Yerel sunucu
Yerel sunucu, tercih ettiğiniz kod düzenleyiciyi kullanmanıza olanak tanır.
Sunucuyu yükleyin
Yerel web sayfaları sunmak için bir yönteme ihtiyacımız vardır. Bunun basit bir yolu, Node.js ve basit bir statik içerik sunucusu olan serve'dir.
İşletim sisteminize nasıl yükleyeceğinizle ilgili talimatlar için Node.js web sitesine bakın. Node.js yüklendikten sonra, sunumu yüklemek için şu komutu çalıştırın:
npm install -g serve
Kodu İndirme
Tüm başlangıç öğeleriyle birlikte bir başlangıç şablonu da indirilebilir. Aşağıdaki bağlantıyı tıklayın ve içeriği açın ve projenizi içermesini istediğiniz dizine ekleyin:
Alternatif olarak, depoyu klonlamak için git tuşunu kullanabilirsiniz:
git clone https://github.com/googlecodelabs/model-viewer-codelab.git
Sunucuyu çalıştırma
Bir web sunucusunu başlatmak için yukarıda çıkarılan şablon dizininden (veya git kullandıysanız klonlanmış dizinin içinden) serve komutunu çalıştırın:
Çok basit bir başlangıç noktası görmek için bu adresi ziyaret edin (yukarıdaki ekran görüntüsünde http://localhost:5000 ancak makinenizde farklı olabilir):
index.html dosyasını Glitch web düzenleyici ile veya yerel sunucuyu kullanıyorsanız en sevdiğiniz kod düzenleyici aracılığıyla düzenleyerek başlıyoruz.
<model-viewer>kitaplığını ekle
<model-viewer> ifadesini kullanmak için bir dizi JavaScript dosyası eklememiz gerekir.
Aşağıdaki bölüm, sayfanıza <model-viewer> kitaplığını ekler. Aşağıdaki kodu <body> kodunun sonuna yapıştırın.
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>Kısa bir süre önce içerik değiştirmeden kitaplık ekledik. Sayfanızı yenilerseniz aynı içeriği görürsünüz. Geliştirici Araçları konsolunu açarsanız eksik WebXR API'leri hakkında bazı uyarılar görebilirsiniz ancak bu API tam olarak kullanıma sunulana kadar bunlar beklenir.
Uyumluluğu En Üst Düzeye Çıkarma
Kullanıma hazır &&;model-viewer> birçok modern tarayıcıyı destekler. Ancak, sayfanızın destekleyebileceği tarayıcı sayısını artırmak istiyorsanız ilave polyfill'ler ekleyebilirsiniz.
Önerilen grubumuzun tamamını aşağıda bulabilirsiniz. Bunlar, tüm modern tarayıcılarda mükemmel bir deneyimi desteklemenize yardımcı olacak. Daha fazla bilgi için <model-viewer> polyfills belgelerine bakın.
Aşağıdaki kodu <head> konsoluna yapıştırın.
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->
<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>--><model-görüntüleyici>
Şimdi gerçek <model-viewer> etiketini ekleyelim ve 3B'yi görelim. Mevcut <p> öğesini aşağıdaki kodla değiştirin:
<model-viewer src="third_party/Astronaut/Astronaut.glb"
alt="A 3D model of an astronaut">
</model-viewer>Burada bahsedilecek yalnızca iki özellik vardır:
srcözelliği, 3D modelin nereden yükleneceğini belirtir. Bu örnekte, CC-BY lisansı kapsamında kullanıma sunulan Poly tarafından sunulan bir Astronaut modelini kullandık.altözelliği, erişilebilirlik için modelin alternatif metin açıklamasını içerir.
Bu özelliklerin her ikisinin de img etiketinin özellikleriyle güçlü paralelleri olduğunu fark edebilirsiniz.
Yeniden yükleme işlemi astronotu gösterecek:
Güzel! Web'de 3D modeliniz var!
Aşağıdaki adımlarda daha fazla etkileşim ve hareket deneyerek öğenin görünümünü değiştireceğiz ve parmaklarımızı AR'ya dökeceğiz.
Modele biraz etkileşim ekleyelim. Kullanıcılara, modelin etkileşimli olduğuna dair bir ipucu vermek (ve aynı zamanda göstermek) için varsayılan olarak modeli döndüreceğiz ve ardından kullanıcıların, fareyi veya dokunmatik modeli kullanarak modeli kendi kendilerine taşıyabilmeleri için denetimleri etkinleştireceğiz.
Bunu yapmak için auto-rotate ve camera-controls özelliklerini <model-viewer> öğesine ekleyin.
<model-viewer src="third_party/Astronaut/Astronaut.glb"
auto-rotate camera-controls
alt="A 3D model of an astronaut">
</model-viewer>Sayfayı yenilediğinizde Astronot yavaş yavaş döner. Modeli sürüklemeyi denerseniz (fareyi tıklayıp hareket ettirerek veya parmağınızı sürükleyerek dokunmatik özellikli bir cihazdaysanız model döner.
Bu özellikler birlikte kullanıldığında, kullanıcıya bunun yalnızca statik bir resimden çok daha fazla ipucu verdiği ve etkileşim kurduğunu hissettirdiği için ipucu vererek modelinizin arka tarafını görebilirler.
Biraz hareket ettiğimize göre, şimdi modeli gerçekten ilgi çekici hale getirmek için görünümü değiştirme konusunu inceleyelim.
Modeli güncelleme
Bunlardan bazıları (özellikle ışık değişiklikleri), belirli modellerde en iyi sonucu verir. İlk olarak, src özelliğini yeni bir modele işaret edecek şekilde güncelleyelim: third_party/DamagedHelmet/DamagedHelmet.gltf (Sketchfab'da Creative Commons Attribution-NonTicari Olmayan lisansı altında yayınlandı). Öğenin tamamının kaynağı artık şunları okumalıdır:
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
auto-rotate camera-controls
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>Bu model, yapmak üzere olduğumuz bazı değişiklikleri gösterecek.
Arka plan rengini değiştirme
Önce, modelin sayfaya göre öne çıkmasını sağlamak için arka plan rengini değiştirelim. <model-viewer> etiketinize aşağıdaki özelliği ekleyin:
background-color="#70BCD1"
Ortam haritasını ayarlama
Ortam haritaları, modelden yansıyan ve aydınlatma yapılandırmasını belirten bir ortam sunmak için kullanılır. Varsayılan ışıklandırma mükemmeldir ve ARCore'un Sahne Görüntüleyicisi'nin ışığıyla uyumludur. Ancak bazen özel bir ortamınız olabilir veya ulaşmaya çalıştığınız sonuçlara özgü ışıklandırmalara ihtiyaç duyabilirsiniz. Ortam-resim özelliğini belirtelim (studio_small_07_1k.hdr ifadesi hdrihaven.com adresinden).
environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"
Gölge ekleme
Nesnenin gölge oluşturması, sahneye fazladan derinlik katar. Aşağıdaki özellik, <model-viewer> öğesine eklendiğinde gölge oluşturur:
shadow-intensity="1"
Aydınlatma yoğunluğunu değiştirme
Model biraz karanlık. Daha fazla ayrıntı görebilmemiz için ışıkları biraz artıralım. Hem varsayılan sahne ışıklandırması hem de ortamın harita haritasından gelen ışıklandırma bağımsız olarak ayarlanabilir. Bunu ekle:
stage-light-intensity="3" environment-intensity="2"Bu değişikliklerin her biri çok küçüktü ancak model artık çok daha iyi görünüyor!
Şimdi, bazı alternatif görüntü modlarına göz atalım.
Giderek daha fazla cihazda bir tür artırılmış gerçeklik (AR) bulunuyor. Bu modlardan bazılarını tetiklemek veya özel bir kod kullanmak zor olabilir. Ancak <model-görüntüleyici> tüm bu karmaşıklığı sizin yerinize yönetebilir.
ARCore'un Sahne Görüntüleyicisi
Desteklenen cihazlarda <model-görüntüleyici> ARCore's Scene Görüntüleyici'yi tetikleyebilir. ar özelliğini <model-viewer> öğenize ekleyin. Evet, tek yapmanız gereken bu!
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
ar
auto-rotate camera-controls
background-color="#70BCD1"
shadow-intensity="1"
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>Artık bunu, yakın tarihli bir ARCore bilgisi olan desteklenen bir cihazda görüntülüyorsanız ek bir simge (aşağıdaki resimde olduğu gibi) göreceksiniz. Bu seçeneği tıkladığınızda modeliniz Sahne Gezgini'nde açılır!
Diğer cihazlar: iOS Hızlı Bakış, Magic Leap, WebXR
Diğer cihazların daha fazla çalışması gerekir.
iOS'te ios-src özelliği, 3D modelin ek bir USDZ sürümünün (iOS'ta gereklidir) belirtilmesine olanak tanır. Bu özellik sağlandığında, desteklenen iOS cihazlar için modelde standart AR Hızlı Bakış simgesi görünür. USDZ hakkında daha fazla bilgi için Apple'ın geliştirici belgelerine bakın.
Magic Leap cihazlarda magic-leap özelliği AR desteğini etkinleştirir. Ayrıca prismatic.js kitaplığını (isteğe bağlı çoklu dolgulara dahil edilir, ancak yorum yapılır) eklemeniz gerekir ve 3D model bir .glb dosyası (.gltf değil) olmalıdır.
<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>Kameranın ilk açısı ve konumu kontrol edilebilir. Bu kontrol, kullanıcılara kaskın daha iyi bir varsayılan görünümünü göstermemizi sağlar. Aşağıdaki snippet'i <model-viewer> etiketinize ekleyin:
camera-orbit="-20deg 75deg 2m"
Bu modeller, duyarlı sayfalar da dahil olmak üzere diğer içeriğinizle elbette kullanılabilir. Duyarlı web sayfası oluşturmak bu codelab'in kapsamı dışındadır ancak daha fazla bilgi için Duyarlı Web Tasarımı Temelleri'ne göz atın.
Depomuza örnek bir sayfa ekledik. Masaüstünde olduğu gibi, geniş ekranda responsive.html ürününe göz atın:
Aynı sayfa, dar bir görüntü alanında (mobil cihaz gibi):
Web'e bir parça 3D içerik yerleştirdiniz! Harika!
Sırada ne var?
Çok daha fazla yapılandırma seçeneği mevcuttur. Daha fazla bilgi için online dokümanlarımızı veya kodunu inceleyin.
Modellerinizi tanımladıktan sonra değerlendirmek isteyebileceğiniz bazı adımlar:
- Bazı modeller çok büyük olabilir. Bu durumlarda <model-viewer> mükemmel deneyimler sunmak için birçok yöntem sunar. Geç yükleme dokümanları sayfasında daha fazla bilgi bulabilirsiniz.
- Animasyonlu modeller çok eğlenceli olabilir. Modellerinizde tanımlanan animasyonları etkinleştirme (ve bunlar arasında geçiş yapma) hakkında daha fazla bilgi için Animasyonlar sayfamıza göz atın.
- Bu web'dir. Modeller, içeriğinizi tamamlamak için web sayfalarınıza yerleştirilebilir.
Geliştirme sürecimiz GitHub'da açıktır. Düşüncelerinizi öğrenmek isteriz!