Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

GitCode（gitcode.net）2024年7月9日维护升级公告

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 5e3c5b3d 编写于 作者: M Mike Piecuch
浏览文件
操作

Run through code beautifier

上级 e7fdee0a
隐藏空白更改
内联 并排
Showing with 290 addition and 197 deletion
examples/files.js
浏览文件 @ 5e3c5b3d
......@@ -298,6 +298,7 @@ var files = {
"webgl_custom_attributes_points",
"webgl_custom_attributes_points2",
"webgl_custom_attributes_points3",
"webgl_fire",
"webgl_gpgpu_birds",
"webgl_gpgpu_water",
"webgl_gpgpu_protoplanet",
......
examples/js/Fire.js
浏览文件 @ 5e3c5b3d
......@@ -12,8 +12,6 @@ THREE.Fire = function ( geometry, options ) {
this.type = 'Fire';
var scope = this;
this.clock = new THREE.Clock();
options = options || {};
......@@ -23,91 +21,109 @@ THREE.Fire = function ( geometry, options ) {
var oneOverWidth = 1.0 / textureWidth;
var oneOverHeight = 1.0 / textureHeight;
var debug = (options.debug === undefined)? false : options.debug;
var debug = ( options.debug === undefined ) ? false : options.debug;
this.color1 = options.color1 || new THREE.Color( 0xffffff );
this.color2 = options.color2 || new THREE.Color( 0xffa000 );
this.color3 = options.color3 || new THREE.Color( 0x000000 );
this.colorBias = (options.colorBias === undefined)? 0.8 : options.colorBias;
this.diffuse = (options.diffuse === undefined)? 1.33 : options.diffuse;
this.viscosity = (options.viscosity === undefined)? 0.25 : options.viscosity;
this.expansion = (options.expansion === undefined)? -0.25 : options.expansion;
this.swirl = (options.swirl === undefined)? 50.0 : options.swirl;
this.burnRate = (options.burnRate === undefined)? 0.3 : options.burnRate;
this.drag = (options.drag === undefined)? 0.35 : options.drag;
this.airSpeed = (options.airSpeed === undefined)? 6.0 : options.airSpeed;
this.colorBias = ( options.colorBias === undefined ) ? 0.8 : options.colorBias;
this.diffuse = ( options.diffuse === undefined ) ? 1.33 : options.diffuse;
this.viscosity = ( options.viscosity === undefined ) ? 0.25 : options.viscosity;
this.expansion = ( options.expansion === undefined ) ? - 0.25 : options.expansion;
this.swirl = ( options.swirl === undefined ) ? 50.0 : options.swirl;
this.burnRate = ( options.burnRate === undefined ) ? 0.3 : options.burnRate;
this.drag = ( options.drag === undefined ) ? 0.35 : options.drag;
this.airSpeed = ( options.airSpeed === undefined ) ? 6.0 : options.airSpeed;
this.windVector = options.windVector || new THREE.Vector2( 0.0, 0.75 );
this.speed = (options.speed === undefined)? 500.0 : options.speed;
this.massConservation = (options.massConservation === undefined)? false : options.massConservation;
this.speed = ( options.speed === undefined ) ? 500.0 : options.speed;
this.massConservation = ( options.massConservation === undefined ) ? false : options.massConservation;
var size = textureWidth * textureHeight;
this.sourceData = new Uint8Array( 4 * size );
this.clearSources = function() {
this.clearSources = function () {
for ( var y = 0; y < textureHeight; y ++ ) {
for ( var y = 0; y < textureHeight; y++ ) {
for ( var x = 0; x < textureWidth; x++ ) {
for ( var x = 0; x < textureWidth; x ++ ) {
i = y * textureWidth + x;
var i = y * textureWidth + x;
var stride = i * 4;
this.sourceData[ stride ] = 0;
this.sourceData[ stride ] = 0;
this.sourceData[ stride + 1 ] = 0;
this.sourceData[ stride + 2 ] = 0;
this.sourceData[ stride + 3 ] = 0;
}
}
this.sourceMaterial.uniforms.sourceMap.value = this.internalSource;
this.sourceMaterial.needsUpdate = true;
return this.sourceData;
}
this.addSource = function(u, v, radius, density=null, windX=null, windY=null) {
};
this.addSource = function ( u, v, radius, density = null, windX = null, windY = null ) {
var startX = Math.max(Math.floor((u - radius) * textureWidth), 0);
var startY = Math.max(Math.floor((v - radius) * textureHeight), 0);
var endX = Math.min(Math.floor((u + radius) * textureWidth), textureWidth);
var endY = Math.min(Math.floor((v + radius) * textureHeight), textureHeight);
var startX = Math.max( Math.floor( ( u - radius ) * textureWidth ), 0 );
var startY = Math.max( Math.floor( ( v - radius ) * textureHeight ), 0 );
var endX = Math.min( Math.floor( ( u + radius ) * textureWidth ), textureWidth );
var endY = Math.min( Math.floor( ( v + radius ) * textureHeight ), textureHeight );
for (var y = startY; y < endY; y++) {
for (var x = startX; x < endX; x++) {
for ( var y = startY; y < endY; y ++ ) {
for ( var x = startX; x < endX; x ++ ) {
var diffX = x * oneOverWidth - u;
var diffY = y * oneOverHeight - v;
if (diffX * diffX + diffY * diffY < radius * radius) {
i = y * textureWidth + x;
if ( diffX * diffX + diffY * diffY < radius * radius ) {
var i = y * textureWidth + x;
var stride = i * 4;
if (density != null) {
this.sourceData[ stride ] = Math.min(Math.max(density, 0.0), 1.0) * 255;
if ( density != null ) {
this.sourceData[ stride ] = Math.min( Math.max( density, 0.0 ), 1.0 ) * 255;
}
if (windX != null) {
var wind = Math.min(Math.max(windX, -1.0), 1.0);
wind = (wind < 0.0)? Math.floor(wind * 127) + 255 : Math.floor(wind * 127);
if ( windX != null ) {
var wind = Math.min( Math.max( windX, - 1.0 ), 1.0 );
wind = ( wind < 0.0 ) ? Math.floor( wind * 127 ) + 255 : Math.floor( wind * 127 );
this.sourceData[ stride + 1 ] = wind;
}
if (windY != null) {
var wind = Math.min(Math.max(windY, -1.0), 1.0);
wind = (wind < 0.0)? Math.floor(wind * 127) + 255 : Math.floor(wind * 127);
if ( windY != null ) {
var wind = Math.min( Math.max( windY, - 1.0 ), 1.0 );
wind = ( wind < 0.0 ) ? Math.floor( wind * 127 ) + 255 : Math.floor( wind * 127 );
this.sourceData[ stride + 2 ] = wind;
}
}
}
}
this.internalSource.needsUpdate = true;
return this.sourceData;
}
};
// When setting source map, red channel is density. Green and blue channels
// encode x and y velocity respectively as signed chars:
// (0 -> 127 = 0.0 -> 1.0, 128 -> 255 = -1.0 -> 0.0 )
this.setSourceMap = function(texture) {
this.setSourceMap = function ( texture ) {
this.sourceMaterial.uniforms.sourceMap.value = texture;
}
};
var parameters = {
minFilter: THREE.NearestFilter,
......@@ -142,20 +158,21 @@ THREE.Fire = function ( geometry, options ) {
this.field0.texture.generateMipmaps = false;
this.field1.texture.generateMipmaps = false;
this.fieldProj.texture.generateMipmaps = false;
}
this.fieldScene = new THREE.Scene();
this.fieldScene.background = new THREE.Color( 0x000000 );
this.orthoCamera = new THREE.OrthographicCamera( textureWidth / -2,
this.orthoCamera = new THREE.OrthographicCamera( textureWidth / - 2,
textureWidth / 2,
textureHeight / 2,
textureHeight / -2,
textureHeight / - 2,
1, 2 );
this.orthoCamera.position.z = 1;
this.orthoCamera.position.z = 1;
this.fieldGeometry = new THREE.PlaneGeometry(textureWidth, textureHeight);
this.fieldGeometry = new THREE.PlaneGeometry( textureWidth, textureHeight );
this.internalSource = new THREE.DataTexture( this.sourceData,
textureWidth,
......@@ -175,7 +192,7 @@ THREE.Fire = function ( geometry, options ) {
this.clearSources();
this.sourceMesh = new THREE.Mesh( this.fieldGeometry, this.sourceMaterial );
this.fieldScene.add(this.sourceMesh);
this.fieldScene.add( this.sourceMesh );
// Diffuse Shader
......@@ -191,7 +208,7 @@ THREE.Fire = function ( geometry, options ) {
this.diffuseMaterial.uniforms.oneOverHeight.value = oneOverHeight;
this.diffuseMesh = new THREE.Mesh( this.fieldGeometry, this.diffuseMaterial );
this.fieldScene.add(this.diffuseMesh);
this.fieldScene.add( this.diffuseMesh );
// Drift Shader
......@@ -207,7 +224,7 @@ THREE.Fire = function ( geometry, options ) {
this.driftMaterial.uniforms.oneOverHeight.value = oneOverHeight;
this.driftMesh = new THREE.Mesh( this.fieldGeometry, this.driftMaterial );
this.fieldScene.add(this.driftMesh);
this.fieldScene.add( this.driftMesh );
// Projection Shader 1
......@@ -219,11 +236,11 @@ THREE.Fire = function ( geometry, options ) {
transparent: false
} );
this.projMaterial1.uniforms.oneOverWidth.value = oneOverWidth ;
this.projMaterial1.uniforms.oneOverWidth.value = oneOverWidth;
this.projMaterial1.uniforms.oneOverHeight.value = oneOverHeight;
this.projMesh1 = new THREE.Mesh( this.fieldGeometry, this.projMaterial1 );
this.fieldScene.add(this.projMesh1);
this.fieldScene.add( this.projMesh1 );
// Projection Shader 2
......@@ -236,11 +253,11 @@ THREE.Fire = function ( geometry, options ) {
} );
this.projMaterial2.uniforms.oneOverWidth.value = oneOverWidth ;
this.projMaterial2.uniforms.oneOverWidth.value = oneOverWidth;
this.projMaterial2.uniforms.oneOverHeight.value = oneOverHeight;
this.projMesh2 = new THREE.Mesh( this.fieldGeometry, this.projMaterial2 );
this.fieldScene.add(this.projMesh2);
this.fieldScene.add( this.projMesh2 );
// Projection Shader 3
......@@ -253,18 +270,22 @@ THREE.Fire = function ( geometry, options ) {
} );
this.projMaterial3.uniforms.oneOverWidth.value = oneOverWidth ;
this.projMaterial3.uniforms.oneOverWidth.value = oneOverWidth;
this.projMaterial3.uniforms.oneOverHeight.value = oneOverHeight;
this.projMesh3 = new THREE.Mesh( this.fieldGeometry, this.projMaterial3 );
this.fieldScene.add(this.projMesh3);
this.fieldScene.add( this.projMesh3 );
// Color Shader
if (debug) {
if ( debug ) {
shader = THREE.Fire.DebugShader;
} else {
shader = THREE.Fire.ColorShader;
}
this.material = new THREE.ShaderMaterial( {
uniforms: shader.uniforms,
......@@ -275,12 +296,13 @@ THREE.Fire = function ( geometry, options ) {
this.material.uniforms.densityMap.value = this.field1.texture;
this.configShaders = function(dt) {
this.configShaders = function ( dt ) {
this.diffuseMaterial.uniforms.diffuse.value = dt * 0.05 * this.diffuse;
this.diffuseMaterial.uniforms.viscosity.value = dt * 0.05 * this.viscosity;
this.diffuseMaterial.uniforms.expansion.value = Math.exp(this.expansion * -1.0 );
this.diffuseMaterial.uniforms.swirl.value = Math.exp(this.swirl * -0.1 );
this.diffuseMaterial.uniforms.drag.value = Math.exp(this.drag * -0.1);
this.diffuseMaterial.uniforms.expansion.value = Math.exp( this.expansion * - 1.0 );
this.diffuseMaterial.uniforms.swirl.value = Math.exp( this.swirl * - 0.1 );
this.diffuseMaterial.uniforms.drag.value = Math.exp( this.drag * - 0.1 );
this.diffuseMaterial.uniforms.burnRate.value = this.burnRate * dt * 0.01;
this.driftMaterial.uniforms.windVector.value = this.windVector;
this.driftMaterial.uniforms.airSpeed.value = dt * this.airSpeed * 0.001 * textureHeight;
......@@ -288,78 +310,89 @@ THREE.Fire = function ( geometry, options ) {
this.material.uniforms.color2.value = this.color2;
this.material.uniforms.color3.value = this.color3;
this.material.uniforms.colorBias.value = this.colorBias;
}
this.clearDiffuse = function() {
};
this.clearDiffuse = function () {
this.diffuseMaterial.uniforms.expansion.value = 1.0;
this.diffuseMaterial.uniforms.swirl.value = 1.0;
this.diffuseMaterial.uniforms.drag.value = 1.0;
this.diffuseMaterial.uniforms.burnRate.value = 0.0;
}
this.swapTextures = function() {
var swap = this.field0;
this.field0 = this.field1;
this.field1 = swap;
}
};
this.swapTextures = function () {
var swap = this.field0;
this.field0 = this.field1;
this.field1 = swap;
};
this.saveRenderState = function ( renderer ) {
this.saveRenderState = function(renderer) {
this.savedRenderTarget = renderer.getRenderTarget();
this.savedVrEnabled = renderer.vr.enabled;
this.savedShadowAutoUpdate = renderer.shadowMap.autoUpdate;
this.savedAntialias = renderer.antialias;
this.savedToneMapping = renderer.toneMapping;
}
};
this.restoreRenderState = function ( renderer ) {
this.restoreRenderState = function(renderer) {
renderer.vr.enabled = this.savedVrEnabled;
renderer.shadowMap.autoUpdate = this.savedShadowAutoUpdate;
renderer.setRenderTarget(this.savedRenderTarget);
renderer.setRenderTarget( this.savedRenderTarget );
renderer.antialias = this.savedAntialias;
renderer.toneMapping = this.savedToneMapping;
}
this.renderSource = function(renderer) {
};
this.renderSource = function ( renderer ) {
this.sourceMesh.visible = true;
this.sourceMaterial.uniforms.densityMap.value = this.field0.texture;
renderer.render( this.fieldScene, this.orthoCamera, this.field1);
renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
this.sourceMesh.visible = false;
this.swapTextures();
}
this.swapTextures();
this.renderDiffuse = function(renderer) {
};
this.renderDiffuse = function ( renderer ) {
this.diffuseMesh.visible = true;
this.diffuseMaterial.uniforms.densityMap.value = this.field0.texture;
renderer.render( this.fieldScene, this.orthoCamera, this.field1);
renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
this.diffuseMesh.visible = false;
this.swapTextures();
}
this.swapTextures();
this.renderDrift = function(renderer) {
};
this.renderDrift = function ( renderer ) {
this.driftMesh.visible = true;
this.driftMaterial.uniforms.densityMap.value = this.field0.texture;
renderer.render( this.fieldScene, this.orthoCamera, this.field1);
renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
this.driftMesh.visible = false;
this.swapTextures();
}
this.swapTextures();
this.renderProject = function(renderer) {
};
this.renderProject = function ( renderer ) {
// Projection pass 1
......@@ -367,7 +400,7 @@ THREE.Fire = function ( geometry, options ) {
this.projMaterial1.uniforms.densityMap.value = this.field0.texture;
renderer.render( this.fieldScene, this.orthoCamera, this.fieldProj);
renderer.render( this.fieldScene, this.orthoCamera, this.fieldProj );
this.projMesh1.visible = false;
......@@ -377,9 +410,9 @@ THREE.Fire = function ( geometry, options ) {
this.projMesh2.visible = true;
for (var i = 0; i < 20; i++) {
for ( var i = 0; i < 20; i ++ ) {
renderer.render( this.fieldScene, this.orthoCamera, this.field1);
renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
var temp = this.field1;
this.field1 = this.fieldProj;
......@@ -398,24 +431,27 @@ THREE.Fire = function ( geometry, options ) {
this.projMesh3.visible = true;
renderer.render( this.fieldScene, this.orthoCamera, this.field1);
renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
this.projMesh3.visible = false;
this.swapTextures();
}
this.swapTextures();
};
this.onBeforeRender = function ( renderer, scene, camera ) {
var delta = this.clock.getDelta();
if (delta > 0.1) {
if ( delta > 0.1 ) {
delta = 0.1;
}
var dt = delta * (this.speed * 0.1);
var dt = delta * ( this.speed * 0.1 );
this.configShaders(dt);
this.configShaders( dt );
this.saveRenderState(renderer);
this.saveRenderState( renderer );
renderer.vr.enabled = false; // Avoid camera modification and recursion
renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
......@@ -429,20 +465,24 @@ THREE.Fire = function ( geometry, options ) {
this.projMesh2.visible = false;
this.projMesh3.visible = false;
this.renderSource(renderer);
this.renderSource( renderer );
this.clearDiffuse();
for (var i = 0; i < 21; i++) {
this.renderDiffuse(renderer);
for ( var i = 0; i < 21; i ++ ) {
this.renderDiffuse( renderer );
}
this.configShaders(dt);
this.renderDiffuse(renderer);
this.configShaders( dt );
this.renderDiffuse( renderer );
this.renderDrift( renderer );
if ( this.massConservation ) {
this.renderDrift(renderer);
this.renderProject( renderer );
this.renderProject( renderer );
if (this.massConservation) {
this.renderProject(renderer);
this.renderProject(renderer);
}
// Final result out for coloring
......@@ -452,9 +492,11 @@ THREE.Fire = function ( geometry, options ) {
this.material.minFilter = THREE.LinearFilter,
this.material.magFilter = THREE.LinearFilter,
this.restoreRenderState(renderer);
}
}
this.restoreRenderState( renderer );
};
};
THREE.Fire.prototype = Object.create( THREE.Mesh.prototype );
......@@ -485,7 +527,7 @@ THREE.Fire.SourceShader = {
'}'
].join("\n"),
].join( "\n" ),
fragmentShader: [
'uniform sampler2D sourceMap;',
......@@ -515,8 +557,8 @@ THREE.Fire.SourceShader = {
'}'
].join("\n")
}
].join( "\n" )
};
THREE.Fire.DiffuseShader = {
......@@ -572,7 +614,7 @@ THREE.Fire.DiffuseShader = {
'}'
].join("\n"),
].join( "\n" ),
fragmentShader: [
'uniform float oneOverWidth;',
......@@ -633,8 +675,8 @@ THREE.Fire.DiffuseShader = {
'}'
].join("\n")
}
].join( "\n" )
};
THREE.Fire.DriftShader = {
......@@ -649,7 +691,7 @@ THREE.Fire.DriftShader = {
},
'windVector': {
type: 'v2',
value: new THREE.Vector2(0.0, 0.0)
value: new THREE.Vector2( 0.0, 0.0 )
},
'airSpeed': {
type: 'f',
......@@ -673,7 +715,7 @@ THREE.Fire.DriftShader = {
'}'
].join("\n"),
].join( "\n" ),
fragmentShader: [
'uniform float oneOverWidth;',
......@@ -702,7 +744,7 @@ THREE.Fire.DriftShader = {
' vec4 dX1Y0 = texture2D( densityMap, intPos + vec2(oneOverWidth, 0.0) );',
' vec4 dX0Y1 = texture2D( densityMap, intPos + vec2(0.0, oneOverHeight) );',
' vec4 dX1Y1 = texture2D( densityMap, intPos + vec2(oneOverWidth, oneOverHeight) );',
' dX0Y0.gb = (dX0Y0.gb - step(0.5, dX0Y0.gb)) * 2.0;',
' dX1Y0.gb = (dX1Y0.gb - step(0.5, dX1Y0.gb)) * 2.0;',
......@@ -717,8 +759,8 @@ THREE.Fire.DriftShader = {
'}'
].join("\n")
}
].join( "\n" )
};
THREE.Fire.ProjectionShader1 = {
......@@ -750,7 +792,7 @@ THREE.Fire.ProjectionShader1 = {
'}'
].join("\n"),
].join( "\n" ),
fragmentShader: [
'uniform float oneOverWidth;',
......@@ -777,8 +819,8 @@ THREE.Fire.ProjectionShader1 = {
'}'
].join("\n")
}
].join( "\n" )
};
THREE.Fire.ProjectionShader2 = {
......@@ -810,7 +852,7 @@ THREE.Fire.ProjectionShader2 = {
'}'
].join("\n"),
].join( "\n" ),
fragmentShader: [
'uniform float oneOverWidth;',
......@@ -838,8 +880,8 @@ THREE.Fire.ProjectionShader2 = {
'}'
].join("\n")
}
].join( "\n" )
};
THREE.Fire.ProjectionShader3 = {
......@@ -875,7 +917,7 @@ THREE.Fire.ProjectionShader3 = {
'}'
].join("\n"),
].join( "\n" ),
fragmentShader: [
'uniform float oneOverWidth;',
......@@ -909,8 +951,8 @@ THREE.Fire.ProjectionShader3 = {
'}'
].join("\n")
}
].join( "\n" )
};
THREE.Fire.ColorShader = {
......@@ -949,7 +991,7 @@ THREE.Fire.ColorShader = {
'}'
].join("\n"),
].join( "\n" ),
fragmentShader: [
'uniform vec3 color1;',
......@@ -972,8 +1014,8 @@ THREE.Fire.ColorShader = {
' gl_FragColor = vec4(blend1 + blend2, density);',
'}'
].join("\n")
}
].join( "\n" )
};
THREE.Fire.DebugShader = {
......@@ -1013,7 +1055,7 @@ THREE.Fire.DebugShader = {
'}'
].join("\n"),
].join( "\n" ),
fragmentShader: [
'uniform sampler2D densityMap;',
......@@ -1037,5 +1079,5 @@ THREE.Fire.DebugShader = {
'}'
].join("\n")
}
].join( "\n" )
};
examples/webgl_fire.html
浏览文件 @ 5e3c5b3d
......@@ -55,7 +55,7 @@
}
var camera, scene, renderer, stats;
var mesh, texture, fire;
var fire;
var params = {
color1: '#ffffff',
......@@ -65,7 +65,7 @@
burnRate: 0.35,
diffuse: 1.33,
viscosity: 0.25,
expansion: -0.25,
expansion: - 0.25,
swirl: 50.0,
drag: 0.35,
airSpeed: 12.0,
......@@ -80,8 +80,6 @@
function init() {
//
var width = window.innerWidth;
var height = window.innerHeight;
......@@ -104,7 +102,7 @@
textureHeight: 512,
debug: false
} );
fire.position.z = -2;
fire.position.z = - 2;
scene.add( fire );
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
......@@ -115,128 +113,162 @@
document.body.appendChild( renderer.domElement );
function updateColor1( value ) {
fire.color1.set( value );
}
function updateColor2( value ) {
fire.color2.set( value );
}
function updateColor3( value ) {
fire.color3.set( value );
}
function updateColorBias( value ) {
fire.colorBias = value;
}
function updateBurnRate( value ) {
fire.burnRate = value;
}
function updateDiffuse( value ) {
fire.diffuse = value;
}
function updateViscosity( value ) {
fire.viscosity = value;
}
function updateExpansion( value ) {
fire.expansion = value;
}
function updateSwirl( value ) {
fire.swirl = value;
}
function updateDrag( value ) {
fire.drag = value;
}
function updateAirSpeed( value ) {
fire.airSpeed = value;
}
function updateWindX( value ) {
fire.windVector.x = value;
}
function updateWindY( value ) {
fire.windVector.y = value;
}
function updateSpeed( value ) {
fire.speed = value;
}
function updateMassConservation( value ) {
fire.massConservation = value;
}
params.Single = function () {
fire.clearSources();
fire.addSource(0.5, 0.1, 0.1, 1.0, 0.0, 1.0);
}
fire.addSource( 0.5, 0.1, 0.1, 1.0, 0.0, 1.0 );
};
params.Multiple = function () {
fire.clearSources();
fire.addSource(0.45, 0.1, 0.1, 0.5, 0.0, 1.0);
fire.addSource(0.55, 0.1, 0.1, 0.5, 0.0, 1.0);
}
fire.addSource( 0.45, 0.1, 0.1, 0.5, 0.0, 1.0 );
fire.addSource( 0.55, 0.1, 0.1, 0.5, 0.0, 1.0 );
};
params.Text = function () {
var text = "Three JS";
var size = 180;
var color = "#FF0040";
var canvas = document.createElement("canvas");
var canvas = document.createElement( "canvas" );
canvas.width = 1024;
canvas.height = 1024;
var context = canvas.getContext("2d");
var context = canvas.getContext( "2d" );
context.font = size + "pt Arial";
var margin = 10;
var textWidth = context.measureText(text).width;
context.strokeStyle = "black";
context.strokeRect(0, 0, canvas.width, canvas.height);
context.strokeRect( 0, 0, canvas.width, canvas.height );
context.textAlign = "center";
context.textBaseline = "middle";
context.lineWidth = 5;
context.strokeStyle = color;
context.fillStyle = "black";
context.strokeText(text, canvas.width / 2, canvas.height * 0.75);
var texture = new THREE.Texture(canvas);
context.strokeText( text, canvas.width / 2, canvas.height * 0.75 );
var texture = new THREE.Texture( canvas );
texture.needsUpdate = true;
fire.setSourceMap(texture);
}
fire.setSourceMap( texture );
};
// dat.gui
var gui = new dat.GUI();
gui.add(params, "Single");
gui.add(params, "Multiple");
gui.add(params, "Text");
gui.addColor( params, 'color1' ).onChange(updateColor1);
gui.addColor( params, 'color2' ).onChange(updateColor2);
gui.addColor( params, 'color3' ).onChange(updateColor3);
gui.add( params, 'colorBias', 0.0, 1.0 ).onChange(updateColorBias);
gui.add( params, 'burnRate', 0.0, 10.0 ).onChange(updateBurnRate);
gui.add( params, 'diffuse', 0.0, 5.0 ).step( 0.01 ).onChange(updateDiffuse);
gui.add( params, 'viscosity', 0.0, 5.0 ).step( 0.01 ).onChange(updateViscosity);
gui.add( params, 'expansion', -1.0, 1.0 ).step( 0.01 ).onChange(updateExpansion);
gui.add( params, 'swirl', 0.0, 50.0 ).step( 0.01 ).onChange(updateSwirl);
gui.add( params, 'drag', 0.0, 1.0).onChange(updateDrag);
gui.add( params, 'airSpeed', 0.0, 50.0).onChange(updateAirSpeed);
gui.add( params, 'windX', -5, 5 ).step( 0.01 ).onChange(updateWindX);
gui.add( params, 'windY', -5, 5 ).step( 0.01 ).onChange(updateWindY);
gui.add( params, 'speed', 0, 1000 ).onChange(updateSpeed);
gui.add( params, 'massConservation' ).onChange(updateMassConservation);
gui.add( params, "Single" );
gui.add( params, "Multiple" );
gui.add( params, "Text" );
gui.addColor( params, 'color1' ).onChange( updateColor1 );
gui.addColor( params, 'color2' ).onChange( updateColor2 );
gui.addColor( params, 'color3' ).onChange( updateColor3 );
gui.add( params, 'colorBias', 0.0, 1.0 ).onChange( updateColorBias );
gui.add( params, 'burnRate', 0.0, 10.0 ).onChange( updateBurnRate );
gui.add( params, 'diffuse', 0.0, 5.0 ).step( 0.01 ).onChange( updateDiffuse );
gui.add( params, 'viscosity', 0.0, 5.0 ).step( 0.01 ).onChange( updateViscosity );
gui.add( params, 'expansion', - 1.0, 1.0 ).step( 0.01 ).onChange( updateExpansion );
gui.add( params, 'swirl', 0.0, 50.0 ).step( 0.01 ).onChange( updateSwirl );
gui.add( params, 'drag', 0.0, 1.0 ).onChange( updateDrag );
gui.add( params, 'airSpeed', 0.0, 50.0 ).onChange( updateAirSpeed );
gui.add( params, 'windX', - 5, 5 ).step( 0.01 ).onChange( updateWindX );
gui.add( params, 'windY', - 5, 5 ).step( 0.01 ).onChange( updateWindY );
gui.add( params, 'speed', 0, 1000 ).onChange( updateSpeed );
gui.add( params, 'massConservation' ).onChange( updateMassConservation );
function updateAll() {
updateColor1( params.color1 );
updateColor2( params.color2 );
updateColor3( params.color3 );
......@@ -253,12 +285,16 @@
updateSpeed( params.speed );
updateMassConservation( params.massConservation );
for (var i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
for ( var i in gui.__controllers ) {
gui.__controllers[ i ].updateDisplay();
}
}
params.Candle = function() {
params.Candle = function () {
params.color1 = 0xffffff;
params.color2 = 0xffa000;
params.color3 = 0x000000;
......@@ -276,10 +312,12 @@
params.massConservation = false;
updateAll();
}
gui.add(params, 'Candle');
params.Torch = function() {
};
gui.add( params, 'Candle' );
params.Torch = function () {
params.color1 = 0xffdcaa;
params.color2 = 0xffa000;
params.color3 = 0x000000;
......@@ -297,10 +335,12 @@
params.massConservation = false;
updateAll();
}
gui.add(params, 'Torch');
params.Campfire = function() {
};
gui.add( params, 'Torch' );
params.Campfire = function () {
params.color1 = 0xffffff;
params.color2 = 0xffa000;
params.color3 = 0x000000;
......@@ -310,7 +350,7 @@
params.burnRate = 0.3;
params.diffuse = 1.33;
params.viscosity = 0.25;
params.expansion = -0.25;
params.expansion = - 0.25;
params.swirl = 50.0;
params.drag = 0.35;
params.airSpeed = 12.0;
......@@ -318,10 +358,12 @@
params.massConservation = false;
updateAll();
}
gui.add(params, 'Campfire');
params.Fireball = function() {
};
gui.add( params, 'Campfire' );
params.Fireball = function () {
params.color1 = 0xffffff;
params.color2 = 0xffa000;
params.color3 = 0x000000;
......@@ -339,15 +381,17 @@
params.massConservation = false;
updateAll();
}
gui.add(params, 'Fireball');
params.Iceball = function() {
};
gui.add( params, 'Fireball' );
params.Iceball = function () {
params.color1 = 0x00bdf7;
params.color2 = 0x1b3fb6;
params.color3 = 0x001869;
params.windX = 0.0;
params.windY = -0.25;
params.windY = - 0.25;
params.colorBias = 0.25;
params.burnRate = 2.6;
params.diffuse = 5.0;
......@@ -360,14 +404,16 @@
params.massConservation = false;
updateAll();
}
gui.add(params, 'Iceball');
params.Smoke = function() {
};
gui.add( params, 'Iceball' );
params.Smoke = function () {
params.color1 = 0xd2d2d2;
params.color2 = 0xd7d7d7;
params.color3 = 0x000000;
params.windX = -0.05;
params.windX = - 0.05;
params.windY = 0.15;
params.colorBias = 0.95;
params.burnRate = 0.0;
......@@ -381,10 +427,12 @@
params.massConservation = false;
updateAll();
}
gui.add(params, 'Smoke');
params.Cigar = function() {
};
gui.add( params, 'Smoke' );
params.Cigar = function () {
params.color1 = 0xc5c5c5;
params.color2 = 0x787878;
params.color3 = 0x000000;
......@@ -394,7 +442,7 @@
params.burnRate = 0.0;
params.diffuse = 1.3;
params.viscosity = 0.05;
params.expansion = -0.05;
params.expansion = - 0.05;
params.swirl = 3.7;
params.drag = 0.6;
params.airSpeed = 6.0;
......@@ -402,8 +450,9 @@
params.massConservation = false;
updateAll();
}
gui.add(params, 'Cigar');
};
gui.add( params, 'Cigar' );
gui.open();
......@@ -436,6 +485,7 @@
renderer.clear();
renderer.render( scene, camera );
stats.update();
}
</script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或