Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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)