Poster color (google#3701)

* remove poster-color

* fix threejs warning

packages/model-viewer/src/features/scene-graph.ts

@@ -209,7 +209,7 @@ export const SceneGraphMixin = <T extends Constructor<ModelViewerElementBase>>(
     /** @export */
     async exportScene(options?: SceneExportOptions): Promise<Blob> {
       const scene = this[$scene];
-      return new Promise<Blob>(async (resolve) => {
+      return new Promise<Blob>(async (resolve, reject) => {
         // Defaults
         const opts = {
           binary: true,
@@ -240,13 +240,19 @@ export const SceneGraphMixin = <T extends Constructor<ModelViewerElementBase>>(
                 .register(
                     (writer: any) =>
                         new GLTFExporterMaterialsVariantsExtension(writer));
-        exporter.parse(scene.modelContainer.children[0], (gltf: object) => {
-          return resolve(
-              new Blob([opts.binary ? gltf as Blob : JSON.stringify(gltf)], {
-                type: opts.binary ? 'application/octet-stream' :
-                                    'application/json'
-              }));
-        }, opts);
+        exporter.parse(
+            scene.modelContainer.children[0],
+            (gltf: object) => {
+              return resolve(new Blob(
+                  [opts.binary ? gltf as Blob : JSON.stringify(gltf)], {
+                    type: opts.binary ? 'application/octet-stream' :
+                                        'application/json'
+                  }));
+            },
+            () => {
+              return reject('glTF export failed');
+            },
+            opts);
 
         if (shadow != null) {
           shadow.visible = visible;

packages/model-viewer/src/template.ts

@@ -149,8 +149,7 @@ canvas.show {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
-  background-color: var(--poster-color, #fff);
-  background-image: var(--poster-image, none);
+  background-color: #fff0;
 }
 
 #default-progress-bar {

packages/modelviewer.dev/data/docs.json

@@ -30,7 +30,7 @@
       {
         "name": "poster",
         "htmlName": "poster",
-        "description": "Displays an image instead of the model, useful for showing the user something before a model is loaded and ready to render. If you use a <span class='attribute'>poster</span> with transparency, you may also want to set <span class='attribute'>--poster-color</span> to transparent so that the background shows through.",
+        "description": "Displays an image instead of the model, useful for showing the user something before a model is loaded and ready to render.",
         "links": [
           "<a href=\"../examples/loading\">Related examples</a>"
         ],
@@ -81,20 +81,6 @@
         }
       }
     ],
-    "CSS": [
-      {
-        "name": "--poster-color",
-        "htmlName": "posterColor",
-        "description": "Sets the <span class='attribute'>background-color</span> of the  <span class='attribute'>poster</span> . You may wish to set this to transparent if you are using a seamless  <span class='attribute'>poster</span> with transparency (so that the background color of  <span class='attribute'>&lt;model-viewer&gt;</span> shows through).",
-        "links": [
-          "<a href=\"../examples/loading\">Related examples</a>"
-        ],
-        "default": {
-          "default": "#fff",
-          "options": "valid css background-color"
-        }
-      }
-    ],
     "Properties": [
       {
         "name": "loaded",
@@ -269,7 +255,7 @@
       {
         "name": "poster",
         "htmlName": "poster",
-        "description": "By placing a child element under <span class=\"attribute\">&lt;model-viewer&gt;</span> with <span class=\"attribute\">slot=\"poster\"</span>, this element will replace the default poster, which is white or the value of <span class='attribute'>--poster-color</span>. This <span class='attribute'>poster</span> is shown until the model is loaded and revealed.",
+        "description": "By placing a child element under <span class=\"attribute\">&lt;model-viewer&gt;</span> with <span class=\"attribute\">slot=\"poster\"</span>, this element will replace the default poster, which is white. This <span class='attribute'>poster</span> is shown until the model is loaded and revealed.",
         "links": [
           "<a href=\"../examples/loading/#customizeLoad\"><span class='attribute'>poster</span> example</a>"
         ]

packages/modelviewer.dev/examples/annotations/index.html

@@ -106,7 +106,7 @@ <h4></h4>
     display: none;
   }
 </style>
-<model-viewer id="hotspot-demo" ar ar-modes="webxr" camera-controls src="../../shared-assets/models/Astronaut.glb" style="--poster-color:#ffffff00;" alt="A 3D model of an astronaut.">
+<model-viewer id="hotspot-demo" ar ar-modes="webxr" camera-controls src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut.">
   <button slot="hotspot-visor" data-position="0 1.75 0.35" data-normal="0 0 1"></button>
   <button slot="hotspot-hand" data-position="-0.54 0.93 0.1" data-normal="-0.73 0.05 0.69">
     <div id="annotation">This hotspot disappears completely</div>

packages/modelviewer.dev/examples/augmentedreality/index.html

@@ -142,7 +142,6 @@ <h4>Customize a WebXR Augmented Reality session with HTML, CSS, and JS in Chrome
   model-viewer {
     background-color: #eee;
     overflow-x: hidden;
-    --poster-color: #eee;
   }
 
   #ar-button {

packages/modelviewer.dev/examples/color.html

@@ -144,7 +144,6 @@ <h2>Achieving Color-Accurate Presentation with glTF</h2>
       <model-viewer
           src="../assets/ShopifyModels/GeoPlanter.glb"
           poster="../assets/ShopifyModels/GeoPlanter.webp"
-          style="--poster-color: transparent;"
           shadow-intensity="1"
           seamless-poster
           enable-pan

packages/modelviewer.dev/examples/lighthouse2.html

@@ -63,7 +63,6 @@
       height: 100vw;
       max-width: 600px;
       max-height: 600px;
-      --poster-color: #fff0;
     }
 
     /* This keeps child nodes hidden while the element loads, except the poster */

packages/modelviewer.dev/examples/loading/index.html

@@ -59,11 +59,6 @@ <h4></h4>
           <example-snippet stamp-to="displayPoster" highlight-as="html">
 
             <template>
-<style>
-  model-viewer#reveal {
-    --poster-color: transparent;
-  }
-</style>
 <model-viewer id="reveal" loading="eager" camera-controls auto-rotate poster="../../assets/poster-shishkebab.webp" src="../../shared-assets/models/shishkebab.glb" shadow-intensity="1" alt="A 3D model of a shishkebab"></model-viewer>
             </template>
           </example-snippet>

packages/modelviewer.dev/examples/twitter/player.html

@@ -46,7 +46,6 @@
       display: block;
       width: 100%;
       height: 100%;
-      --poster-color: #fff0;
     }
 
     model-viewer::part(default-progress-bar) {

packages/modelviewer.dev/examples/ux-pan.html

@@ -22,7 +22,7 @@ <h1>Product details</h1>
         shadow-intensity='1' 
         interaction-prompt='none'
         touch-action='none'
-        style='background-color: #F7F7F7; --poster-color: #fff0;'
+        style='background-color: #F7F7F7;'
         oncontextmenu="return false;">
     </model-viewer>
     <p>It's ideal for placement in a cozy living room seating group, a bedroom, rec room, or den. 

packages/modelviewer.dev/index.html

@@ -48,7 +48,6 @@
   <style>
     .demo model-viewer {
       background-color: #fff;
-      --poster-color: #fff0;
     }
   </style>
 </head>

packages/render-fidelity-tools/test/renderers/model-viewer/index.html

@@ -28,7 +28,6 @@
     body { margin: 0; }
     model-viewer { 
       --progress-bar-color: transparent;
-      --poster-color: rgba(255,255,255,0);
     }
   </style>
 </head>