Animated wildfire: trouble 'tweening' texture

Hello Three.js world,

I am so excited to be working on my first project that involved disaster response. I am working on an interaction wherein, upon scroll, a rolling fire becomes “quantified” (ie, represented in a grid-like form)- and I have decided to use a grid image overlaid on the fire to achieve this. Originally, I tried to do an actual point cloud instead of faking it with a texture, but seeing as how I am a beginning, animating between a fire-like texture, and a grid - seems like the best solution.

So, to repeat that - I am trying to start off with a fire that is moving by itself, then the user scrolls, and as this happens, a tween is initiated that animated between the fire texture, and a grid-like texture.

Ideal start view, all fire

Ideal end view, all grid

Here is my current working link, which was based on the original dynamic terrain example that creates a terrain from a noise(d) normal map and a simple plane.

I am really stuck animating between textures with a TWEEN - I tried using MultiMaterialObject - and then tweening the respective opacities - but I understand that this feature may have been depreciated. Ultimately - my current mesh looks like this,

terrain = new THREE.Mesh( geometryTerrain, mlib[ 'terrain' ] );

…wherein the geometryTerrain is a simple PlaneBufferGeometry, and the mlib is a much more complicated series of seemingly custom shaders, that include two textures currently being referenced as diffuse layers:

   				var loadingManager = new THREE.LoadingManager( function () {
    					terrain.visible = true;
				} );
				var textureLoader = new THREE.TextureLoader( loadingManager );
				var specularMap = new THREE.WebGLRenderTarget( 2048, 2048, pars );
				specularMap.texture.generateMipmaps = false;

				var diffuseTexture1 = textureLoader.load( "textures/terrain/grasslight-big2.jpg" );
				var diffuseTexture2 = textureLoader.load( "textures/terrain/grasslight-big21.jpg" );

				var detailTexture = textureLoader.load( "textures/terrain/grasslight-big-nm.jpg" );

Any help here would be greatly appreciated - I have my LearningThreeJs Book on my iPad, buy I think it might be slightly outdated.

Thank you!!

One more note - as I mentioned this is my first time using this forum - I notice a lot of people use JFIDDLE here - let me know if there is a better way to share my code. Although it might be difficult since there are many pieces (modules) that are being used to run this animation.


You can still apply multiple materials on a mesh. You pass them as an array to your mesh like so:

var mesh = new THREE.Mesh( geometry, [ material1, material2 ] );

However, using multiple materials only works if the groups property of the respective geometry is properly configured.

In any event, applying different diffuse textures to a mesh and blend between both does not work since there is only a single diffuse texture slot per material.

The most easiest way might be to create two meshes with two materials (one with the fire textures, the other one with the grid-like texture) and then animate the opacity values of both meshes. This should also be very easy to setup with tween.js.

If you want to use a single mesh for some reasons, you have several options like:

  • extend a built-in material with custom shader code with Material.onBeforeCompile()
  • write a custom material from scratch
  • use NodeMaterial

Wow - Mugen. Thank you so much for providing this info. I truly appreciate the fast and thoughtful response here!

I like your idea of producing two different geometries and then animating between them with TWEEN. That seems like the most sensible solution, especially given my current level of expertise here. I am going to give this a try and then get back to this thread with the outcome.


1 Like
  • I notice a lot of people use JFIDDLE here - let me know if there is a better way to share my code.

Jsfiddle is fine, but it’s terrible on mobile. I’d recommend you use or instead.

1 Like