feat: ScreenSpace #1131
feat: ScreenSpace #1131
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 34c99a3:
|
| 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> | ||
| ) | ||
| }) |
There was a problem hiding this comment.
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>There was a problem hiding this comment.
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);
|
would it make sense to extend billboard for this? also, |
The depth is actually -position.z in this case it’s distance from camera… |
|
in this case @antokhio @CodyJasonBennett good to merge? |
|
Hi, there was no particular decision in the end, because there are many other ways to achieve same functionality, currently it’s needs a decision feedback Sorry it’s prolly my bad since I promised to test them… In the end prolly merge is to early or merge and fix after. p.s. will run other options tests this week and let you know |
|
@drcmda @CodyJasonBennett just came across issues on stackoverflow where this tech would be applicable, (screen space stencil), I think should merge, improve after by request. |
|
🎉 This PR is included in version 9.45.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Why
New abstraction that removes camera position and rotation to children.
Gives ability to have 3d objects in the HUD of the camera.
What
Added /src/core/ScreenSpace.tsx
Added info to readme.md
Added to src/core/index.ts
Added .storybook/stories/ScreenSpace.stories.tsx
Checklist