https://github.com/yomotsu/VolumetricFire

https://github.com/yomotsu/VolumetricFire

Last synced: 11 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/yomotsu/VolumetricFire
• Owner: yomotsu
• Created: 2015-04-19T23:53:22.000Z (over 9 years ago)
• Default Branch: gh-pages
• Last Pushed: 2016-07-09T08:41:46.000Z (over 8 years ago)
• Last Synced: 2024-10-27T11:28:05.960Z (20 days ago)
• Language: JavaScript
• Size: 2.19 MB
• Stars: 100
• Watchers: 8
• Forks: 13
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
VolumetricFire is a JS lib ported from [Alfred Fuller's Real-time Procedural Volumetric Fire Demo](http://webgl-fire.appspot.com/html/fire.html) to Mesh class for three.js.

![](examples/images/capture.gif)

VolumetricFire does not use particle system. Because maximum `pointSize` of particles is limited and uncontrollable. Therefore, VolumetricFire is not limited by maximum size.

You can use fire meshes of VolumetricFire provides with `position.set()`, `rotate.set()`, `scale.set()` and other THREE.Mesh features.

## Usage

Include both [three.js](https://github.com/mrdoob/three.js/) and VolumetricFire.js

```

```

Then, write JS code with three.js as usual. VolumetricFire class provides a fire mesh. you can add it to THREE.Scene instance.

```

// set path to texture images

// either relative or absolute path

VolumetricFire.texturePath = '../textures/';

var width = window.innerWidth;

var height = window.innerHeight;

var clock = new THREE.Clock();

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 60, width / height, .1, 1000 );

camera.position.set( 0, 0, 3 );

var renderer = new THREE.WebGLRenderer();

renderer.setSize( width, height );

document.body.appendChild( renderer.domElement );

var axisHelper = new THREE.AxisHelper( 5 );

scene.add( axisHelper );

var fireWidth  = 2;

var fireHeight = 4;

var fireDepth  = 2;

var sliceSpacing = 0.5;

var fire = new VolumetricFire(

  fireWidth,

  fireHeight,

  fireDepth,

  sliceSpacing,

  camera

);

scene.add( fire.mesh );

// you can set position, rotation and scale

// fire.mesh accepts THREE.mesh features

fire.mesh.position.set( 0, fireHeight / 2, 0 );

( function animate () {

  requestAnimationFrame( animate );

  var elapsed = clock.getElapsedTime();

  camera.position.set(

    Math.sin( elapsed * 0.1 ) * 8,

    Math.sin( elapsed * 0.5 ) * 10,

    Math.cos( elapsed * 0.1 ) * 8

  );

  camera.lookAt( scene.position );

  fire.update( elapsed );

  renderer.render( scene, camera );

} )();

```

- [example1: basic usage](http://yomotsu.github.io/VolumetricFire/examples/example1.html)

- [example2](http://yomotsu.github.io/VolumetricFire/examples/example2.html)