Fire and smoke exception

huxiao5579144 · October 7, 2020, 12:52pm

hellow guys, I made two different flames. When the latter one is not displayed, the first one is frozen. How to solve it? Thank you in advance.
threejs example: https://threejs.org/examples/?q=fire#webgl_fire ,
my example: https://codesandbox.io/s/condescending-pine-fmp0l?fontsize=14&hidenavigation=1&theme=dark

huxiao5579144 · October 8, 2020, 7:23am

Can anyone help me? I need to make a scene of multiple braziers. Thank you

huxiao5579144 · October 8, 2020, 7:31am

After testing, it was also found that by changing the properties of one of the flames, the other also changed synchronously, even though they were different objects

Mugen87 · October 8, 2020, 9:34am

THREE.Fire was implement by a one-time contributor. The class is not really maintained. This is the original PR: https://github.com/mrdoob/three.js/pull/15366

@mrdoob Since the original developer (https://github.com/mikepiecuch) of THREE.Fire seems to be not active at GitHub anymore, I suggest to remove the class. What do you think?

huxiao5579144 · October 8, 2020, 10:06am

@Mugen87 Thank you for your reply, manager. I’m going to ask him on GitHub if he would like to do another update. , because the flame in this example is really real.
In addition, are there any other examples of flame / smoke particle effects available in threejs

Mugen87 · October 8, 2020, 10:25am

There are so many of them e.g. https://codepen.io/daniel3toma/pen/dybjNbZ. Just google a bit for fire and smoke effects.

The biggest problem is that some of them use legacy three.js version so it is necessary to migrate to code to the latest release.

huxiao5579144 · October 8, 2020, 10:28am

mrdoob · October 9, 2020, 7:55am

Sounds good to me

trusktr · November 2, 2023, 7:52am

I brought back the Fire class in the following Lume demo:

github.com

lume/lume/blob/b917305c7c3696d57b29cdb8901d15da9fbc2c2a/examples/fire-2d.html

<script src="./template.js" template="./template.html" title="<lume-instanced-mesh>"></script>

<!-- This example shows how to use vanilla Three.js code in a Lume scene. -->

<lume-scene id="scene" webgl>
	<lume-camera-rig min-distance="90" max-distance="1000" initial-distance="200"></lume-camera-rig>

	<lume-element3d id="fireContainer" size="180 180" mount-point="0.5 0.5 0.5"></lume-element3d>
</lume-scene>

<style>
	html,
	body {
		background: #111;
		width: 100%;
		height: 100%;
		margin: 0;
		overflow: hidden;
	}

This file has been truncated. show original

Any of Lume’s examples/ can be viewed live using https://raw.githack.com. Here’s the fire demo:

https://rawcdn.githack.com/lume/lume/b917305c7c3696d57b29cdb8901d15da9fbc2c2a/examples/fire-2d.html

That’s on Three r158.

(docs.lume.io has more examples that are not from that examples/ folder)

Topic		Replies	Views
Help needed to convert an old script work with latest threejs Discussion textures , materials , geometry , shaders , animation	4	589	December 24, 2022
Creating 3D smoke particles in Three JS Questions textures , materials , geometry , shaders	5	7902	October 26, 2023
InstancedMesh won't show materials but using mesh does Questions materials , mesh , instanced-mesh , react-three-fiber , react-threedrei	2	340	March 19, 2024
Fire animation and glow Questions shaders	8	4565	September 10, 2023
When I set the property alpha of Three.js's WebGLRenderer to true, I can't see the object Questions materials	3	305	December 4, 2023

Fire and smoke exception

Related topics