1.0.2

⚠️ Breaking changes

• r102 is now the minimum supported version of Three.js

Updates

• Support for the width and height attributes — These take pixel values but can be overridden with any unit values using inline styles (style="width|height") or in CSS. <x-model> should now following the same behaviour as the <img> element when setting dimensions.
• Performance improvements — IntersectionObserver is used to ensure only models that are in visible in the viewport are queried and painted (saves lots of calls to getComputedStyle and parsing CSS transform strings into Matrix4).
• Move to shadow DOM — models now construct a hidden DOM bounding box, which is monitored by an IntersectionObserver. These elements, along with default styling are now applied in the Shadow DOM, rather than injected into the main page.
• Fix clipping issue — ThreeJS changed the scissor origin reference in r102, which inverted vertical clipping. This is now fixed.

Other

• Remove unused helpers
• Fixed lag in the 3D scene example
• Added debugging support through CSS custom properties:
  • --xModelBoundingBoxTransformStyle - sets transform-style of a bounding box element
  • --xModelBoundingBoxVisibility - sets the visibility of a bounding box element
• Updated the NPM build scripts
• Updated package.json to only include the minified dist file when npm installed as a dependency.

1.0.1

• #10: An <x-model> element or any of their ancestors with a CSS overflow value of scroll, hidden or auto will cause the 3D model to be clipped to the relevant element bounding box.
• #10: An <x-model> element will now honour the perspective/perspective-origin` of any ancestor elements, allowing multiple perspectives to be used in a single document.
• #12: Fixes issues with no lighting when a perspective hasn't been set on an ancestor element.
• Fixes issue with renderer not clearing when and object scrolls out of scroll bounds.
• Fixes intermittent black-box that's rendered when scene is empty.
• Fixes lighting position for container elements