fix: stage model center

README.md

@@ -1077,6 +1077,7 @@ Creates a "stage" with proper studio lighting, content centered and planar, shad
   adjustCamera // Optional: zooms the content in
   intensity={1} // Optional: light intensity
   environment="warehouse" // Optional: environment
+  controls={controlsRef} // Optional: recalculates control target for correctness
 >
   <mesh />
 </Stage>

src/core/Stage.tsx

@@ -10,13 +10,23 @@ type Props = JSX.IntrinsicElements['group'] & {
   adjustCamera?: boolean
   environment?: string
   intensity?: number
+  controls?: React.MutableRefObject<{ update(): void; target: THREE.Vector3 }>
 }
 
-export function Stage({ children, contactShadow, shadows, adjustCamera, environment, intensity = 1, ...props }: Props) {
+export function Stage({
+  children,
+  controls,
+  contactShadow,
+  shadows,
+  adjustCamera,
+  environment,
+  intensity = 1,
+  ...props
+}: Props) {
   const camera = useThree((state) => state.camera)
   const outer = React.useRef<THREE.Group>(null!)
   const inner = React.useRef<THREE.Group>(null!)
-  const [radius, setRadius] = React.useState(0)
+  const [{ radius, width, height }, set] = React.useState({ radius: 0, width: 0, height: 0 })
 
   React.useLayoutEffect(() => {
     outer.current.position.set(0, 0, 0)
@@ -25,20 +35,26 @@ export function Stage({ children, contactShadow, shadows, adjustCamera, environm
     const center = new THREE.Vector3()
     const sphere = new THREE.Sphere()
     const height = box3.max.y - box3.min.y
+    const width = box3.max.x - box3.min.x
     box3.getCenter(center)
     box3.getBoundingSphere(sphere)
-    setRadius(sphere.radius)
+    set({ radius: sphere.radius, width, height })
     outer.current.position.set(-center.x, -center.y + height / 2, -center.z)
   }, [children])
 
   React.useLayoutEffect(() => {
     if (adjustCamera) {
+      const y = radius / (height > width ? 1.5 : 2.5)
       camera.position.set(0, radius * 1.5, radius * 2.5)
-      camera.near = 1
+      camera.near = 0.1
       camera.far = Math.max(5000, radius * 4)
-      camera.lookAt(0, 0, 0)
+      camera.lookAt(0, y, 0)
+      if (controls && controls.current) {
+        controls.current.target.set(0, y, 0)
+        controls.current.update()
+      }
     }
-  }, [radius, adjustCamera])
+  }, [radius, height, width, adjustCamera])
 
   return (
     <group {...props}>