Skip to content

Commit 103d69f

Browse files
abernierabernier
committed
Autofocus story
1 parent 6a20ac6 commit 103d69f

28 files changed

+273
-649
lines changed

‎.storybook/Setup.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as React from 'react'
2+
import { Vector3 } from 'three'
3+
import { Canvas, Props as CanvasProps } from '@react-three/fiber'
4+
5+
// import { OrbitControls } from '../src'
6+
7+
type Props = React.PropsWithChildren<
8+
CanvasProps & {
9+
cameraFov?: number
10+
cameraPosition?: Vector3
11+
controls?: boolean
12+
lights?: boolean
13+
}
14+
>
15+
16+
export const Setup = ({
17+
children,
18+
cameraFov = 75,
19+
cameraPosition = new Vector3(-5, 5, 5),
20+
controls = true,
21+
lights = true,
22+
...restProps
23+
}: Props) => (
24+
<div style={{ height: '100vh' }}>
25+
<Canvas shadows camera={{ position: cameraPosition, fov: cameraFov }} {...restProps}>
26+
{children}
27+
{lights && (
28+
<>
29+
<ambientLight intensity={0.8} />
30+
<pointLight intensity={1} position={[0, 6, 0]} />
31+
</>
32+
)}
33+
{/* {controls && <OrbitControls makeDefault />} */}
34+
</Canvas>
35+
</div>
36+
)

