"Enhance your gaming experience with Three JS special effects

I'm in the process of creating a multiplayer web game using Three JS. So far, I have successfully implemented the game logic on both client and server sides, mesh imports, animations, skill bars, health bars, and the ability for players to engage in combat. (Think of a game similar to an MMORPG)

However, one aspect that I am struggling with is what I refer to as "game effects" (such as projectiles, arrows, fireballs, explosions, auras, etc.): For example: https://www.youtube.com/watch?v=1C6JW1QRLsk

Therefore, I have two questions regarding this matter:

  • What is the correct terminology for these effects? Are they referred to as VFX, game effects, shaders? If I were using the Unreal Engine, would this be called a Particle System?

  • Is it possible to achieve these effects in Three.js? I don't necessarily need the code, but some guidance on how I could go about implementing them. I have tried using particle engines for Three.js, but have not achieved results similar to the example shown... I am beginning to wonder if this is even feasible.

(I apologize for any grammar mistakes, as English is not my native language)


EDIT:

It appears that I have not adequately demonstrated what I am looking for, so I will provide further explanation with two short gifs below

This gif features two spells with four distinct effects:

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

Additionally, this gif shows the casting animation of a bow skill, with various elements in motion. As a newcomer to 3D development, I am unsure of how to achieve this through coding...

I hope that these two examples clarify my initial question.

Answer №1

For a unique particle effects experience, explore the Three.js-based engine showcased on this website:

Answer №2

There is no such thing as "impossible", it all boils down to the amount of time and effort you are willing to invest. Finding a direct answer to your question may not be simple, as there are always multiple paths to achieving your goals. One suggestion is to start experimenting with shaders, as they offer a powerful tool for creating stunning effects, although mastering them can be a challenge.

If you're looking for inspiration and shader code samples, check out this website with plenty of wild creations:

Explore concepts like "explosion", "glow", "halo" to get started. Best of luck on your creative journey!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to access the Windows certificate store using JavaScript?

Is there a way to access the Windows certificate store using JavaScript? I'm looking to create a web application that can validate user logins by reading their certificates. ...

There was a mistake: _v.context.$implicit.toggle cannot be used as a function

Exploring a basic recursive Treeview feature in angular4 with the code provided below. However, encountering an error when trying to expand the child view using toggle(). Encountering this exception error: ERROR TypeError: _v.context.$implicit.toggle i ...

Adjusting and arranging multiple thumbnail images within a container of specific width and height

I need a user-friendly method to achieve the following. The thumbnails will not be cropped, but their container will maintain a consistent height and width. The goal is for larger images to scale down responsively within the container, while smaller image ...

Issue with displaying custom in-line buttons in JQGrid

Currently, I am utilizing jqgrid 3.8.2 (I am aware it's not the latest version, but I plan on updating it soon after seeking some advice :-)) I have successfully incorporated a couple of in-line buttons into my jqgrid using the default formatter &apo ...

Unlocking Global Opportunities with Stencil for Internationalization

Hi there, I've been attempting to implement Internationalization in my stencil project but unfortunately, it's not working as expected. I'm not sure what's causing the issue, and all I'm seeing is a 404 error. I followed these arti ...

Establish a predetermined selection for a radio button and its associated checkbox option

I am working on a React material UI group input field that is mapping a dataset. The result consists of one radio button and one checkbox performing the same action. Initially, I attempted to set the state to establish one data item as default. While I fol ...

Managing state with Apollo within a component

Greetings and thank you for taking the time to help me out. I am currently diving into the world of Apollo and React, but it seems like I am struggling with some logic here. On my main page index.js, I have initialized Apollo in the following way: export c ...

What is the best method for submitting information using AJAX and jQuery?

Here is the HTML code in question: <script src='https://code.jquery.com/jquery-1.12.4.min.js'></script> <p>1</p> <!-- this content gets loaded with <?php echo $item->id; ?> --> <a id='delBtn1' ...

Step-by-step guide on validating a user in Joomla using AJAX and jQuery

Is there a way to authenticate a user in Joomla through an AJAX call? I want to implement an error effect if the login is incorrect and redirect the user upon successful authentication. I am specifically interested in using JQuery's .ajax API for thi ...

Ways to resolve the issue of an invalid hexlify value error in ethers.js

Error: hexadecimal value is not valid (argument="value", value="PRIVATE_KEY", code=INVALID_ARGUMENT, version=bytes/5.7.0) During the development process of an application that transfers a token from one wallet to another using Ethers.j ...

React Table in Modal Using Custom Hook State

I'm facing some difficulties with the React useState hook. Currently, I have a modal that pops up after submitting a form. Before loading the modal, the application calls an API to fetch data, which is then displayed in a table within the modal. The ...

What could be the reason for data-id coming back as undefined?

I'm having trouble figuring out why the code below isn't working for me. The console is showing 'undefined' for data-id. href='#detailsModal' class='btn btn-info btn-xs' data-toggle='modal' data-id='x ...

Updating an HTML value based on the selected option using JavaScript

I'm working on a form that included a select element: <select class="form-control"> <option>10 pc</option><!--1 USD --> <option>20 pc</option><!--2 USD --> <option>50 pc</option><!--3 USD ...

Is there a way to stop the dropdown from automatically appearing in a DropDownList?

Seeking a solution to use a custom table as the dropdown portion for a DropDownList in my project. My goal is for users to see the custom table when they click on the DropDownList, rather than the default dropdown menu. I expected to be able to achieve th ...

What is the process for choosing a specific id from a JSON structure?

Is there a way to extract specific data from a JSON format within an Ionic project? What is the process for selecting the ID associated with particular data in a JSON format? And how can I retrieve and display the value linked to the selected product&apos ...

React-Image-Annotate encountered an issue: SyntaxError - The import statement cannot be used outside a module

Encountering an issue while trying to set up react-image-annotate. Here is the problem I am facing initially: https://i.stack.imgur.com/XgYPd.png This is how I have implemented it: import React from 'react' import ReactImageAnnotate from ' ...

"Here's a cool trick: A guide on dynamically inserting a value into {% url tag %} using JavaScript within

Incorporating leaflet JS into a Django template, the aim is to display markers on a map where latitude and longitude are sourced from a queryset. Sending the queryset through views and utilizing the Django template language within <script> tags seeme ...

Access information from AJAX request beyond the success function

Currently, I am utilizing beautiful soup to extract information from a webpage. A user inputs their zip code upon arriving at the main page of my site, triggering an AJAX request to Django for data retrieval based on the input. The corresponding JavaScript ...

The absence of the function crypto.createPrivateKey is causing issues in a next.js application

For my next.js application, I am utilizing the createPrivateKey function from the crypto module in node.js. However, I encountered an issue as discussed in this thread: TypeError: crypto.createPrivateKey is not a function. It seems that this function was a ...

Converting a date from PHP to JavaScript

My PHP code generates the following date: <?php date_default_timezone_set('Europe/London'); echo date('D M d Y H:i:s O'); ?> Additionally, I have a JavaScript/jQuery script that displays this date on the website: setInterval( ...