<Model-viewer> web bileşeni

Bir web sitesine 3D model eklemek zor olabilir. <model-viewer>, HTML yazmak kadar kolaydır.

Joe Medley
Joe Medley

Web sitelerine 3D model eklemek zordur. 3D modeller ideal olarak akıllı telefonlar, masaüstü bilgisayarlar ve hatta yeni kafaya takılan ekranlar da dahil olmak üzere tüm tarayıcılarda duyarlı şekilde çalışabilen bir görüntüleyicide gösterilir. İzleyici, performans ve oluşturma kalitesi için aşamalı iyileştirmeyi desteklemelidir. Eski, düşük güçlü akıllı telefonlardan artırılmış gerçekliği destekleyen yeni cihazlara kadar tüm cihazlarda kullanım alanlarını desteklemelidir. Güncel teknolojilerle uyumlu olmalıdır. Performanslı ve erişilebilir olmalıdır. Ancak bu tür bir görüntüleyici oluşturmak için özel 3D programlama becerileri gerekir ve üçüncü taraf barındırma hizmeti kullanmak yerine kendi modellerini barındırmak isteyen web geliştiricileri için zor olabilir.

Ancak <model-viewer> web bileşeni, modeli kendi sitenizde barındırırken bir web sayfasına 3D model eklemenize olanak tanır. Bileşenin amacı, temel teknoloji ve platformları anlamadan web sitenize 3D model eklemenizi sağlamaktır. Web bileşeni, duyarlı tasarımı ve bazı cihazlarda artırılmış gerçeklik gibi kullanım alanlarını destekler. Erişilebilirlik, oluşturma kalitesi ve etkileşim özellikleri bu kapsamda yer alır.

Web bileşeni nedir?

Web bileşeni, standart web platformu özelliklerinden oluşturulan özel bir HTML öğesidir. Web bileşenleri, her açıdan standart bir öğe gibi davranır. Benzersiz bir etiketi vardır, özellikleri ve yöntemleri olabilir ve etkinlikleri tetikleyebilir ve yanıtlayabilir. Kısacası, herhangi bir web bileşenini kullanmak için özel bir şey bilmenize gerek yoktur (<model-viewer> çok daha az).

Bu makalede, <model-viewer>'e özgü özellikler ele alınmaktadır. Web bileşenleri hakkında daha fazla bilgi edinmek istiyorsanız webcomponents.org'dan başlayabilirsiniz.

<model-viewer> uygulamasının yapabileceği işlemler neler?

Aşağıdaki örneklerde <model-viewer>'ün bazı özellikleri gösterilmektedir.

Temel 3D modeller

3D model yerleştirmek, aşağıdaki işaretlemeyi eklemek kadar basittir. Bu bileşen glb dosyalarını kullanarak önde gelen herhangi bir tarayıcıda çalışır.

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
  id="mv-shark"
   src="shark.glb"
  camera-controls
></model-viewer>

Bu kod aşağıdaki gibi oluşturulur:

Hareket ve etkileşim ekleme

auto-rotate ve camera-controls özellikleri hareket ve kullanıcı kontrolü sağlar. Olası özellikler bunlarla sınırlı değildir. Özelliklerin tam listesini görmek için dokümanları inceleyin.

<model-viewer src="shark.glb" auto-rotate camera-controls>

Poster resimleriyle yüklemeyi geciktirme

Tüm 3D modellerin yüklenmesi zaman alır. poster özelliği eklemek, model kullanıma hazır olana kadar bir resim gösterileceği anlamına gelir. 3D oluşturucuyla aynı görünecek bir poster resmi, düzenleyici kullanılarak oluşturulabilir.

<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">

Duyarlı tasarım

Bileşen, hem mobil hem de masaüstü için ölçeklendirme yaparak bazı duyarlı tasarım türlerini yönetir. Ayrıca, bir sayfada birden fazla örneği yönetebilir ve bir model görünür olmadığında pil gücü ve GPU döngülerini korumak için Kesişim Gözlemci'yi kullanabilir.

Poster resmi oluşturmak için daha önce açıklanan düzenleyiciyi kullanmak, <model-viewer> öğesinin en boy oranı farklı ekran boyutlarına göre değişse bile tek bir resmin 3D oluşturma işlemiyle eşleşmesini sağlar.

Duyarlılığı temsil eden birden fazla astronot kıyafeti resmi.
Duyarlılık özelliğini gösteren birden fazla astronot kıyafeti resmi.

Diğer özellikler

Daha gelişmiş özelliklerin demoları için <model-viewer> belgelerini inceleyin. Yere yansıtılan bir gökyüzü kutusu ekleme, animasyonlu dokular ve sıcak noktalar oluşturma gibi özelliklerden yararlanabilirsiniz.