v0.8.0

New features

• 🆕 Soft shadows! Set softness of shadows with shadow-softness #513
  • ✋BREAKING CHANGE: Shadows are soft by default, use shadow-softness="0" to get the old default
• 🆕 Control camera extents with max-camera-orbit, min-camera-orbit, max-field-of-view, min-field-of-view #915
• 🆕 Use toBlob() to create screenshots asynchronously #861
  • Create poster images for seamless transitions with toBlob({ idealAspect: true }) #890
• 🆕 Support for DRACO-encoded glTF files #895
  • See this page in our docs for configuration options
• 🆕 Prevent models from resizing in AR with ar-scale="fixed" #918
  • Note: this currently only works for AR on Android devices

Bugfixes

• Shadows update in real-time when models are animated #513
• Our NPM package now publishes correct declarations for use in TypeScript projects #896
• The a11y properties of our built-in poster element have been improved #924

Other notable changes

• ✨ Landed another batch of incredible rendering improvements from @elalish #880
• A minimum viable debug mode has been introduced, see #856 for usage details
• ✋BREAKING CHANGE: The background-image attribute has been renamed to skybox-image #923
• ✋BREAKING CHANGE: We updated to Three.js r110 in #880
• ✋BREAKING CHANGE: Our target version of prismatic.js (for Magic Leap support) has been updated to 2.0 #926
• ✋BREAKING CHANGE: Our default poster background-size has changed from cover to contain #890
  • If you prefer the old default, it is recommended that you provide your own custom poster with HTML:

<style>
#custom-poster {
  width: 100%;
  height: 100%;
  background-image: url(./any-poster.png);
  background-position: center;
  background-size: cover;
}
</style>
<model-viewer src="any.gltf" alt="A 3D thing">
  <div id="custom-poster" slot="poster"></div>
</model-viewer>