From 38a80ed7a566e4dc5671000b88ad6bf0c224d02e Mon Sep 17 00:00:00 2001 From: antokhio Date: Wed, 2 Nov 2022 12:42:43 +0300 Subject: [PATCH 1/6] feat: ScreenSpace abstraction added --- README.md | 17 +++++++++++++++++ src/core/ScreenSpace.tsx | 22 ++++++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 src/core/ScreenSpace.tsx diff --git a/README.md b/README.md index 584e15ee8..1c578080c 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
    • +
  • Billboard
  • Effects
  • GradientTexture
  • Edges
    • @@ -927,6 +928,22 @@ Adds a `` that always faces the camera. ``` +#### ScreenSpace + +

    + Demo +

    + +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..bb81002f6 --- /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' + +type ScreenSpaceProps = JSX.IntrinsicElements['group'] & { + depth?: number +} + +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} + + ) +}) From c052138f9f525804d0b9cac1ee9e2a7760486818 Mon Sep 17 00:00:00 2001 From: antokhio Date: Wed, 2 Nov 2022 12:47:10 +0300 Subject: [PATCH 2/6] feat: ScreenSpace abstraction added --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1c578080c..3e1c6bd46 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de

  • Text3D
  • PositionalAudio
  • Billboard
    • -
  • Billboard
    • +
  • ScreenSpace
  • Effects
  • GradientTexture
  • Edges
    • From 97f647bcec658292ef71e335b57643890f9b3ea4 Mon Sep 17 00:00:00 2001 From: antokhio Date: Wed, 2 Nov 2022 13:08:04 +0300 Subject: [PATCH 3/6] feat: ScreenSpace abstraction added --- .storybook/stories/ScreenSpace.stories.tsx | 39 ++++++++++++++++++++++ src/core/ScreenSpace.tsx | 4 +-- src/core/index.ts | 1 + 3 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 .storybook/stories/ScreenSpace.stories.tsx diff --git a/.storybook/stories/ScreenSpace.stories.tsx b/.storybook/stories/ScreenSpace.stories.tsx new file mode 100644 index 000000000..566f6a49c --- /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/src/core/ScreenSpace.tsx b/src/core/ScreenSpace.tsx index bb81002f6..a2dfc3428 100644 --- a/src/core/ScreenSpace.tsx +++ b/src/core/ScreenSpace.tsx @@ -3,9 +3,9 @@ import { Group } from 'three' import mergeRefs from 'react-merge-refs' import { useFrame } from '@react-three/fiber' -type ScreenSpaceProps = JSX.IntrinsicElements['group'] & { +export type ScreenSpaceProps = { depth?: number -} +} & JSX.IntrinsicElements['group'] export const ScreenSpace = React.forwardRef(({ children, depth = -1, ...rest }, ref) => { const localRef = React.useRef(null) 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' From ff60dd48261e87d02595cf07242222f8f9b60da5 Mon Sep 17 00:00:00 2001 From: antokhio Date: Wed, 2 Nov 2022 13:14:55 +0300 Subject: [PATCH 4/6] feat: ScreenSpace abstraction added --- .storybook/stories/ScreenSpace.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/stories/ScreenSpace.stories.tsx b/.storybook/stories/ScreenSpace.stories.tsx index 566f6a49c..e9d81e858 100644 --- a/.storybook/stories/ScreenSpace.stories.tsx +++ b/.storybook/stories/ScreenSpace.stories.tsx @@ -25,7 +25,7 @@ export const ScreenSpaceStory = ({ depth }) => ( -
    Hi i'm in screen space
    +
    Hi i'm in screen space
     From 4d4deb79680e56f719a57b1e4a10aabf4afccaf2 Mon Sep 17 00:00:00 2001 From: antokhio Date: Wed, 2 Nov 2022 13:20:58 +0300 Subject: [PATCH 5/6] feat: ScreenSpace abstraction added --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 3e1c6bd46..94f75df18 100644 --- a/README.md +++ b/README.md @@ -930,9 +930,7 @@ Adds a `` that always faces the camera. #### ScreenSpace -

    - Demo -

    +[![](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. From 34c99a3a671e71775f834b1d554eb04332c930dc Mon Sep 17 00:00:00 2001 From: antokhio Date: Wed, 2 Nov 2022 14:56:49 +0300 Subject: [PATCH 6/6] feat: ScreenSpace abstraction added --- src/core/ScreenSpace.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/core/ScreenSpace.tsx b/src/core/ScreenSpace.tsx index a2dfc3428..7ea7dab5f 100644 --- a/src/core/ScreenSpace.tsx +++ b/src/core/ScreenSpace.tsx @@ -8,11 +8,11 @@ export type ScreenSpaceProps = { } & JSX.IntrinsicElements['group'] export const ScreenSpace = React.forwardRef(({ children, depth = -1, ...rest }, ref) => { - const localRef = React.useRef(null) + const localRef = React.useRef(null!) useFrame(({ camera }) => { - localRef.current?.quaternion.copy(camera.quaternion) - localRef.current?.position.copy(camera.position) + localRef.current.quaternion.copy(camera.quaternion) + localRef.current.position.copy(camera.position) }) return (