diff --git a/.storybook/stories/ScreenSpace.stories.tsx b/.storybook/stories/ScreenSpace.stories.tsx new file mode 100644 index 000000000..e9d81e858 --- /dev/null +++ b/.storybook/stories/ScreenSpace.stories.tsx @@ -0,0 +1,39 @@ +import * as React from 'react' +import { Box, OrbitControls, Html, ScreenSpace } from '../../src' +import { Vector3 } from 'three' + +import { Setup } from '../Setup' + +export default { + title: 'Abstractions/ScreenSpace', + component: ScreenSpace, + decorators: [ + (storyFn) => ( + + {storyFn()} + + ), + ], +} + +export const ScreenSpaceStory = ({ depth }) => ( + <> + + + + + + + +
Hi i'm in screen space
+ + + + + + +) + +ScreenSpaceStory.args = { + depth: 1, +} diff --git a/README.md b/README.md index 584e15ee8..94f75df18 100644 --- a/README.md +++ b/README.md @@ -65,6 +65,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
  • Text3D
  • PositionalAudio
  • Billboard
    • +
  • ScreenSpace
  • Effects
  • GradientTexture
  • Edges
    • @@ -927,6 +928,20 @@ Adds a `` that always faces the camera. ``` +#### ScreenSpace + +[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-screenspace--screen-space-story) + +Adds a `` that aligns objects to screen space. + +```jsx + + I'm in screen space + +``` + #### GradientTexture

    diff --git a/src/core/ScreenSpace.tsx b/src/core/ScreenSpace.tsx new file mode 100644 index 000000000..7ea7dab5f --- /dev/null +++ b/src/core/ScreenSpace.tsx @@ -0,0 +1,22 @@ +import * as React from 'react' +import { Group } from 'three' +import mergeRefs from 'react-merge-refs' +import { useFrame } from '@react-three/fiber' + +export type ScreenSpaceProps = { + depth?: number +} & JSX.IntrinsicElements['group'] + +export const ScreenSpace = React.forwardRef(({ children, depth = -1, ...rest }, ref) => { + const localRef = React.useRef(null!) + + useFrame(({ camera }) => { + localRef.current.quaternion.copy(camera.quaternion) + localRef.current.position.copy(camera.position) + }) + return ( + + {children} + + ) +}) diff --git a/src/core/index.ts b/src/core/index.ts index e321f2914..9d23cfbb0 100644 --- a/src/core/index.ts +++ b/src/core/index.ts @@ -1,5 +1,6 @@ // Abstractions export * from './Billboard' +export * from './ScreenSpace' export * from './QuadraticBezierLine' export * from './CubicBezierLine' export * from './CatmullRomLine'