Make an emoji fountain in a specific position

Questions
1

Hello, I’m learning three.js and I’m playing with an effect where, when a word is clicked, a splash of emoji would appear on the screen starting from the word clicked.
I’ve got my canva as desired and my emojis, but I can’t get the starting position of my emojis right. They always seem to be in the middle of the canva, no matter what value I give them in emojiMesh.position.set();

Ideally, I want to position the start at the center (y) of the clicked element and bottom to the canva for x.

If you want to try the code, you can do it here : https://codesandbox.io/s/nostalgic-feather-yvhvns?file=/src/index.mjs

2

Well thats because your canvas isn’t centered. Change your code with this code, if you set a color to your renderer using .setClearColor() you’ll notice that your canvas is way up from the center.

Just add this with the renderer:

  const bgColor = 0x263238;
  renderer.setClearColor(bgColor, 1);

You’ll notice that the canvas bg color will change making the canvas visible.

All you have to do is just center the canvas using .css. In other words you need the three magic words, I am not the .css guy but will let you know if I got it working

3

Yes this is because I want to start the “fountain” from the square (2) not the circle (1). For the other button I need it in the middle of the button too and so on.

Like so, I put my class and emoji param on any text or div and the fountain start always on his middle. Like my beautiful drawing haha ^^

2024-06-26_19-35
2024-06-26_19-35677×655 56.5 KB

4

Ahh I see didn’t know about that earlier lemme fix your code real quick!

1 Like
5

Some news, it seems that .position.set() work on the code sandbox and not in my real code :confused:

FYI the code is there : personal-website/script.js at 41628a21ed2aa148be4e21179a632e17fa949062 · bouteillerAlan/personal-website · GitHub

If I found why I tell you and close the conv ^^

EDIT : ok, I redo the code and everything work fine now, I don’t know why…

1 Like