Bir web sitesine 3D model eklemek zor olabilir; <model-viewer>, HTML yazmak kadar kolaydır.
Bir web sitesine 3D model eklemek karmaşık bir iştir. 3D modeller akıllı telefonlar, masaüstü bilgisayar veya başa takılan yeni ekranlar dahil olmak üzere tüm tarayıcılarda duyarlı bir şekilde çalışabilen bir görüntüleyicide gösterilir. Görüntüleyen, performans ve oluşturma kalitesi için progresif geliştirmeyi desteklemelidir. Eski, düşük güçlü akıllı telefonlardan artırılmış gerçekliği destekleyen yeni cihazlara kadar tüm cihazlardaki kullanım alanlarını desteklemelidir. Güncel teknolojilere ayak uydurması gerekir. Etkili ve erişilebilir olmalıdır. Ancak, böyle bir görüntüleyici oluşturmak özel 3D programlama becerileri gerektirir ve üçüncü taraf barındırma hizmeti kullanmak yerine kendi modellerini barındırmak isteyen web geliştiricileri için zor olabilir.
Bununla birlikte <model-viewer> web bileşeni, 3D modeli bir web sayfasına bildirim olarak eklerken modeli kendi sitenizde barındırabilmenizi sağlar.
Bileşenin amacı, altta yatan teknolojiyi ve platformları anlamadan web sitenize 3D modeller ekleyebilmenizi 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 içerir.
Web bileşeni nedir?
Web bileşeni, standart web platformu özelliklerinden oluşturulmuş özel bir HTML öğesidir. Web bileşeni, tüm amaçlar ve amaçlar için standart bir öğe gibi davranır. Benzersiz bir etiketi vardır, özellikleri ve yöntemleri olabilir, etkinlikleri tetikleyebilir ve yanıt verebilir. Kısacası, herhangi bir web bileşenini kullanmak için <model-viewer> dışında özel bir şey bilmeniz gerekmez.
Bu makalede <model-viewer> ürününe özgü ö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> ürününün bazı özellikleri gösterilmektedir.
Temel 3D modeller
Bir 3D modeli yerleştirmek, aşağıdaki işaretleme kadar basittir. glb dosyalarını kullanarak 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 aşağıdaki gibi oluşturulur:
Hareket ve etkileşim ekleyin
auto-rotate ve camera-controls özellikleri, hareket ve kullanıcı kontrolü sağlar. Kullanabileceğiniz tek özellik bunlar değildir. Özelliklerin tam listesi için belgelere bakın.
<model-viewer src="shark.glb" auto-rotate camera-controls>
Poster resimleriyle yüklemede gecikme
Tüm 3D modellerin yüklenmesi zaman alır. Bu nedenle, poster özelliği eklemek, model kullanıma hazır olana kadar bir resmin gösterileceği anlamına gelir.
Düzenleyici kullanılarak, 3D oluşturma işlemiyle aynı görünecek bir poster resmi 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 yapan 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ü ve GPU döngülerinden tasarruf etmek için Intersection Observer (Kesişim Gözlemci) işlevini kullanır.
Poster resmi oluşturmak için daha önce açıklanan düzenleyicinin kullanılması, <model-viewer> en boy oranı farklı ekran boyutlarına karşılık verse bile bu tek resmin 3D oluşturma işlemiyle eşleşmesine olanak tanır.
Diğer özellikler
Daha gelişmiş özelliklerin demolarını görmek için <model-viewer> belgelerini inceleyin.
Bu özellikler arasında yerden projeksiyonlu gökyüzü kutusu ekleme, animasyonlu dokular ve hotspot'lar oluşturma özellikleri bulunur.