Günümüzde insanların ceplerinde artırılmış gerçeklik (AR) ve sanal gerçeklik (VR) özellikli cihazlar taşıması yaygın bir durumdur. Bu cihazlarda birbirimizle paylaştığımız içerikler giderek daha fazla 3D oluyor. Bu kod laboratuvarında, web sitenize veya Progresif Web Uygulamanıza (PWA) 3D içerik eklemek için <model-viewer> adlı bir web bileşenini nasıl kullanacağınızı öğreneceksiniz. Bu bileşen, HTML ile resim eklemek kadar kolaydır.
Ne oluşturacaksınız?
Artırılmış gerçeklik hologramları gösterebilen etkileşimli bir 3D model içeren web sitesi
Neler öğreneceksiniz?
<model-viewer>web bileşenini web sitenize yükleme- Standart bir web düzeninde 3D model sunmak için
<model-viewer>nasıl kullanılır? - Sunuya tarz katmak için
<model-viewer>simgesini özelleştirme
Gerekenler
- Web tarayıcısı Chrome'u öneririz ancak diğer modern tarayıcılar (Firefox, Safari, Edge) da kullanılabilir.
- Node.js ve bir metin düzenleyici veya Glitch'e erişim.
- HTML, CSS, JavaScript ve Chrome Geliştirici Araçları hakkında temel bilgi sahibi olmanız gerekir.
Bu codelab, <model-viewer> ve 3D modellerine odaklanmaktadı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 - Glitch
Projenizi barındırmak ve değişiklikleri görmek için Glitch gibi bir online kod düzenleme aracı kullanabilirsiniz.
Glitch'te kullanmaya başlamak için aşağıdaki düğmeyi tıklayın:
Önceden yüklenmiş Glitch ortamınızı açın
Bundan sonra, dosyalarınızı değiştirmek için Glitch'teki kod düzenleyiciyi kullanabilir ve hazır olduğunuzda "Show Live" (Canlı Göster) düğmesini kullanarak uygulamanızı yayınlamaya başlayabilirsiniz. Şimdi bunu deneyin. Aşağıdaki sayfayı görmeniz gerekir:
2. seçenek: Yerel sunucu
Yerel sunucu, tercih ettiğiniz kod düzenleyiciyi kullanmanıza olanak tanır.
Sunucuyu yükleme
Yerel web sayfalarını sunmamız gerekir. Bunun için Node.js ve basit bir statik içerik sunucusu olan serve'ü kullanabilirsiniz.
Node.js'yi işletim sisteminize nasıl yükleyeceğinizle ilgili talimatlar için Node.js web sitesini inceleyin. Node.js yüklendikten sonra serve'ü yüklemek için bu komutu çalıştırın:
npm install -g serve
Kodu İndirme
Başlangıç şablonu ve tüm örnek öğeler indirilebilir. Aşağıdaki bağlantıyı tıklayın ve içeriği projenizi içerecek dizine çıkarın:
Alternatif olarak, depoyu klonlamak için git'i kullanın:
git clone https://github.com/googlecodelabs/model-viewer-codelab.git
Sunucuyu çalıştırma
Yukarıda çıkarılan şablon dizininden (veya git'i kullandıysanız klonlanan dizinin içinden) bir web sunucusu başlatmak için serve komutunu çalıştırın:
Çok basit bir başlangıç noktası görmek için bu adresi (yukarıdaki ekran görüntüsünde http://localhost:5000 olarak gösterilmiştir ancak makinenizde farklı olabilir) ziyaret edin:
Glitch web düzenleyicisini veya yerel sunucuyu kullanıyorsanız tercih ettiğiniz kod düzenleyiciyi kullanarak index.html dosyasını düzenleyerek başlayacağız.
<model-viewer> kitaplığını ekleme
<model-viewer> öğesini kullanmak için bir dizi JavaScript dosyası eklememiz gerekir.
Aşağıdaki bölümde, <model-viewer> kitaplığı sayfanıza eklenir. Aşağıdaki kodu <body> öğesinin 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>İçeriği değiştirmeden kitaplıklar 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 tamamen yayınlanana kadar bu uyarılar beklenir.
Uyumluluğu en üst düzeye çıkarma
<model-viewer>, kutudan çıktığı haliyle birçok modern tarayıcıyı destekler. Ancak sayfanızın destekleyebileceği tarayıcı sayısını artırmak istiyorsanız ek polyfill'ler ekleyebilirsiniz.
Önerdiğimiz tüm ayarları aşağıda bulabilirsiniz. Bu bilgiler, tüm modern tarayıcılarda mükemmel bir deneyim sunmanıza yardımcı olur. Daha fazla bilgi için <model-viewer> polyfill'leri dokümanlarını inceleyin.
Aşağıdaki kodu <head> dosyasına 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-viewer> ekleme
Şimdi de sayfaya gerçek <model-viewer> etiketini ekleyelim ki 3D öğeleri görebilelim. 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 yalnızca iki özellikten bahsedilir:
srcözelliği, 3D modelin nereden yükleneceğini belirtir. Bu örnekte, CC-BY lisansı kapsamında kullanıma sunulan Poly'nin Astronot 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ü paralellikler gösterdiğini fark edebilirsiniz.
Yeniden yükleme işlemi yapıldığında astronot gösterilir:
Güzel! Web'de 3D modeliniz var!
Aşağıdaki adımlarda daha fazla etkileşim ve hareketle denemeler yapacağız, öğenin görünümünü değiştireceğiz ve artırılmış gerçekliğe giriş yapacağız.
Modele biraz etkileşim ekleyelim. Kullanıcılara modelin etkileşimli olduğu ipucunu vermek (ve modeli göstermek) için varsayılan olarak modeli döndürürüz. Ardından, kullanıcıların modeli fareleriyle veya dokunarak kendilerinin hareket ettirebilmesi için kontrolleri etkinleştiririz.
Bunu yapmak için <model-viewer> öğesine auto-rotate ve camera-controls özelliklerini eklemeniz yeterlidir.
<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şça dönmeye başlar. Modeli sürüklemeyi denerseniz (fareyi tıklayıp hareket ettirerek veya dokunma özellikli bir cihazda parmağınızı sürükleyerek) model döner.
Bu özellikler bir araya geldiğinde kullanıcıya bunun statik bir resimden daha fazlası olduğu konusunda ipucu verir ve etkileşimli bir deneyim sunarak kullanıcıların kendilerini dahil olmuş hissetmelerini sağlar (ve böylece modelinizin arka tarafını görebilirler).
Artık biraz hareketimiz olduğuna göre, modeli gerçekten ilgi çekici hale getirmek için görünümü nasıl değiştirebileceğimize bakalım.
Modeli güncelleme
Bu değişikliklerden bazıları (özellikle ışıklandırma değişiklikleri) belirli modellerde daha iyi görünür. İlk olarak, src özelliğini yeni bir modeli işaret edecek şekilde güncelleyelim: third_party/DamagedHelmet/DamagedHelmet.gltf (Sketchfab'de Creative Commons Atıf-Ticari Olmayan lisansı altında yayınlanmıştır). Öğenin tamamının kaynağı artık şu şekilde olmalı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, yapacağımız değişikliklerden bazılarını gösterecek.
Arka plan rengini değiştirme
Öncelikle, modelin sayfada öne çıkması 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ıtılan kapalı bir sahne sağlamak ve ışıklandırma yapılandırmasını belirtmek için kullanılır. Varsayılan ışıklandırma mükemmeldir (ve ARCore'un Scene Viewer'ının ışıklandırmasıyla uyumludur) ancak bazen özel bir ortamınız olabilir veya elde etmeye çalıştığınız sonuçlar için özel bir ışıklandırmaya ihtiyacınız olabilir. Ortam resmi özelliğini belirtelim (studio_small_07_1k.hdr, hdrihaven.com adresinden alınmıştır).
environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"
Gölge ekleme
Nesnenin gölge oluşturması sahneye ekstra derinlik katar. Aşağıdaki özellik, <model-viewer> öğemize eklendiğinde gölge oluşturur:
shadow-intensity="1"
Işık yoğunluğunu değiştirme
Model biraz karanlık. Ayrıntıların daha fazlasını görebilmek için ışıkları biraz açalım. Hem varsayılan sahne ışığı hem de eklediğimiz çevre haritası ışığı bağımsız olarak ayarlanabilir. Şunu ekleyin:
stage-light-intensity="3" environment-intensity="2"Bu değişikliklerin her biri oldukça küçüktü ancak model artık çok daha iyi görünüyor.
Ardından, bazı alternatif görüntüleme modlarına göz atacağız.
Giderek daha fazla cihazda artırılmış gerçeklik (AR) özelliği bulunuyor. Bu modlardan bazılarının tetiklenmesi zordur veya özel kod gerektirir ancak <model-viewer> tüm bu karmaşıklığı sizin için halledebilir.
ARCore'un Scene Viewer'ı
Desteklenen cihazlarda <model-viewer>, ARCore'un Scene Viewer'ını tetikleyebilir. ar özelliğini <model-viewer> öğenize ekleyin. Evet, yapmanız gereken tek şey 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>Bu özelliği, ARCore'un güncel bir sürümünün yüklü olduğu desteklenen bir cihazda görüntülediğinizde ek bir simge görürsünüz (aşağıdaki resimde gösterildiği gibi). Bu seçeneği tıkladığınızda modeliniz Sahne Gezgini'nde açılır.
Diğer cihazlar: iOS Quick Look, Magic Leap, WebXR
Diğer birçok cihaz için biraz daha fazla işlem yapılması gerekir.
iOS'te ios-src özelliği, 3D modelin ek bir USDZ sürümünün (iOS'te gereklidir) belirtilmesine olanak tanır. Bu özellik sağlandığında, desteklenen iOS cihazlarda model üzerinde standart AR Quick Look 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. prismatic.js kitaplığını da eklemeniz gerektiğini unutmayın (bu kitaplık, isteğe bağlı polyfill'lerde yer alır ancak yorum satırı olarak eklenir) ve 3D modelin .glb dosyası (gltf dosyası değil) olması gerekir.
<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östermemize olanak tanır. Aşağıdaki snippet'i <model-viewer> etiketinize ekleyin:
camera-orbit="-20deg 75deg 2m"
Elbette bu modeller, duyarlı sayfalar da dahil olmak üzere diğer içeriklerinizle birlikte kullanılabilir. Duyarlı web sayfası oluşturma bu codelab'in kapsamı dışındadır ancak ek bilgi için Duyarlı Web Tasarımı ile İlgili Temel Bilgiler'e göz atın.
Depomuza örnek bir sayfa ekledik. responsive.html adlı filmi geniş ekranda (masaüstü gibi) izleyin:
Aynı sayfa, dar bir görüntü alanında (ör. mobil cihaz):
Web'e bir 3D içerik yerleştirdiniz. Bravo!
Yapabilecekleriniz
Daha birçok yapılandırma seçeneği vardır. Daha fazla bilgi için online dokümanlarımıza veya koda göz atın.
Modellerinizi belirledikten sonra göz önünde bulundurabileceğiniz bazı sonraki adımlar:
- Bazı modeller oldukça büyük olabilir. Bu durumlarda <model-viewer>, mükemmel deneyimler sunmaya devam etmek için çeşitli yöntemler sağlar. Daha fazla bilgi için Lazy loading (Geç yükleme) dokümanları sayfasına bakın.
- 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.
- Ayrıca, web'de içeriklerinizi desteklemek için web sayfalarınıza modeller yerleştirebilirsiniz.
Geliştirme sürecimiz GitHub'da herkese açıktır. Düşüncelerinizi öğrenmekten memnuniyet duyarız!