‎.storybook/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { StorybookConfig } from '@storybook/react-webpack5'
22
const config: StorybookConfig = {
3-
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
3+
stories: ['./stories/**/*.mdx', './stories/**/*.stories.@(js|jsx|ts|tsx)'],
44
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
55
framework: {
66
name: '@storybook/react-webpack5',

‎.storybook/preview.ts‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎.storybook/preview.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react'
2+
import type { Preview } from '@storybook/react'
3+
4+
const preview: Preview = {
5+
parameters: {
6+
// actions: { argTypesRegex: '^on[A-Z].*' },
7+
// controls: {
8+
// matchers: {
9+
// color: /(background|color)$/i,
10+
// date: /Date$/,
11+
// },
12+
// },
13+
layout: 'fullscreen',
14+
},
15+
decorators: [
16+
(Story) => (
17+
<React.Suspense fallback={null}>
18+
<Story />
19+
</React.Suspense>
20+
),
21+
],
22+
}
23+
24+
export default preview

‎.storybook/stories/Autofocus.stories.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react'
2+
import * as THREE from 'three'
3+
import type { Meta, StoryObj } from '@storybook/react'
4+
import { Setup } from '../Setup'
5+
6+
import { EffectComposer } from '../../src'
7+
8+
import { Autofocus } from '../../src'
9+
10+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
11+
const meta = {
12+
title: 'Effect/Autofocus',
13+
component: Autofocus,
14+
decorators: [(Story) => <Setup cameraPosition={new THREE.Vector3(1, 1, 2)}>{Story()}</Setup>],
15+
tags: ['autodocs'],
16+
// argTypes: {
17+
// debug: {
18+
// control: { type: 'range', min: 0, max: 1, step: 0.01 },
19+
// },
20+
// },
21+
} satisfies Meta<typeof Autofocus>
22+
23+
export default meta
24+
type Story = StoryObj<typeof meta>
25+
26+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
27+
export const Primary: Story = {
28+
render: (args) => (
29+
<>
30+
<mesh castShadow>
31+
<sphereGeometry args={[0.5, 64, 64]} />
32+
<meshStandardMaterial color="#9d4b4b" />
33+
</mesh>
34+
<mesh castShadow position={[1, 0, -5]}>
35+
<boxGeometry args={[1, 1, 1]} />
36+
<meshStandardMaterial color="#9d4b4b" />
37+
</mesh>
38+
39+
<gridHelper />
40+
41+
<EffectComposer>
42+
<Autofocus {...args} focusRange={0.001} bokehScale={18} />
43+
</EffectComposer>
44+
</>
45+
),
46+
args: {
47+
mouse: true,
48+
debug: 0.04,
49+
bokehScale: 8,
50+
},
51+
}

‎.storybook/stories/Introduction.mdx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import { Meta } from '@storybook/blocks'
2+
import Repo from './assets/repo.svg'
3+
4+
<Meta title="General/Introduction" />
5+
6+
<style>
7+
{`
8+
.subheading {
9+
--mediumdark: '#999999';
10+
font-weight: 700;
11+
font-size: 13px;
12+
color: #999;
13+
letter-spacing: 6px;
14+
line-height: 24px;
15+
text-transform: uppercase;
16+
margin-bottom: 12px;
17+
margin-top: 40px;
18+
}
19+
20+
.link-list {
21+
display: grid;
22+
grid-template-columns: 1fr;
23+
grid-template-rows: 1fr 1fr;
24+
row-gap: 10px;
25+
}
26+
27+
@media (min-width: 620px) {
28+
.link-list {
29+
row-gap: 20px;
30+
column-gap: 20px;
31+
grid-template-columns: 1fr 1fr;
32+
}
33+
}
34+
35+
@media all and (-ms-high-contrast:none) {
36+
.link-list {
37+
display: -ms-grid;
38+
-ms-grid-columns: 1fr 1fr;
39+
-ms-grid-rows: 1fr 1fr;
40+
}
41+
}
42+
43+
.link-item {
44+
display: block;
45+
padding: 20px;
46+
border: 1px solid #00000010;
47+
border-radius: 5px;
48+
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
49+
color: #333333;
50+
display: flex;
51+
align-items: flex-start;
52+
}
53+
54+
.link-item:hover {
55+
border-color: #1EA7FD50;
56+
transform: translate3d(0, -3px, 0);
57+
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
58+
}
59+
60+
.link-item:active {
61+
border-color: #1EA7FD;
62+
transform: translate3d(0, 0, 0);
63+
}
64+
65+
.link-item strong {
66+
font-weight: 700;
67+
display: block;
68+
margin-bottom: 2px;
69+
}
70+
71+
.link-item img {
72+
height: 40px;
73+
width: 40px;
74+
margin-right: 15px;
75+
flex: none;
76+
}
77+
78+
.link-item span,
79+
.link-item p {
80+
margin: 0;
81+
font-size: 14px;
82+
line-height: 20px;
83+
}
84+
85+
.tip {
86+
display: inline-block;
87+
border-radius: 1em;
88+
font-size: 11px;
89+
line-height: 12px;
90+
font-weight: 700;
91+
background: #E7FDD8;
92+
color: #66BF3C;
93+
padding: 4px 12px;
94+
margin-right: 10px;
95+
vertical-align: top;
96+
}
97+
98+
.tip-wrapper {
99+
font-size: 13px;
100+
line-height: 20px;
101+
margin-top: 40px;
102+
margin-bottom: 40px;
103+
}
104+
105+
.tip-wrapper code {
106+
font-size: 12px;
107+
display: inline-block;
108+
}
109+
`}
110+
</style>
111+
112+
# Welcome to `@react-three/postprocessing`
113+
114+
<img src={Repo} alt="repo" />

‎src/stories/assets/repo.svg‎ renamed to ‎.storybook/stories/assets/repo.svg‎

File renamed without changes.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,13 @@
5353
"three-stdlib": "^2.21.10"
5454
},
5555
"devDependencies": {
56+
"@babel/core": "^7.21.8",
57+
"@babel/plugin-transform-runtime": "^7.21.4",
5658
"@babel/preset-env": "^7.21.5",
5759
"@babel/preset-react": "^7.18.6",
5860
"@babel/preset-typescript": "^7.21.5",
5961
"@react-three/fiber": "^8.13.0",
62+
"@rollup/plugin-babel": "^6.0.3",
6063
"@rollup/plugin-commonjs": "^24.1.0",
6164
"@rollup/plugin-node-resolve": "^15.0.2",
6265
"@rollup/plugin-typescript": "^11.1.0",

‎rollup.config.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,41 @@
11
import path from 'path'
2+
import babel from '@rollup/plugin-babel'
23
import resolve from '@rollup/plugin-node-resolve'
34
import filesize from 'rollup-plugin-filesize'
4-
import typescript from '@rollup/plugin-typescript'
55

66
const root = process.platform === 'win32' ? path.resolve('/') : '/'
77
const external = (id) => !id.startsWith('.') && !id.startsWith(root)
88
const extensions = ['.js', '.jsx', '.ts', '.tsx']
99

10+
const getBabelOptions = () => ({
11+
babelrc: false,
12+
extensions,
13+
exclude: '**/node_modules/**',
14+
babelHelpers: 'runtime',
15+
presets: [
16+
[
17+
'@babel/preset-env',
18+
{
19+
targets: '> 1%, not dead, not ie 11, not op_mini all',
20+
},
21+
],
22+
'@babel/preset-react',
23+
'@babel/preset-typescript',
24+
],
25+
plugins: [['@babel/transform-runtime', { regenerator: false, useESModules: true }]],
26+
})
27+
1028
export default [
1129
{
1230
input: `./src/index.tsx`,
1331
output: { file: `dist/index.js`, format: 'esm' },
1432
external,
15-
plugins: [typescript(), resolve({ extensions }), filesize()],
33+
plugins: [babel(getBabelOptions()), resolve({ extensions }), filesize()],
1634
},
1735
{
1836
input: `./src/index.tsx`,
1937
output: { file: `dist/index.cjs`, format: 'cjs' },
2038
external,
21-
plugins: [typescript(), resolve({ extensions }), filesize()],
39+
plugins: [babel(getBabelOptions()), resolve({ extensions }), filesize()],
2240
},
2341
]

‎src/Autofocus.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { CopyPass, DepthPickingPass, DepthOfFieldEffect } from 'postprocessing'
1414
import { DepthOfField, EffectComposerContext } from './index'
1515
import { easing } from 'maath'
1616

17-
export type AutofocusProps = typeof DepthOfField & {
17+
export type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {
1818
target?: [number, number, number]
1919
mouse?: boolean
2020
debug?: number
@@ -72,7 +72,7 @@ export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
7272
async (delta: number, updateTarget = true) => {
7373
// Update hitpoint
7474
if (target) {
75-
hitpoint.set(...target)
75+
hitpoint.set(...(target as [number, number, number]))
7676
} else {
7777
const { x, y } = followMouse ? pointer : { x: 0, y: 0 }
7878
const hit = await getHit(x, y)

0 commit comments

Comments
 (0)