Skip to content

Commit 5686d33

Browse files
committed
[Werewolf] Add static assets for visualizer
1 parent 960fde8 commit 5686d33

19 files changed

+713
-0
lines changed
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
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.
2+
3+
![](examples/images/capture.gif)
4+
5+
VolumetricFire does not use particle system. Because maximum `pointSize` of particles is limited and uncontrollable. Therefore, VolumetricFire is not limited by maximum size.
6+
7+
You can use fire meshes of VolumetricFire provides with `position.set()`, `rotate.set()`, `scale.set()` and other THREE.Mesh features.
8+
9+
## Usage
10+
11+
Include both [three.js](https://github.com/mrdoob/three.js/) and VolumetricFire.js
12+
```
13+
<script src="../lib/three.min.js"></script>
14+
<script src="../VolumetricFire.js"></script>
15+
```
16+
17+
Then, write JS code with three.js as usual. VolumetricFire class provides a fire mesh. you can add it to THREE.Scene instance.
18+
```
19+
<script>
20+
21+
// set path to texture images
22+
// either relative or absolute path
23+
VolumetricFire.texturePath = '../textures/';
24+
25+
var width = window.innerWidth;
26+
var height = window.innerHeight;
27+
var clock = new THREE.Clock();
28+
var scene = new THREE.Scene();
29+
var camera = new THREE.PerspectiveCamera( 60, width / height, .1, 1000 );
30+
camera.position.set( 0, 0, 3 );
31+
var renderer = new THREE.WebGLRenderer();
32+
renderer.setSize( width, height );
33+
document.body.appendChild( renderer.domElement );
34+
35+
36+
var axisHelper = new THREE.AxisHelper( 5 );
37+
scene.add( axisHelper );
38+
39+
40+
var fireWidth = 2;
41+
var fireHeight = 4;
42+
var fireDepth = 2;
43+
var sliceSpacing = 0.5;
44+
45+
var fire = new VolumetricFire(
46+
fireWidth,
47+
fireHeight,
48+
fireDepth,
49+
sliceSpacing,
50+
camera
51+
);
52+
scene.add( fire.mesh );
53+
// you can set position, rotation and scale
54+
// fire.mesh accepts THREE.mesh features
55+
fire.mesh.position.set( 0, fireHeight / 2, 0 );
56+
57+
58+
( function animate () {
59+
60+
requestAnimationFrame( animate );
61+
62+
var elapsed = clock.getElapsedTime();
63+
64+
camera.position.set(
65+
Math.sin( elapsed * 0.1 ) * 8,
66+
Math.sin( elapsed * 0.5 ) * 10,
67+
Math.cos( elapsed * 0.1 ) * 8
68+
);
69+
camera.lookAt( scene.position );
70+
71+
fire.update( elapsed );
72+
73+
renderer.render( scene, camera );
74+
75+
} )();
76+
77+
</script>
78+
```
79+
80+
- [example1: basic usage](http://yomotsu.github.io/VolumetricFire/examples/example1.html)
81+
- [example2](http://yomotsu.github.io/VolumetricFire/examples/example2.html)

0 commit comments

Comments
 (0)