&LTmodel-viewer> 1.1 ile tanışın

3D modeller her zamankinden daha alakalı. Perakendeciler, mağaza içi alışveriş deneyimlerini müşterilerin evlerine taşıyor. Müzeler, eserlerinin 3B modellerini web’de herkesin kullanımına sunuyor. Ne yazık ki, 3B teknolojiler hakkında derin bir bilgi sahibi olmadan veya üçüncü taraf bir sitede 3B içerik barındırmaya başvurmadan harika bir kullanıcı deneyimi sağlayacak şekilde bir web sitesine 3B model eklemek zor olabilir. bu &LTmodel-viewer> 2019’un başlarında tanıtılan web bileşeni, 3B modelleri web’e koymayı birkaç satır HTML yazmak kadar kolay hale getirmeyi amaçlıyor. O zamandan beri ekip, topluluktan gelen geri bildirimleri ve istekleri ele almak için çalışıyor. Bu çalışmanın doruk noktası, &LTmodel-viewer> sürüm 1.0, bu yılın başlarında yayınlandı. Şimdi piyasaya sürüldüğünü duyuruyoruz &LTmodel-viewer> 1.1. Yapabilirsiniz sürüm notlarını oku GitHub’da.

Geçen yıldan beri yeni olan ne var? #

Sürüm 1.1, web üzerinde artırılmış gerçeklik (AR) için yerleşik destek, hız ve aslına uygunluk iyileştirmeleri ve diğer sık ​​istenen özellikleri içerir.

Arttırılmış gerçeklik #

Bir 3B modeli boş bir tuval üzerinde görüntülemek harikadır, ancak onu kendi alanınızda görüntüleyebilmek daha da iyidir. Tamamen tarayıcı içinde 3B ve AR Chrome Android desteği için arttırılmış gerçeklik WebXR’yi kullanarak.

Hazır olduğunda, ekleyerek kullanabileceksiniz. ar öznitelik &LTmodel-viewer> etiket. Diğer özellikler, aşağıda gösterildiği gibi WebXR AR deneyimini özelleştirmenize olanak tanır. modelviewer.dev’deki WebXR örneği. Aşağıdaki kod örneği, bunun nasıl görünebileceğini gösterir.

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

Bu başlık altında gösterilen gömülü videoya benziyor.

Kamera kontrolleri #

&LTmodel-viewer> artık görüntünün sanal kamerası (izleyicinin perspektifi) üzerinde tam kontrol sağlıyor. Buna kamera hedefi, yörünge (modele göre konum) ve görüş alanı dahildir. Ayrıca otomatik döndürmeyi etkinleştirebilir ve kullanıcı etkileşimi için sınırlar (örn. maksimum ve minimum görüş alanları) belirleyebilirsiniz.

Açıklamalar #

Ayrıca HTML ve CSS kullanarak modellerinize açıklama ekleyebilirsiniz. Bu yetenek genellikle manipüle edildikçe modelle birlikte hareket edecek şekilde modelin parçalarına etiket “bağlamak” için kullanılır. Ek açıklamalar, görünümleri ve model tarafından ne ölçüde gizlendikleri de dahil olmak üzere özelleştirilebilir. Ek açıklamalar AR’de de çalışır.

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;
}
&LT/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&LT/div>
&LT/button>
&LT/model-viewer>

Bkz. ek açıklamalar dokümantasyon sayfası daha fazla bilgi için.

Editör #

Sürüm 1.1, bir &LTmodel-viewer> “düzenleme” aracımodelinizi hızlı bir şekilde önizlemenizi, farklı &LTmodel-viewer> yapılandırmalar (örn. pozlama ve gölge yumuşaklığı), bir poster görüntüsü oluşturun ve ek açıklamalar için etkileşimli olarak koordinatlar alın.

İşleme ve performans iyileştirmeleri #

Görüntü oluşturma doğruluğu, özellikle yüksek dinamik aralık (HDR) ortamları için büyük ölçüde iyileştirildi. &LTmodel-viewer> artık yalnızca bir tane olduğunda doğrudan işleme yolu da kullanıyor &LTmodel-viewer> öğe, performansı artıran (özellikle Firefox’ta) görünüm alanındadır. Son olarak, oluşturma çözünürlüğünü dinamik olarak ölçeklendirmek kare hızını önemli ölçüde iyileştirdi. Aşağıdaki örnek, bu son gelişmelerden bazılarını göstermektedir.

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

istikrar #

İle &LTmodel-viewer> ilk ana sürümüne ulaşan API kararlılığı bir önceliktir, bu nedenle sürüm 2.0 yayınlanana kadar kırılma değişikliklerinden kaçınılacaktır.

Sıradaki ne? #

&LTmodel-viewer> sürüm 1.0, en çok istenen yetenekleri içerir, ancak ekip henüz tamamlanmadı. Performans, kararlılık, dokümantasyon ve araçlardaki iyileştirmelerin yanı sıra daha fazla özellik eklenecektir. Önerileriniz varsa, bir dosya gönderin GitHub’da sorun; ayrıca PR’lara her zaman açığız. Takip ederek bağlantıda kalabilirsiniz &LTmodel-viewer> Twitter’dan ve kontrol etmek Spectrum’da topluluk sohbeti.