Autofocus story

Author: abernier

.storybook/Setup.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { Vector3 } from 'three'
+import { Canvas, Props as CanvasProps } from '@react-three/fiber'
+
+// import { OrbitControls } from '../src'
+
+type Props = React.PropsWithChildren<
+  CanvasProps & {
+    cameraFov?: number
+    cameraPosition?: Vector3
+    controls?: boolean
+    lights?: boolean
+  }
+>
+
+export const Setup = ({
+  children,
+  cameraFov = 75,
+  cameraPosition = new Vector3(-5, 5, 5),
+  controls = true,
+  lights = true,
+  ...restProps
+}: Props) => (
+  <div style={{ height: '100vh' }}>
+    <Canvas shadows camera={{ position: cameraPosition, fov: cameraFov }} {...restProps}>
+      {children}
+      {lights && (
+        <>
+          <ambientLight intensity={0.8} />
+          <pointLight intensity={1} position={[0, 6, 0]} />
+        </>
+      )}
+      {/* {controls && <OrbitControls makeDefault />} */}
+    </Canvas>
+  </div>
+)

.storybook/preview.ts

@@ -0,0 +1,24 @@
+import React from 'react'
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    // actions: { argTypesRegex: '^on[A-Z].*' },
+    // controls: {
+    //   matchers: {
+    //     color: /(background|color)$/i,
+    //     date: /Date$/,
+    //   },
+    // },
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <React.Suspense fallback={null}>
+        <Story />
+      </React.Suspense>
+    ),
+  ],
+}
+
+export default preview

.storybook/preview.tsx

@@ -0,0 +1,50 @@
+import * as THREE from 'three'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Setup } from '../.storybook/Setup'
+
+import { EffectComposer } from './EffectComposer'
+
+import { Autofocus } from './Autofocus'
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: 'Effect/Autofocus',
+  component: Autofocus,
+  decorators: [(Story) => <Setup cameraPosition={new THREE.Vector3(1, 1, 2)}>{Story()}</Setup>],
+  tags: ['autodocs'],
+  // argTypes: {
+  //   debug: {
+  //     control: { type: 'range', min: 0, max: 1, step: 0.01 },
+  //   },
+  // },
+} satisfies Meta<typeof Autofocus>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  render: (args) => (
+    <>
+      <mesh castShadow>
+        <sphereGeometry args={[0.5, 64, 64]} />
+        <meshStandardMaterial color="#9d4b4b" />
+      </mesh>
+      <mesh castShadow position={[1, 0, -5]}>
+        <boxGeometry args={[1, 1, 1]} />
+        <meshStandardMaterial color="#9d4b4b" />
+      </mesh>
+
+      <gridHelper />
+
+      <EffectComposer>
+        <Autofocus {...args} focusRange={0.001} bokehScale={18} />
+      </EffectComposer>
+    </>
+  ),
+  args: {
+    mouse: true,
+    debug: 0.04,
+    bokehScale: 8,
+  },
+}

src/Autofocus.stories.tsx

@@ -14,7 +14,7 @@ import { CopyPass, DepthPickingPass, DepthOfFieldEffect } from 'postprocessing'
 import { DepthOfField, EffectComposerContext } from './index'
 import { easing } from 'maath'
 
-export type AutofocusProps = typeof DepthOfField & {
+export type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {
   target?: [number, number, number]
   mouse?: boolean
   debug?: number