GroundedSkybox: Fix UVs being flipped (#27500)

* GroundedSkybox: Fix UVs being flipped

* fix deepscan issue

examples/jsm/objects/GroundedSkybox.js

@@ -1,4 +1,4 @@
-import { BackSide, Mesh, MeshBasicMaterial, SphereGeometry, Vector3 } from 'three';
+import { Mesh, MeshBasicMaterial, SphereGeometry, Vector3 } from 'three';
 
 /**
  * A ground-projected skybox. The height is how far the camera that took the photo was above the ground - 
@@ -18,6 +18,7 @@ class GroundedSkybox extends Mesh {
 		}
 
 		const geometry = new SphereGeometry( radius, 2 * resolution, resolution );
+		geometry.scale( 1, 1, -1 );
 
 		const pos = geometry.getAttribute( 'position' );
 		const tmp = new Vector3();
@@ -40,7 +41,7 @@ class GroundedSkybox extends Mesh {
 
 		pos.needsUpdate = true;
 
-		super( geometry, new MeshBasicMaterial( { map, side: BackSide } ) );
+		super( geometry, new MeshBasicMaterial( { map, depthWrite: false } ) );
 
 	}
 

examples/webgl_materials_envmaps_groundprojected.html

@@ -31,6 +31,7 @@
 		<script type="module">
 			import * as THREE from 'three';
 
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GroundedSkybox } from 'three/addons/objects/GroundedSkybox.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
@@ -39,7 +40,8 @@
 
 			const params = {
 				height: 15,
-				radius: 100
+				radius: 100,
+				enabled: true,
 			};
 
 			let camera, scene, renderer, skybox;
@@ -143,6 +145,27 @@
 				document.body.appendChild( renderer.domElement );
 				window.addEventListener( 'resize', onWindowResize );
 
+				const gui = new GUI();
+
+				gui.add( params, 'enabled' ).name( "Grounded" ).onChange( function ( value ) {
+
+					if ( value ) {
+
+						scene.add( skybox );
+						scene.background = null;
+
+					}
+					else {
+
+						scene.remove( skybox );
+						scene.background = scene.environment;
+
+					}
+
+					render();
+
+				} );
+				gui.open();
 			}
 
 			function onWindowResize() {