From 38a231e2929dd0adccb1c37484dcdd771d47abb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=94?= <drcmda@gmail.com>
Date: Mon, 21 Nov 2022 00:01:02 +0100
Subject: [PATCH] fix: stage offset should be centered

---
 README.md          | 4 ++--
 src/core/Stage.tsx | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 2bd46b2fc..35c5f8578 100644
--- a/README.md
+++ b/README.md
@@ -2639,7 +2639,7 @@ This component makes its contents float or hover.
   <a href="https://codesandbox.io/s/57iefg"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/57iefg/screenshot.png" alt="Demo"/></a>
 </p>
 
-Creates a "stage" with proper studio lighting, content centered and planar, model-shadows and ground-shadows. Make sure to set `makeDefault` on your controls when `adjustCamera` is true!
+Creates a "stage" with proper studio lighting, 0/0/0 top-centred, model-shadows, ground-shadows and optional zoom to fit. Make sure to set `makeDefault` on your controls when `adjustCamera` is true!
 
 ```tsx
 type StageShadows = Partial<AccumulativeShadowsProps> &
@@ -2658,7 +2658,7 @@ type StageProps = JSX.IntrinsicElements['group'] & {
   preset?: 'rembrandt' | 'portrait' | 'upfront' | 'soft'
   /** Controls the ground shadows, default: "contact" */
   shadows?: boolean | 'contact' | 'accumulative' | StageShadows
-  /** Optionally wraps and thereby centers the models using <Bounds>, can also be a margin, default: true */
+  /** Optional zoom-to-fit using <Bounds>, can also be a margin, default: true */
   adjustCamera?: boolean | number
   /** The default environment, default: "city" */
   environment?: PresetsType | null
diff --git a/src/core/Stage.tsx b/src/core/Stage.tsx
index a26f17930..7b8782466 100644
--- a/src/core/Stage.tsx
+++ b/src/core/Stage.tsx
@@ -92,6 +92,7 @@ export function Stage({
       <Bounds fit={!!adjustCamera} clip={!!adjustCamera} margin={Number(adjustCamera)} observe {...props}>
         <Refit radius={radius} adjustCamera={adjustCamera} />
         <Center
+          position={[0, shadowOffset / 2, 0]}
           onCentered={({ width, height, depth, boundingSphere, ...data }) =>
             set({ radius: boundingSphere.radius, width, height, depth })
           }
@@ -99,7 +100,7 @@ export function Stage({
           {children}
         </Center>
       </Bounds>
-      <group position={[0, -height / 2 - shadowOffset, 0]}>
+      <group position={[0, -height / 2 - shadowOffset / 2, 0]}>
         {contactShadow && (
           <ContactShadows scale={radius * 4} far={radius} blur={2} {...(shadowSpread as ContactShadowsProps)} />
         )}