feat: ScreenSpace (#1131)

pmndrs · Nov 27, 2022 · 6b07f8e · 6b07f8e · vercel · Nov 27, 2022
1 parent 3618102
commit 6b07f8e
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 0 deletions.
diff --git a/.storybook/stories/ScreenSpace.stories.tsx 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) => (
+      <Setup controls={false} cameraPosition={new Vector3(0, 0, 10)}>
+        {storyFn()}
+      </Setup>
+    ),
+  ],
+}
+
+export const ScreenSpaceStory = ({ depth }) => (
+  <>
+    <Box args={[1, 1, 1]}>
+      <meshPhysicalMaterial />
+    </Box>
+    <ScreenSpace depth={depth}>
+      <Box args={[0.1, 0.1, 0.1]} position={[0.5, 0.1, 0]}>
+        <meshPhysicalMaterial color={'blue'} />
+        <Html center sprite>
+          <div style={{ color: 'hotpink' }}>Hi i'm in screen space</div>
+        </Html>
+      </Box>
+    </ScreenSpace>
+
+    <OrbitControls enablePan={true} zoomSpeed={0.5} />
+  </>
+)
+
+ScreenSpaceStory.args = {
+  depth: 1,
+}
diff --git a/README.md b/README.md
@@ -65,6 +65,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#text3d">Text3D</a></li>          
           <li><a href="#positionalaudio">PositionalAudio</a></li>
           <li><a href="#billboard">Billboard</a></li>
+          <li><a href="#screenspace">ScreenSpace</a></li>
           <li><a href="#effects">Effects</a></li>
           <li><a href="#gradienttexture">GradientTexture</a></li>
           <li><a href="#edges">Edges</a></li>
@@ -933,6 +934,20 @@ Adds a `<group />` that always faces the camera.
 </Billboard>
 ```
 
+#### ScreenSpace
+
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-screenspace--screen-space-story)
+
+Adds a `<group />` that aligns objects to screen space.
+
+```jsx
+<ScreenSpace
+  depth={1} // Distance from camera
+>
+  <Box>I'm in screen space</Box>
+</ScreenSpace>
+```
+
 #### GradientTexture
 
 <p>

diff --git a/src/core/ScreenSpace.tsx 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<Group, ScreenSpaceProps>(({ children, depth = -1, ...rest }, ref) => {
+  const localRef = React.useRef<Group>(null!)
+
+  useFrame(({ camera }) => {
+    localRef.current.quaternion.copy(camera.quaternion)
+    localRef.current.position.copy(camera.position)
+  })
+  return (
+    <group ref={mergeRefs([ref, localRef])} {...rest}>
+      <group position-z={-depth}>{children}</group>
+    </group>
+  )
+})
diff --git 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'