Create ‹three-app› basic container and view

[olange]

Features

• [ ] Import THREE.js and makes it available in Window global scope — actually, a non-desired feature, constrained by the CameraOrbiter (see #7); we really want let the browser handle the imports
• [ ] Handle resizing of its bounding box — propagating the change to the aspect ratio to the cameras and renderer (use Resize Observer API)
• [ ] Animate the scenes and cameras — synchronized in the same animation step, running at a desired FPS (if possible)
• [ ] When canvas not in view, pause rendering – but keep scene and camera animation updates running (may be throttle FPS), to save resources (use Intersection Observer API)
• [ ] Renders the current scene, at the same desired or actual FPS
• [ ] Handle lifecycle, with guarantees about elements initial state – move this to new separate issue
  • [ ] Review loading of Web Components Polyfills definition of components, have them deferred
  • [ ] Deferred mutual registration of ‹three-app/-scene/-camera› (use Mutation Observer API and/or customElements.whenDefined() and/or querySelectorAll(':not(:defined)'))
  • [ ] Trigger initialization of animation, once all elements are ready and know of each other

See also

• #9 Create ‹three-view› element

[olange]

Some sort of guarantee on custom element lifecycle order of events
https://github.com/w3c/webcomponents/issues/737:

customElements.whenDefined()

class ElementOne extends HTMLElement {
    async connectedCallback() {
        await customElements.whenDefined(ElementTwo.localName)
    }
}

or use Mutation Observer API.