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