fix: enable positive Y positioning in ContactShadows (#1547)

closes issue #391

.storybook/stories/ContactShadows.stories.tsx

@@ -24,14 +24,14 @@ function ContactShadowScene({ colorized }: any) {
         <meshBasicMaterial color="#2A8AFF" />
       </Sphere>
       <ContactShadows
-        position={[0, 0, 0]}
+        position={[0, 0.01, 0]}
         scale={10}
         far={3}
         blur={3}
         rotation={[Math.PI / 2, 0, 0]}
         color={colorized ? '#2A8AFF' : 'black'}
       />
-      <Plane args={[10, 10]} position={[0, -0.01, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+      <Plane args={[10, 10]} position={[0, 0, 0]} rotation={[-Math.PI / 2, 0, 0]}>
         <meshBasicMaterial color="white" />
       </Plane>
     </>

src/core/ContactShadows.tsx

@@ -43,6 +43,9 @@ export const ContactShadows = React.forwardRef(
     const scene = useThree((state) => state.scene)
     const gl = useThree((state) => state.gl)
     const shadowCamera = React.useRef<THREE.OrthographicCamera>(null!)
+    const { position } = props
+    const shadowCameraZ =
+      typeof position === 'number' ? position : Array.isArray(position) ? position[1] : position?.y || 0
 
     width = width * (Array.isArray(scale) ? scale[0] : scale || 1)
     height = height * (Array.isArray(scale) ? scale[1] : scale || 1)
@@ -149,7 +152,11 @@ export const ContactShadows = React.forwardRef(
         <mesh renderOrder={renderOrder} geometry={planeGeometry} scale={[1, -1, 1]} rotation={[-Math.PI / 2, 0, 0]}>
           <meshBasicMaterial transparent map={renderTarget.texture} opacity={opacity} depthWrite={depthWrite} />
         </mesh>
-        <orthographicCamera ref={shadowCamera} args={[-width / 2, width / 2, height / 2, -height / 2, 0, far]} />
+        <orthographicCamera
+          ref={shadowCamera}
+          args={[-width / 2, width / 2, height / 2, -height / 2, 0, far]}
+          position-z={shadowCameraZ}
+        />
       </group>
     )
   }