R3F and Rapier physics to build floating bubbles

Questions
, ,
1

hello I want to build like this bubbles using react three fiber and rapier but I am new to those libraries so please is my way to build like it correct and is there another professional way to build like this floating bubbles website crypto bubbles

Annotation 2024-04-15 181439
Annotation 2024-04-15 1814391920Ă—918 212 KB

2

You’re pretty much asking for someone to do all the work for you. Unless you’re happy to pay for that, you need to try doing it yourself and only ask questions when you get stuck.

Try breaking down the website into smaller bits and do them by yourself. If you get stuck, then you can create a codepen where other people can see and run your code, and ask a specific question about your problem.

Here, if you break it down:

  • can you draw a circle on the screen with THREE.js?
  • then can you add text inside the circle? What about a logo?
    -Then can you do this for any number of circles?
  • Then how do you animate the circles to look like on the website?
  • Then how do you get data from an API so you’re displaying up to date data?
1 Like
3

thank you so much I am sorry but I got three.js journey course to build like this website and now by giving me the breaking down for it I will try again
thank you so much for you

4

@Arthur solving other peoples problems honestly is invaluable practice.

5

what could work is to constrain a rigidbody’s movement to two dimensions (x and y, but not z). you can constrain the rotation as well, give it [false, false, false] and the text won’t rotate.

small example https://codesandbox.io/p/sandbox/text-spheres-zht4pz?file=%2Fsrc%2FApp.jsx

edit:

  • added a negative attractor
  • drag n drop
  • damping
  • floating
2 Likes
6

thank you so so much for helping me I make a lot of things also after finish the things I will create codepen to make you see my code and my work
thank you

7

but I still have problem in the negative attractor because I don’t know how to implement it yet

8

please I made this my code pen but I want to ask if my way to implement the gravity is good because I want to make the gravity position at the top right of the screen and I also added walls to make the bubbles don’t go out the canvas which take the full screen size so please is my way correct and good to continue the work I asking a lot because I really new to those libraries, thank you so much and the borders of the walls on my screen is good but on code pen they don’t occupy the whole screen

9

for walls all you need is add cuboidcolliders. you have to read through react-three/rapiers github frontpage at the minimum in order to use physics.

gravity shouldn’t have anything to do with size, you give it fixed values for the three axes: x, y, z.

10

okay thank you so so much I used the cuboidcolliders ,
for the gravity I want the circles to show prices and then they should sorted from the top right to bottom left of the screen to display the circles as sorted but the gravity will happen because I want to make the gravity on the top right and make different gravity scale on each circle or sphere

11

also now I will use the @nivo/circle-packing package to divide the screen on 100 circle with different size and I try to use this library only to get the radius of the generated circles inside the screen so it is right