1.1'e giriş

Web sayfanız için 3D modeller, HTML yazmak kadar kolay.

Joe Medley

Rob Kochman

3D modeller hiç olmadığı kadar alakalı hale geldi. Perakendeciler mağazada alışveriş yapar müşterilerin deneyimlerine evler. Müzeler eserlerinin 3D modellerini yapıyor web üzerindeki herkesin kullanımına açık olur. Maalesef 3D eklemek zor olabiliyor. ayrıntılı bir plan yapmadan güzel bir kullanıcı deneyimi sunacak şekilde tasarlamak veya üçüncü taraflar üzerinde 3D içerik barındırmaya başvurma konusunda bilgi sahibi olma girin. <model-viewer> web bileşeni, ilk zamanlarda kullanıma sunuldu 2019, 3D modelleri web'e yerleştirmeyi olabildiğince kolaylaştırmak birkaç satır HTML5 yazarak yazacağım. O zamandan bu yana ekip, ve topluluktan gelen talepleri belirlemenize yardımcı olur. Bu çalışmanın zirve noktası Bu yılın başlarında kullanıma sunulan <model-viewer> sürüm 1.0. Şimdi, <model-viewer> 1.1 sürümü kullanıma sunuldu. Sürümü okuyabilirsiniz notlarına bakın.

Geçen yıldan beri neler yapıldı?

Sürüm 1.1, web'de artırılmış gerçeklik (AR) için yerleşik destek içerir. hız ve kalite ile ilgili iyileştirmeler ve sık talep edilen diğer özellikler.

Artırılmış gerçeklik

Bir 3D modeli boş bir tuvalde görüntülemek harikadır, ancak modeli alan daha iyidir. Tamamen tarayıcının içinde bulunan 3D ve AR Chrome için Android, güçlendirilmiş gerçeklik kullanımı hakkında daha fazla bilgi edinin .

<model-viewer> AR özelliğinin tanıtımı.

Hazır olduğundaar <model-viewer> etiketi. Diğer özellikler, WebXR AR'yi özelleştirmenize olanak tanır. Bu örnek, webXR örneğinde gösterildiği gibi modelviewer.dev. Kod örneği aşağıda bunun nasıl görünebileceği gösterilmektedir.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

Video, bu başlığın altında gösterilen yerleştirilmiş videoya benzer.

Kamera kontrolleri

<model-viewer> artık görünümün sanal kamerası ( belirli bir perspektiften geçin. Buna kamera hedefini, yörüngeyi (konum ve görüş alanı belirler. Ayrıca otomatik döndürmeyi etkinleştirebilir ve Kullanıcı etkileşimi için sınırlar belirleyin (ör. maksimum ve minimum görüntüleme alanları).

Ek açıklamalar

Ayrıca, HTML ve CSS kullanarak modellerinize ek açıklama ekleyebilirsiniz. Bu yetenek genelde "eklemek" için kullanılır modelin parçalarına, modelle birlikte hareket edecek şekilde etiketler nasıl oluşturulduğunu göstereceğim. Ek açıklamalar, görünüşü ve bu öğeler ile ne derece bahsedeceğim. Artırılmış gerçeklikte (AR) de ek açıklamalar kullanılabilir.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

Üzerinde not bulunan bir uzay kıyafeti

Ek açıklamalar dokümanlarına bakın sayfasına göz atın.

Düzenleyici

Sürüm 1.1'de bir <model-viewer> "düzenleme" özelliği bulunuyor ve barındırılıyor aracını kullanabilirsiniz. modelinizi hızlıca önizleyin, farklı <model-viewer> yapılandırmalarını deneyin (ör. pozlama ve gölge yumuşaklığı), bir poster resmi oluşturun ve ek açıklamaların koordinatlarını alın.

Oluşturma ve performans iyileştirmeleri

Oluşturma kalitesi, özellikle yüksek dinamik aralık (HDR) için büyük ölçüde iyileştirildi ortam olarak da bilinir. <model-viewer>, yalnızca bir tanesinde doğrudan oluşturma yolu da kullanıyor <model-viewer> öğesi görüntü alanında olduğu için performans artıyor (özellikle Firefox'ta). Son olarak, oluşturma çözünürlüğünü dinamik olarak ölçeklendirme kare hızını önemli ölçüde artırdı. Aşağıdaki örnekte bu proje yönetimi metodolojilerinden en son gelişmeler.

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

İyi takılmış bir kaskın 3D modeli.

Kararlılık

<model-viewer> ilk ana sürümüne ulaştığında API kararlılığı artık çok daha Bu nedenle, 2.0 sürümü yayınlanana kadar zarar veren değişikliklerden kaçınılacak.

Sırada ne var?

<model-viewer> sürüm 1.0 en çok talep edilen özellikleri içeriyor, ancak ekibi henüz bitirmedi. Gelecekteki iyileştirmelerin yanı sıra daha fazla özellik eklenecek performans, istikrar, belgeleme ve araç kullanımı. Önerileriniz varsa GitHub'da bir sorun oluşturun; ayrıca, PR'ler her zaman kabul edilir. <model-viewer> adlı kullanıcıyı şurada takip ederek bağlantıda kalabilirsiniz: Twitter ve topluluk sohbetini kontrol edin Spectrum'da.