Model-viewer: Background color does not accept all valid CSS strings

[cwervo]

Tried with background: linear-gradient(#e66465, #9198e5);, radial-gradient(#e66465, #9198e5) & transparent

Suggested resolution

• For transparent load the underlying Three context with {alpha: true} add a console.warn() noting that setting the alpha of the underlying will potentially impact performance
• Either provide the same note as above & set the .container's background-color to the CSS string, or could possibly do some static mapping version of #66 since we're already in a 3D context?

[jsantell]

You totally called our bluff on 'all valid CSS strings', Andres :grimacing: we should update that in the docs to specify that it accepts the subset of <color> strings supported by THREE.Color#setStyle. Although it doesn't seem too outrageous to parse out gradients, I wonder if there's some combo of specifying a set of colors and generating something like #66 (for that blurry effect commonly used, e.g. #181)

[forresto]

How about transparent as a boolean attribute, then we could do gradients (or whatever) via css?

[forresto]

Are there any blockers to making a new transparent attribute on the custom element, that uses Three's {alpha: true}? I can try to make a PR if that sounds good.

[mrdoob]

@forresto a PR to test the idea out would be nice indeed 👌

[forresto]

(Moved to #268)