The absence of a flickering flame is noticeable in the THREE.js environment

I have been working on creating a flame using THREE.js and spark.js. However, even after rendering the world, I am unable to see the flame and it seems like the world is empty. Although I checked the console for errors, there are no indications of what might be going wrong. I have tried multiple approaches but haven't been able to pinpoint the exact error. Below is the code snippet:

threexSparks = new THREEx.Sparks({
                    maxParticles : 400,
                    counter : new SPARKS.SteadyCounter(300)
                });
                //threexSparks.position.x = 1000;
                // setup the emitter
                //var emitter   = threexSparks.emitter();

                var counter = new SPARKS.SteadyCounter(500);
                var emitter = new SPARKS.Emitter(counter);

                var initColorSize = function() {
                    this.initialize = function(emitter, particle) {
                        particle.target.color().setHSV(0.3, 0.9, 0.4);
                        particle.target.size(150);
                    };
                };

                emitter.addInitializer(new initColorSize());
                emitter.addInitializer(new SPARKS.Position(new SPARKS.PointZone(new THREE.Vector3(1000, 0, 0))));
                emitter.addInitializer(new SPARKS.Lifetime(0, 0.8));
                emitter.addInitializer(new SPARKS.Velocity(new SPARKS.PointZone(new THREE.Vector3(0, 250, 00))));

                emitter.addAction(new SPARKS.Age());
                emitter.addAction(new SPARKS.Move());
                emitter.addAction(new SPARKS.RandomDrift(1000, 0, 1000));
                emitter.addAction(new SPARKS.Accelerate(0, -200, 0));

Any help or suggestions would be greatly appreciated.

javascriptthree.jswebgl

Answer №1

I've encountered some strange issues with particles and WebGL rendering. While CanvasRender works well, WebGL seems to have some problems. One thing to note in your code is that you forgot to create Three.js objects for the particles. Sparks.js only provides an interface for particles, so you'll need to create the particles themselves.

Check out my example on jsfiddle where I used a modified version of the sparks.js library: http://jsfiddle.net/YeJ4X/35/

The main part of the code involves initializing the particle system using Three.js:

// Code snippet
var particleCount = 1800,
    particles = new THREE.Geometry(),
    pMaterial = new THREE.ParticleBasicMaterial({
        size: 10,
        map: texture,
        transparent: true
      });

var particleSystem = new THREE.ParticleSystem(particles, pMaterial);

for(var p = 0; p < particleCount; p++) {
    // Initialize particles here
}

SPARKS.VectorPool.__pools = particles.vertices;

I also created a new vector pool for sparks.js:

// Code snippet
SPARKS.VectorPool = {
    __pools: [],
    get: function() {
        // Get dirty vectors
    },
    release: function(v) {
        // Release vectors
    }
};

Make sure to pay attention to the number of particles used in sparks.js and those pre-created manually. If you're interested, you can find my fork of spark.js with fixes and enhancements here: https://github.com/elephanter/sparks.js

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

Configure webpack to source the JavaScript file locally instead of fetching it through HTTP

Using webpack.config.js to fetch remote js for Module Federation. plugins: [ new ModuleFederationPlugin({ remotes: { 'mfe1': "mfe1@http://xxxxxxxxxx.com/remoteEntry.js" } }) ], Is it possible to incorporate a local JS ...

javascriptreactjsnpmwebpackwebpack-module-federation

javascript assign array to object key

