fix grounded skybox rotation (#4752)

Author: elalish

packages/model-viewer/src/three-components/ModelScene.ts

@@ -616,6 +616,8 @@ export class ModelScene extends Scene {
       x = this.targetDamperX.update(x, goal.x, delta, normalization);
       y = this.targetDamperY.update(y, goal.y, delta, normalization);
       z = this.targetDamperZ.update(z, goal.z, delta, normalization);
+      this.groundedSkybox.position.x = -x;
+      this.groundedSkybox.position.z = -z;
       this.target.position.set(x, y, z);
       this.target.updateMatrixWorld();
       this.queueRender();
@@ -643,6 +645,7 @@ export class ModelScene extends Scene {
    */
   set yaw(radiansY: number) {
     this.rotation.y = radiansY;
+    this.groundedSkybox.rotation.y = -radiansY;
     this.queueRender();
   }
 

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

@@ -81,7 +81,7 @@ <h2 class="demo-title">Ground-projected Skybox</h2>
           </div>
           <example-snippet stamp-to="groundedSkybox" highlight-as="html">
             <template>
-<model-viewer camera-controls touch-action="pan-y" skybox-image="../../shared-assets/environments/whipple_creek_regional_park_1k_HDR.jpg" skybox-height="1.5m" shadow-intensity="2" max-camera-orbit="auto 90deg auto" alt="A 3D astronaut model depicted within a forest" src="../../shared-assets/models/Astronaut.glb"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" auto-rotate disable-pan skybox-image="../../shared-assets/environments/whipple_creek_regional_park_1k_HDR.jpg" skybox-height="1.5m" shadow-intensity="2" max-camera-orbit="auto 90deg auto" alt="A 3D astronaut model depicted within a forest" src="../../shared-assets/models/Astronaut.glb"></model-viewer>
             </template>
           </example-snippet>
         </div>