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 Create ‹three-camera› OSC controller #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

• Create ‹three-view› element #9 Create ‹three-view› element

[olange]

Some sort of guarantee on custom element lifecycle order of events
WICG/webcomponents#737:

customElements.whenDefined()

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

or use Mutation Observer API.