1 <!

DOCTYPE html>
2 <hhttmmll llaanngg="en">
3 <hheeaadd>
4 <ttiittllee>three.js webgl - fire</ttiittllee>
5 <mmeettaa cchhaarrsseett="utf-8">
6 <mmeettaa nnaammee="viewport" ccoonntteenntt="width=device-width, user-
scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7 <lliinnkk ttyyppee="text/css" rreell="stylesheet" hhrreeff="main.css">
8 </hheeaadd>
9 <bbooddyy>
10
11 <ddiivv iidd="info">
12 <aa hhrreeff="https://threejs.org" ttaarrggeett="_blank"
rreell="noopener noreferrer">three.js</aa> fire and smoke demo
13 </ddiivv>
14
15 <ssccrriipptt ttyyppee="module">
16
17 import * as THREE from '../build/three.module.js';
18
19 import Stats from './jsm/libs/stats.module.js';
20 import { GUI } from './jsm/libs/dat.gui.module.js';
21
22 import { Fire } from './jsm/objects/Fire.js';
23
24 var camera, scene, renderer, stats;
25 var fire;
26
27 var params = {
28 color1: '#ffffff',
29 color2: '#ffa000',
30 color3: '#000000',
31 colorBias: 0.8,
32 burnRate: 0.35,
33 diffuse: 1.33,
34 viscosity: 0.25,
35 expansion: - 0.25,
36 swirl: 50.0,
37 drag: 0.35,
38 airSpeed: 12.0,
39 windX: 0.0,
40 windY: 0.75,
41 speed: 500.0,
42 massConservation: false
43 };
44
45 init();
46 animate();
47
48 function init() {
49
50 var width = window.innerWidth;
51 var height = window.innerHeight;
52
53 camera = new THREE.PerspectiveCamera( 70, width /
height, 1, 1000 );
54 camera.position.z = 25;
55
56 scene = new THREE.Scene();
57 scene.background = new THREE.Color( 0x000000 );
58
59 var ambientLight = new THREE.AmbientLight( 0xcccccc,
0.4 );
60 scene.add( ambientLight );
61
62 var pointLight = new THREE.PointLight( 0xffffff, 0.8
);
63 camera.add( pointLight );
64 scene.add( camera );
65
66 var plane = new THREE.PlaneBufferGeometry( 20, 20 );
67 fire = new Fire( plane, {
68 textureWidth: 512,
69 textureHeight: 512,
70 debug: false
71 } );
72 fire.position.z = - 2;
73 scene.add( fire );
74
75 renderer = new THREE.WebGLRenderer( { antialias:
true, alpha: true } );
76 renderer.setPixelRatio( window.devicePixelRatio );
77 renderer.setSize( window.innerWidth,
window.innerHeight );
78 renderer.autoClear = false;
79 document.body.appendChild( renderer.domElement );
80
81 function updateColor1( value ) {
82
83 fire.color1.set( value );
84
85 }
86
87 function updateColor2( value ) {
88
89 fire.color2.set( value );
90
91 }
92
93 function updateColor3( value ) {
94
95 fire.color3.set( value );
96
97 }
98
99 function updateColorBias( value ) {
100
101 fire.colorBias = value;
102
103 }
104
105 function updateBurnRate( value ) {
106
107 fire.burnRate = value;
108
109 }
110
111 function updateDiffuse( value ) {
112
113 fire.diffuse = value;
114
115 }
116
117 function updateViscosity( value ) {
118
119 fire.viscosity = value;
120
121 }
122
123 function updateExpansion( value ) {
124
125 fire.expansion = value;
126
127 }
128
129 function updateSwirl( value ) {
130
131 fire.swirl = value;
132
133 }
134
135 function updateDrag( value ) {
136
137 fire.drag = value;
138
139 }
140
141 function updateAirSpeed( value ) {
142
143 fire.airSpeed = value;
144
145 }
146
147 function updateWindX( value ) {
148
149 fire.windVector.x = value;
150
151 }
152
153 function updateWindY( value ) {
154
155 fire.windVector.y = value;
156
157 }
158
159 function updateSpeed( value ) {
160
161 fire.speed = value;
162
163 }
164
165 function updateMassConservation( value ) {
166
167 fire.massConservation = value;
168
169 }
170
171 params.Single = function () {
172
173 fire.clearSources();
174 fire.addSource( 0.5, 0.1, 0.1, 1.0, 0.0, 1.0 );
175
176 };
177
178 params.Multiple = function () {
179
180 fire.clearSources();
181 fire.addSource( 0.45, 0.1, 0.1, 0.5, 0.0, 1.0 );
182 fire.addSource( 0.55, 0.1, 0.1, 0.5, 0.0, 1.0 );
183
184 };
185
186 params.Text = function () {
187
188 var text = "Three JS";
189 var size = 180;
190 var color = "#FF0040";
191 var canvas = document.createElement( "canvas" );
192 canvas.width = 1024;
193 canvas.height = 1024;
194 var context = canvas.getContext( "2d" );
195 context.font = size + "pt Arial";
196
197 context.strokeStyle = "black";
198 context.strokeRect( 0, 0, canvas.width,
canvas.height );
199 context.textAlign = "center";
200 context.textBaseline = "middle";
201 context.lineWidth = 5;
202 context.strokeStyle = color;
203 context.fillStyle = "black";
204
205 context.strokeText( text, canvas.width / 2,
canvas.height * 0.75 );
206 var texture = new THREE.Texture( canvas );
207 texture.needsUpdate = true;
208
209 fire.setSourceMap( texture );
210
211 };
212
213 // dat.gui
214 var gui = new GUI();
215
216 gui.add( params, "Single" );
217 gui.add( params, "Multiple" );
218 gui.add( params, "Text" );
219
220 gui.addColor( params, 'color1' ).onChange(
updateColor1 );
221 gui.addColor( params, 'color2' ).onChange(
updateColor2 );
222 gui.addColor( params, 'color3' ).onChange(
updateColor3 );
223 gui.add( params, 'colorBias', 0.0, 1.0 ).onChange(
updateColorBias );
224 gui.add( params, 'burnRate', 0.0, 10.0 ).onChange(
updateBurnRate );
225 gui.add( params, 'diffuse', 0.0, 5.0 ).step( 0.01
).onChange( updateDiffuse );
226 gui.add( params, 'viscosity', 0.0, 5.0 ).step( 0.01
).onChange( updateViscosity );
227 gui.add( params, 'expansion', - 1.0, 1.0 ).step(
0.01 ).onChange( updateExpansion );
228 gui.add( params, 'swirl', 0.0, 50.0 ).step( 0.01
).onChange( updateSwirl );
229 gui.add( params, 'drag', 0.0, 1.0 ).onChange(
updateDrag );
230 gui.add( params, 'airSpeed', 0.0, 50.0 ).onChange(
updateAirSpeed );
231 gui.add( params, 'windX', - 5, 5 ).step( 0.01
).onChange( updateWindX );
232 gui.add( params, 'windY', - 5, 5 ).step( 0.01
).onChange( updateWindY );
233 gui.add( params, 'speed', 0, 1000 ).onChange(
updateSpeed );
234 gui.add( params, 'massConservation' ).onChange(
updateMassConservation );
235
236 function updateAll() {
237
238 updateColor1( params.color1 );
239 updateColor2( params.color2 );
240 updateColor3( params.color3 );
241 updateColorBias( params.colorBias );
242 updateBurnRate( params.burnRate );
243 updateDiffuse( params.diffuse );
244 updateViscosity( params.viscosity );
245 updateExpansion( params.expansion );
246 updateSwirl( params.swirl );
247 updateDrag( params.drag );
248 updateAirSpeed( params.airSpeed );
249 updateWindX( params.windX );
250 updateWindY( params.windY );
251 updateSpeed( params.speed );
252 updateMassConservation( params.massConservation
);
253
254 for ( var i in gui.__controllers ) {
255
256 gui.__controllers[ i ].updateDisplay();
257
258 }
259
260 }
261
262 params.Candle = function () {
263
264 params.color1 = 0xffffff;
265 params.color2 = 0xffa000;
266 params.color3 = 0x000000;
267 params.windX = 0.0;
268 params.windY = 0.5;
269 params.colorBias = 0.3;
270 params.burnRate = 1.6;
271 params.diffuse = 1.33;
272 params.viscosity = 1.33;
273 params.expansion = 0.0;
274 params.swirl = 0.0;
275 params.drag = 0.0;
276 params.airSpeed = 8.0;
277 params.speed = 500.0;
278 params.massConservation = false;
279
280 updateAll();
281
282 };
283 gui.add( params, 'Candle' );
284
285 params.Torch = function () {
286
287 params.color1 = 0xffdcaa;
288 params.color2 = 0xffa000;
289 params.color3 = 0x000000;
290 params.windX = 0.0;
291 params.windY = 0.75;
292 params.colorBias = 0.9;
293 params.burnRate = 1.0;
294 params.diffuse = 1.33;
295 params.viscosity = 0.25;
296 params.expansion = 0.0;
297 params.swirl = 50.0;
298 params.drag = 0.35;
299 params.airSpeed = 10.0;
300 params.speed = 500.0;
301 params.massConservation = false;
302
303 updateAll();
304
305 };
306 gui.add( params, 'Torch' );
307
308 params.Campfire = function () {
309
310 params.color1 = 0xffffff;
311 params.color2 = 0xffa000;
312 params.color3 = 0x000000;
313 params.windX = 0.0;
314 params.windY = 0.75;
315 params.colorBias = 0.8;
316 params.burnRate = 0.3;
317 params.diffuse = 1.33;
318 params.viscosity = 0.25;
319 params.expansion = - 0.25;
320 params.swirl = 50.0;
321 params.drag = 0.35;
322 params.airSpeed = 12.0;
323 params.speed = 500.0;
324 params.massConservation = false;
325
326 updateAll();
327
328 };
329 gui.add( params, 'Campfire' );
330
331 params.Fireball = function () {
332
333 params.color1 = 0xffffff;
334 params.color2 = 0xffa000;
335 params.color3 = 0x000000;
336 params.windX = 0.0;
337 params.windY = 0.75;
338 params.colorBias = 0.8;
339 params.burnRate = 1.2;
340 params.diffuse = 3.0;
341 params.viscosity = 0.0;
342 params.expansion = 0.0;
343 params.swirl = 6.0;
344 params.drag = 0.0;
345 params.airSpeed = 20.0;
346 params.speed = 500.0;
347 params.massConservation = false;
348
349 updateAll();
350
351 };
352 gui.add( params, 'Fireball' );
353
354 params.Iceball = function () {
355
356 params.color1 = 0x00bdf7;
357 params.color2 = 0x1b3fb6;
358 params.color3 = 0x001869;
359 params.windX = 0.0;
360 params.windY = - 0.25;
361 params.colorBias = 0.25;
362 params.burnRate = 2.6;
363 params.diffuse = 5.0;
364 params.viscosity = 0.5;
365 params.expansion = 0.75;
366 params.swirl = 30.0;
367 params.drag = 0.0;
368 params.airSpeed = 40.0;
369 params.speed = 500.0;
370 params.massConservation = false;
371
372 updateAll();
373
374 };
375 gui.add( params, 'Iceball' );
376
377 params.Smoke = function () {
378
379 params.color1 = 0xd2d2d2;
380 params.color2 = 0xd7d7d7;
381 params.color3 = 0x000000;
382 params.windX = - 0.05;
383 params.windY = 0.15;
384 params.colorBias = 0.95;
385 params.burnRate = 0.0;
386 params.diffuse = 1.5;
387 params.viscosity = 0.25;
388 params.expansion = 0.2;
389 params.swirl = 3.75;
390 params.drag = 0.4;
391 params.airSpeed = 18.0;
392 params.speed = 500.0;
393 params.massConservation = false;
394
395 updateAll();
396
397 };
398 gui.add( params, 'Smoke' );
399
400 params.Cigar = function () {
401
402 params.color1 = 0xc5c5c5;
403 params.color2 = 0x787878;
404 params.color3 = 0x000000;
405 params.windX = 0.0;
406 params.windY = 0.3;
407 params.colorBias = 0.55;
408 params.burnRate = 0.0;
409 params.diffuse = 1.3;
410 params.viscosity = 0.05;
411 params.expansion = - 0.05;
412 params.swirl = 3.7;
413 params.drag = 0.6;
414 params.airSpeed = 6.0;
415 params.speed = 500.0;
416 params.massConservation = false;
417
418 updateAll();
419
420 };
421 gui.add( params, 'Cigar' );
422
423 gui.open();
424
425 params.Campfire();
426 params.Single();
427
428 stats = new Stats();
429 document.body.appendChild( stats.dom );
430
431 window.addEventListener( 'resize', onWindowResize,
false );
432
433 if ( typeof TESTING !== 'undefined' ) { for( var i
= 0; i < 60; i ++ ) { renderer.render( scene, camera ); } };
434
435 }
436
437 function onWindowResize() {
438
439 var width = window.innerWidth;
440 var height = window.innerHeight;
441
442 camera.aspect = width / height;
443 camera.updateProjectionMatrix();
444
445 renderer.setSize( window.innerWidth,
window.innerHeight );
446
447 }
448
449 function animate() {
450
451 requestAnimationFrame( animate );
452
453 renderer.clear();
454 renderer.render( scene, camera );
455 stats.update();
456
457 }
458
459 </ssccrriipptt>
460
461 </bbooddyy>
462 </hhttmmll>
463