Search code examples
javascriptthree.jsparticle-systemparticles

Three JS game effect

I'm developing a multiplayer web game using three JS. So far I have made the game logic (client and server side), mesh import, animations, skillbar, healthbar... The players can actually fight. (Think of an mmorpg style game)

One thing I'm missing and struggling to find any info about is what I call "game effect" (I'm talking about projectiles, arrows, fireball, explosions, aura...) : Like this : https://www.youtube.com/watch?v=1C6JW1QRLsk

So I have 2 questions about this :

  • What is this called exactly ? VFX ? Game effect ? Shader ? I think if I was using Unreal engine, this would be called Particle system right ?

  • Is there a way to do this in Three.js? I don't need a code answer but just some hint of how I could do it. I already tried some particles engine for Three.js but without results like this... And I start to think that this may be impossible

(I apologize if I make any grammar mistake, English isn't my native language)

EDIT:

It seems that I'm failing to show exactly what I want, so I add more explanation with two short gifs below

https://puu.sh/zjThg/fb36369e00.gif

There's 2 spells and 4 effects in this one.

  1. The casting animation with the two icy orbs spinning
  2. The spell effect adding ice blocks and mist to the target
  3. The second casting animation with a ring of water
  4. The second spell effect which spawn a water "cylinder" to the target

https://puu.sh/zjTJF/73c04f4672.gif

And here is the casting animation of a bow skill, you can see many things going on and I have absolutly no idea of how this can be made code-wise as I am new to 3D development...

I hope theses two exemples make my initial question more clear.

Solution

  • Nothing is "impossible", it just a matter of how much time and efforts you have between your hands ... there is no simple/direct answer to your question and there are always multiple ways to get things done. I think you should first start by playing with shaders, they provide a powerful way to create spectacular effect but are hard to master.

    You may want to take a look at this website to find inspiration and code sample on shaders, lots a crazy stuff up there: https://www.shadertoy.com

    Look for "explosion", "glow", "halo" ... good luck!