Bir web sitesine 3B modeller eklemek zordur. 3D modeller ideal olarak akıllı telefonlar, masaüstü ve hatta yeni başa takılan ekranlar dahil tüm tarayıcılarda duyarlı bir şekilde çalışabilen bir görüntüleyicide gösterilecektir. İzleyici, performans ve işleme kalitesi için aşamalı geliştirmeyi desteklemelidir. Daha eski, daha düşük güçlü akıllı telefonlardan artırılmış gerçekliği destekleyen daha yeni cihazlara kadar tüm cihazlarda kullanım durumlarını desteklemelidir. Güncel teknolojilerle güncel kalmalıdır. Performanslı ve erişilebilir olmalıdır. Ancak böyle bir görüntüleyici oluşturmak, özel 3B 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.
Buna yardımcı olmak için, <model-viewer> az önce piyasaya sürülen web bileşeni sürüm 1.1, modeli kendi sitenizde barındırırken bildirimsel olarak bir web sayfasına 3B model eklemenizi sağlar. Web bileşeni, duyarlı tasarımı ve bazı cihazlarda artırılmış gerçeklik gibi kullanım durumlarını destekler ve erişilebilirlik, işleme kalitesi ve etkileşim için özellikler içerir. Bileşenin amacı, altta yatan teknoloji ve platformları anlamadan web sitenize 3B modeller eklemenizi sağlamaktır.
Web bileşeni nedir? #
Web bileşeni, standart web platformu özelliklerinden oluşturulmuş özel bir HTML öğesidir. Bir web bileşeni, tüm niyet ve amaçlar için standart bir öğe gibi davranır. Eşsiz bir etiketi vardır, özellikleri ve yöntemleri olabilir ve olaylara tepki verebilir ve tepki verebilir. Kısacası, herhangi bir web bileşenini kullanmak için özel bir şey bilmenize gerek yok, çok daha fazlası <model-viewer>.
Bu yazıda size özel olan şeyleri göstereceğim. <model-viewer>. Web bileşenleri hakkında daha fazla bilgi edinmekle ilgileniyorsanız, webcomponents.org başlamak için iyi bir yerdir.
<model-viewer> ne yapabilir? #
Size birkaç mevcut yeteneği göstereceğim <model-viewer>. Bugün harika bir deneyim yaşayacaksınız ve <model-viewer> Google yeni özellikler ekledikçe ve oluşturma kalitesini iyileştirdikçe zamanla daha iyi hale gelecektir. Sağladığım örnekler, yalnızca size ne yaptığına dair bir fikir vermek içindir. Denemek isterseniz kurulum ve kullanım talimatları var. GitHub deposu.
Temel 3D modeller #
Bir 3B modeli gömmek, aşağıdaki işaretleme kadar basittir. İle glb dosyalarını kullanmabu bileşenin herhangi bir büyük tarayıcıda çalışmasını sağladık.
<!-- Import the component -->
script type="module" src="https://unpkg.com/Googleitt_/model-viewer/dist/model-viewer.min.js"></script>
script nomodule src="https://unpkg.com/Googleitt_/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
model-viewer id="mv-demo" shadow-intensity="1" src="./spacesuit.glb"
alt="A 3D model of an astronaut" auto-rotate camera-controls
poster="./spacesuit.jpg"></model-viewer>
Bu kod şöyle işler:
Hareket ve etkileşim ekleme #
bu auto-rotate Ve camera-controls öznitelikler hareket ve kullanıcı kontrolü sağlar. Olası özellikler bunlar değil. için belgelere bakın özelliklerin tam listesi.
model-viewer src="assets/Astronaut.glb" auto-rotate camera-controls>
Poster görüntüleri ile gecikmeli yükleme #
Bazı 3D modeller çok büyük olabilir, bu nedenle kullanıcı modeli talep edene kadar onları yüklemeyi erteleyebilirsiniz. Bunun için bileşen, kullanıcı isteyene kadar yüklemeyi geciktiren yerleşik bir araca sahiptir. işte bu poster öznitelik yapar.
model-viewer src="assets/Astronaut.glb" controls auto-rotate
poster="./spacesuit.jpg">
Kullanıcılarınıza bunun yalnızca bir görüntü değil, bir 3B model olduğunu göstermek için, birden çok poster arasında geçiş yapmak üzere komut dosyası kullanarak önceden yüklenmiş bazı animasyonlar sağlayabilirsiniz.
model-viewer id="toggle-poster" src="assets/Astronaut.glb" controls
auto-rotate poster="assets/poster2.png"></model-viewer>
script>
const posters = ['poster.png', 'poster2.png'];
let i = 0;
setInterval(() =>
document.querySelector('#toggle-poster').setAttribute('poster',
`assets/${posters[i++ % 2]}`), 2000);
</script>
Duyarlı tasarım #
Bileşen, hem mobil hem de masaüstü için ölçeklenen bazı duyarlı tasarım türlerini işler. Ayrıca bir sayfada birden çok örneği yönetebilir ve Kavşak Gözlemcisi Bir model görünür olmadığında pil gücünden ve GPU döngülerinden tasarruf etmek için.
İleriye dönük #
Düzenlemek <model-viewer> ve bir dene proje ekibi istiyor <model-viewer> sizin için yararlı olmak istiyor ve geleceği hakkında katkılarınızı istiyor. Bu onların fikirleri olmadığı anlamına gelmez. Öyleyse bir deneyin ve ne düşündüğünüzü bize bildirin. GitHub’da bir sorun bildirme.