Inline 3D model controlled with CSS
Based on Mr.doob's model-tag demo
Notes:
- Element with the red outline is the <model-obj> element. This is the element developers work with. In an ideal world, CSS transforms wouldn't have any visual effect on this element. Instead, they would pass through to our web component, which would use the values to transform the 3D object. Unfortunately, this isn't the case.
- Element with the blue outline is the <canvas> element, which lives in the shadow DOM. Any CSS transforms applied to the host element are inverted and applied the canvas. This cancels out the visual effect of the transforms.
- The model looks out of alignment with the bounding box - this a because perspective-origin isn't implemented yet.
To-do:
- Hook up the camera to page perspective / perspective-origin