Web sitesine 3D model eklemek zor olabilir. <model-viewer> ise HTML yazmak kadar kolaydır.
Web sitelerine 3D model eklemek zordur. 3D modeller, akıllı telefonlar, masaüstü bilgisayarlar ve hatta yeni başa takılan ekranlar dahil olmak üzere tüm tarayıcılarda uyumlu şekilde çalışabilen bir görüntüleyicide gösterilir. Görüntüleyici, performans ve oluşturma kalitesi için progresif geliştirmeyi desteklemelidir. Eski ve düşük performanslı akıllı telefonlardan artırılmış gerçekliği destekleyen yeni cihazlara kadar tüm cihazlardaki kullanım alanlarını desteklemelidir. Güncel teknolojileri takip etmelidir. Performanslı ve erişilebilir olmalıdır. Ancak böyle 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 bildirimli olarak 3D model eklemenize olanak tanır.
Bileşenin amacı, temel teknolojiyi ve platformları anlamanıza gerek kalmadan web sitenize 3D modeller 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şimle ilgili özellikler içerir.
Web bileşeni nedir?
Web bileşeni, standart web platformu özelliklerinden oluşturulmuş özel bir HTML öğesidir. Web bileşeni, her açıdan standart bir öğe gibi davranır. Benzersiz bir etiketi vardır, özellikleri ve yöntemleri olabilir, etkinlikleri tetikleyebilir ve etkinliklere yanıt verebilir. Kısacası, <model-viewer> bir yana, herhangi bir web bileşenini kullanmak için özel bir şey bilmeniz gerekmez.
Bu makalede, <model-viewer> ürününe özel özellikler ele alınmaktadır.
Web bileşenleri hakkında daha fazla bilgi edinmek istiyorsanız webcomponents.org iyi bir başlangıç noktasıdır.
<model-viewer> uygulamasının yapabileceği işlemler neler?
Aşağıdaki örneklerde <model-viewer> aracının bazı özellikleri gösterilmektedir.
Temel 3D modeller
3D model yerleştirmek, aşağıdaki işaretleme kadar basittir. glb dosyaları kullanıldığında bu bileşen tüm önemli tarayıcılarda ç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 şu şekilde oluşturulur:
Hareket ve etkileşim ekleme
auto-rotate ve camera-controls özellikleri, hareket ve kullanıcı kontrolü sağlar. Bunlar, kullanılabilecek tek özellikler değildir. Özelliklerin tam listesi için belgelere bakın.
<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ğini eklediğinizde, model kullanıma hazır olana kadar bir resim gösterilir.
Düzenleyiciyi kullanarak 3D görüntüyle aynı görünecek bir poster resmi oluşturabilirsiniz.
<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 işler. Ayrıca bir sayfadaki birden fazla örneği yönetebilir ve bir model görünür olmadığında pil gücünden ve GPU döngülerinden tasarruf etmek için Intersection Observer'ı kullanır.
Poster resmi oluşturmak için daha önce açıklanan düzenleyiciyi kullanmak, <model-viewer> en boy oranı farklı ekran boyutlarına yanıt verse bile bu tek resmin 3D oluşturmayla eşleşmesini sağlar.
Diğer özellikler
Daha ileri seviye özelliklerin demoları için <model-viewer> belgelerini inceleyin.
Bunlar arasında zemine yansıtılan gökyüzü kutusu ekleme, animasyonlu dokular ve etkin noktalar oluşturma özellikleri yer alır.