Update maxFov and fix mirror images in examples

README.md

@@ -54,12 +54,11 @@ document.body.appendChild(renderer.domElement);
 
 // Setup a mesh with the panorama image applied as a texture to a sphere.
 const sphere = new THREE.SphereGeometry(10, 60, 20);
+// Invert the geometry on the x-axis so that all of the faces point inward.
+sphere.scale(-1, 1, 1);
 const texture = new THREE.TextureLoader().load("./path/to/panorama/image.png");
 texture.colorSpace = THREE.SRGBColorSpace;
-const material = new THREE.MeshBasicMaterial({
-  side: THREE.BackSide,
-  map: texture,
-});
+const material = new THREE.MeshBasicMaterial({ map: texture });
 const mesh = new THREE.Mesh(sphere, material);
 scene.add(mesh);
 
@@ -90,7 +89,8 @@ const Scene = () => {
 
   return (
     // Setup a mesh with the panorama image applied as a texture to a sphere.
-    <mesh>
+    // And invert the mesh on the x-axis to avoid mirroring the image.
+    <mesh scale={[-1, 1, 1]}>
       <sphereGeometry args={[10, 60, 20]} />
       <meshBasicMaterial map={imageMap} side={BackSide} />
     </mesh>
@@ -126,7 +126,7 @@ const panoramaControls = new PanoramaControls(camera, renderer.domElement);
 panoramaControls.enabled = true;
 panoramaControls.zoomable = true;
 panoramaControls.minFov = 20;
-panoramaControls.maxFov = 80;
+panoramaControls.maxFov = 75;
 panoramaControls.zoomSpeed = 0.025;
 panoramaControls.panSpeed = 0.05;
 ```
@@ -139,7 +139,7 @@ Setting the options in React Three Fiber.
   enabled
   zoomable
   minFov={20}
-  maxFov={80}
+  maxFov={75}
   zoomSpeed={0.025}
   panSpeed={0.05}
 />

example/index.html

@@ -39,15 +39,16 @@
       renderer.setSize(window.innerWidth, window.innerHeight);
       document.body.appendChild(renderer.domElement);
 
+      // Setup a mesh with the panorama image applied as a texture to a sphere.
       const sphere = new THREE.SphereGeometry(10, 60, 20);
+      // Invert the geometry on the x-axis so that all of the faces
+      // point inward.
+      sphere.scale(-1, 1, 1);
       const texture = new THREE.TextureLoader().load(
         "./assets/sample-panorama.jpg"
       );
       texture.colorSpace = THREE.SRGBColorSpace;
-      const material = new THREE.MeshBasicMaterial({
-        side: THREE.BackSide,
-        map: texture,
-      });
+      const material = new THREE.MeshBasicMaterial({ map: texture });
       const mesh = new THREE.Mesh(sphere, material);
       scene.add(mesh);
 

lib/panorama-controls-react.tsx

@@ -40,7 +40,7 @@ export const PanoramaControls = forwardRef<
     enabled = true,
     zoomable = true,
     minFov = 10,
-    maxFov = 90,
+    maxFov = 80,
     zoomSpeed = 0.05,
     panSpeed = 0.1,
   } = options;

lib/panorama-controls.ts

@@ -11,7 +11,7 @@ export class PanoramaControls extends EventDispatcher<PanoramaEvents> {
   public zoomable = true;
 
   public minFov = 10;
-  public maxFov = 90;
+  public maxFov = 80;
   private defaultFov = 50;
 
   public zoomSpeed = 0.05;