Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: ScreenSpace #1131

Merged
merged 6 commits into from Nov 27, 2022
Merged

feat: ScreenSpace #1131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
38a80ed
feat: ScreenSpace abstraction added
antokhio Nov 2, 2022
c052138
feat: ScreenSpace abstraction added
antokhio Nov 2, 2022
97f647b
feat: ScreenSpace abstraction added
antokhio Nov 2, 2022
ff60dd4
feat: ScreenSpace abstraction added
antokhio Nov 2, 2022
4d4deb7
feat: ScreenSpace abstraction added
antokhio Nov 2, 2022
34c99a3
feat: ScreenSpace abstraction added
antokhio Nov 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 39 additions & 0 deletions .storybook/stories/ScreenSpace.stories.tsx
View file
Open in desktop
@@ -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,
}
15 changes: 15 additions & 0 deletions README.md
View file
Open in desktop
Expand Up @@ -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>
Expand Down Expand Up @@ -927,6 +928,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>
```
CodyJasonBennett marked this conversation as resolved.
Show resolved Hide resolved

#### GradientTexture

<p>
Expand Down
22 changes: 22 additions & 0 deletions src/core/ScreenSpace.tsx
View file
Open in desktop
@@ -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>
)
})
Comment on lines +10 to +22
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do note that these camera transforms are in local space, so this can break if the camera is parented in some way. Alternatively, you can portal children into the camera and keep a single group for depth:

import { createPortal, useThree } from '@react-three/fiber'

export const ScreenSpace = React.forwardRef<THREE.Group, ScreenSpaceProps>(function ScreenSpace(
  { children, depth = -1, ...rest },
  ref,
) {
  const camera = useThree((state) => state.camera)

  return (
    // Older versions of R3F require portals to be wrapped in fragments to correctly return a JSX.Element
    <>
      {createPortal(
        <group {...rest} ref={ref} position-z={-depth}>
          {children}
        </group>,
        camera,
      )}
    </>
  )

ofc, this would be equivalent to:

import { PerspectiveCamera } from '@react-three/drei'

<PerspectiveCamera makeDefault>
  <group position-z={...}>
    // ...
  </group>
</PerspectiveCamera>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, i need to test both options, but can do that next week prolly

The point of using:

localRef.current.quaternion.copy(camera.quaternion)
localRef.current.position.copy(camera.position)

Was that it supports the Html tag.
Also to take a note there is this approach witch is kind`a resonable:
https://discourse.threejs.org/t/how-to-build-a-hud-in-a-single-scene-with-a-single-camera/16108/2

camera.add(yourobject3d);

1 change: 1 addition & 0 deletions src/core/index.ts
View file
Open in desktop
@@ -1,5 +1,6 @@
// Abstractions
export * from './Billboard'
export * from './ScreenSpace'
export * from './QuadraticBezierLine'
export * from './CubicBezierLine'
export * from './CatmullRomLine'
Expand Down