I'm currently creating a game using react-three-fiber and I want to implement a touch-point that has pop-up questions or text that will be answered by the player. Already done with the touchpoints but Im stuck creating a pop-up that corresponds to the touchpoints.
Asked
Active
Viewed 1,766 times
0
-
Try using React ```Modals``` – shayanmalinda Jul 29 '20 at 09:23
-
tried it but I couldnt find a way how to implement it to r3f. – clydekarnage Jul 29 '20 at 09:27
-
Do you look for those to be embedded in the scene? Must they be interactive or just readable? I would recommend THREE.CSS2DObject, that’s what I use for tooltips and labels. – jscastro Jul 29 '20 at 09:58
-
yes it must be embedded on the scene and must be interactive. do you have any examples if I may ask? Thanks a lot – clydekarnage Jul 29 '20 at 10:07
2 Answers
1
Only based on your description and comments (embedded and interactive), two options could fit into your needs.
First option would be using Annotations where the annotation content is basically pure HTML, but you would need to explore in a PoC the interactivity adding a button with an event.
Second option could be CSS2DObject, in this case the HTML must be built in runtime and sent to the CSS2DObject constructor through CSS2DRenderer. The only sample I have on hand is for mapbox, where I use them to create tooltips in altitude. It's normally used for labeling, not interactive, but as it receives HTML I'm quite sure there must be a way to make possible to create a button on it.
Here you have a full example of CSS2DRenderer and CSS2DObject
jscastro
- 3,422
- 1
- 9
- 27
-
Thank you for the answer. It helped me understand the renderers from three.js. Its a little bit complicated though. What I am really trying to implement is the same like this: https://codesandbox.io/s/thirsty-pasteur-m77l2vp00x?from-embed=&file=/index.js – clydekarnage Jul 29 '20 at 13:31
-
Your sample is using `Alert` class from react-bootstrap, which is definitely a great solution (and simpler, as you said) – jscastro Jul 29 '20 at 14:17
0
you can use html overlays in react-three-fiber declaratively: https://codesandbox.io/s/r3f-suspense-zu2wo you would normally use css2drenderer etc, but i would suggest you skip it and go directly for the <Html /> component in drei. inside it you can use any component lib for pop-ups or whatever you want.
hpalu
- 1,357
- 7
- 12