<model-viewer> ile artırılmış gerçeklik

<model-viewer> web bileşeni, web'deki 3D modelleri görüntülemek ve bunlarla etkileşim kurmak için kullanılabilir. Bu bileşenler, web'de Artırılmış Gerçeklik ile bu 3D modelleri yerleştirme ve bu modellerle etkileşime geçme sürecine sorunsuz bir şekilde geçiş yapar.

ARCore destekli bir Android cihazda görüntülendiğinde, ar özelliğine sahip <model-viewer> bileşeni aşağıdaki örnekte gösterildiği gibi bir düğme görüntüler:

Model Görüntüleyici Ekran Görüntüsü

ARCore destekli cihazlarda bu düğmeye dokunduğunuzda model, ar-modes özelliğinin değerine bağlı olarak Chrome'un WebXR işlevini veya Scene Viewer uygulamasını kullanır.

AR düğmesinin görünümü, web bileşeni yuvaları kullanılarak özelleştirilebilir. Örnek için <model-viewer> documentation sayfasını inceleyin. Bir Android uygulaması veya tarayıcıdan artırılmış gerçeklikte etkileşimli 3D modeller görüntüleme hakkında daha fazla bilgi edinmek için Sahne Görüntüleyici'ye de bakın.

<model-viewer> uygulamasını kullanmaya başlama

Aşağıdaki adımlarda, herhangi bir web sayfasında <model-viewer> özelliğini kullanmaya nasıl başlayacağınız gösterilmektedir.

<model-viewer> bağımlılığını ekleyin

Paketlenmemiş CDN'den

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

npm'den

npm install @google/model-viewer

Ardından, tercih ettiğiniz paketleyiciyi kullanarak node_modules/model-viewer/dist/model-viewer.min.js üzerinden <model-viewer> ekleyin.

<model-viewer> etiketini dahil et

HTML dokümanınıza <model-viewer> web bileşenini ekleyin:

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

<model-viewer> etiketini yapılandırma

Model görünümü, <model-viewer> etiketindeki özellikler değiştirilerek yapılandırılabilir. Bu özellikler; kamera hareketi, model animasyonları ve ortam bilgileri gibi seçenekleri gösterir. <model-viewer> dokümanlarında ayarlanabilecek tüm özellikler listelenmiştir. Model Düzenleyici yardımcı programı, bir <model-viewer> HTML etiketi oluşturup kamera konumu ve ışık gibi özellikleri yapılandırabilir.

Model Düzenleyici Ekran Görüntüsü

Model uyumluluğu

gltf ve glb dosya biçimindeki modeller <model-viewer> tarafından desteklenir. Desteklenen glTF uzantılarının listesi için three.js GLTFLoader documentation sayfasını inceleyin.

Modelinizin düzgün göründüğünden emin olmak için modelinizi Model Düzenleyici'de kontrol edin.

Tarayıcı ve cihaz desteği

Bir web sayfasında 3D modelleri görüntülemek için <model-viewer> kullanımı, her zaman etkin olan tüm tarayıcılarda desteklenir. Öğe odaklanıldığında odak halkalarını gizlemek için :focus-visible çoklu dolgu kullanmanızı öneririz.

Artırılmış gerçeklik (AR) özellikleri için, ARCore destekli bir cihaz ve AR için Google Play Hizmetleri'nin yüklenmesi gerekir. webxr AR modu için WebXR tarayıcı desteği başlıklı makaleye bakın. WebXR desteklenmiyorsa varsayılan olarak bunun yerine Scene Viewer kullanılır.

Sonraki adımlar