Looking at this basic array: const arr = [ { "id": 2, "color": "red" }, { "id": 1, "color": "blue" }, { "id": 2, "color": "yellow" ...

javascriptarraystypescripthashmap

What are some solutions for repairing unresponsive buttons on a webpage?

My task is to troubleshoot this webpage as the buttons are not functioning correctly. Here’s a snippet of the source code: <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div id="container" ...

javascripthtmlcssbarcode

Interactive sidebar scrolling feature linked with the main content area

I am working with a layout that uses flexboxes for structure. Both the fixed sidebar and main container have scroll functionality. However, I have encountered an issue where scrolling in the sidebar causes the scroll in the main container to activate whe ...

javascriptjquerycsshtml

Unable to fetch a new session from the selenium server due to an error

I'm currently in the process of setting up Nightwatch.js for the very first time. I am following the tutorial provided at this link: https://github.com/dwyl/learn-nightwatch Unfortunately, I have encountered a barrier and require assistance to resolv ...

javascriptseleniumwebdrivernightwatch.js

What is the best way to determine the value of a variable specific to my scenario?

Using the Angular framework, I am trying to determine if the data variable updates when a button is clicked. Here is an example: <button ng-click='change()'>{{data}}</button> I want to verify if the data changes or log the data var ...

javascriptangularjs

Analyze a designated section and display the top 3 frequently used words

Below is the code snippet provided: <body> <div id="headbox"> <p>Whatever...</p> </div> <div id="feed"> <div> <p>I hate cats</p> </div> <div> <p>I like ...

javascriptjquery

Are you delving into the realm of reduce functions in order to grasp the intric

Currently following this particular tutorial where they utilize the reduce method to transform an Array<Student> into a { [key: string]: Array<string | number> }. The tutorial includes this expression that caught my attention. It's quite n ...

javascriptnode.jsangulartypescript

Building React applications with server-side rendering using custom HTML structures

I recently started using Suspense in my React app and decided to implement SSR. However, as I was going through the documentation at https://reactjs.org/docs/react-dom-server.html#rendertopipeablestream, I couldn't find a clear explanation on how to u ...

javascriptnode.jsreactjsreact-18

Authenticating Users with Laravel and Vue.js

In my Vue.js application, I have implemented a login system. The main script in my main.js file includes the necessary imports and configurations: import Vue from 'vue'; import NProgress from 'nprogress'; import Resource from 'vue ...

javascriptphplaravelauthenticationvue.js

What is the best way to retrieve past data using RTK Query?

When working with data retrieval using a hook, my approach is as follows: const { data, isLoading } = useGetSomeDataQuery() The retrieved data is an array of items that each have their own unique id. To ensure the most up-to-date information, I implement ...

javascriptreactjsreact-reduxrtk-query

What steps should I take to fix the issue of "[ERR_REQUIRE_ESM]: Must use import to load ES Module" while working with D3.js version 7.0.0 and Next.js version 11.0.1?

Encountered a roadblock while integrating D3 with Next.js - facing an error when using D3.js v7.0.0 with Next.js v11.0.1: [ERR_REQUIRE_ESM]: Must use import to load ES Module Tried utilizing next-transpile-modules without success Managed to make D3.js ...

javascriptnode.jsd3.jsnext.jsnode-modules

Dynamically insert <td> elements into <tr> element using both jQuery and JavaScript

I am facing an issue with adding a new table data (td) element dynamically to the first table row (tr) in my JavaScript code. Here is the original table before adding the new td element: <table> <tbody> <tr> <t ...

javascripthtmljqueryangularjsjquery-ui

The error message "Uncaught ReferenceError: e is not defined" is popping up in my code when

As a beginner with React and Material-UI, I am encountering an error that I cannot seem to resolve. When I load a component using material-ui/data-grid, the data grid simply displays "An error occurred" in the app. However, when I load the component withou ...

javascriptreactjsmaterial-ui

Any recommendations for updating input in a directive without relying on $broadcast?

I am currently facing an issue with my contact list on controller A. Whenever I select a contact, the contact's information gets broadcasted to controller B and also to the datepicker directive in controller B. Although this method works, I am wonderi ...

javascriptangularjsangularjs-directive

Instructions on transferring an image to a server. The image is located on the client side within an <img> tag

Looking for an effective way to upload an image when the type is “file”? The goal here is to send an image from an image tag to the server without converting it into base64 due to size constraints. <form id="form-url"> <image src ...

javascriptjqueryajaxfile-upload

Ensure that the user remains within the current div when they click the submit button, even if the textbox is

For the past 48 hours, I've been grappling with an issue on my HTML page that features four divs. Each div contains three input fields and a button. The problem arises when a user leaves a text box empty upon submitting - instead of staying in the sam ...

javascriptjqueryhtmlcssajax

Using JavaScript within HTML documents

Need help with inserting JavaScript code from Google: <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1362706866260-0'); }); </script> into existing JavaScript / HTML code: va ...

javascriptjqueryhtmlwordpress

The child user interface component is failing to respond to keypress events within the parent component in an Angular project

I am facing a challenge in adding a keyboard shortcut to open a nested child UI Tab component through a keypress event. However, the Child nested tab can only be loaded after the Parent component is loaded first. Below is the structure of the UI tree: |-- ...

javascriptangularrxjsrxjs-observables

Exploring the function.caller in Node.js

Currently, I have a task that relies on function.caller to verify the authorization of a caller. After reviewing this webpage, it seems that caller is compatible with all major browsers and my unit tests are successful: https://developer.mozilla.org/en-U ...

javascriptnode.js