Fireball
//fireball var settings = { positionStyle : Type.SPHERE, positionBase : new THREE.Vector3( 0, 0, 1 ), positionRadius : 0.5, velocityStyle : Type.SPHERE, speedBase : 1, speedSpread : 0, particleTexture : THREE.ImageUtils.loadTexture( 'images/smokeparticle.png' ), sizeTween : new Tween( [0,4], [0,10] ), opacityTween : new Tween( [0, 0.3], [1, 1] ), colorBase : new THREE.Vector3(0.02, 1, 0.4), blendStyle : THREE.AdditiveBlending, particlesPerSecond : 5000, particleDeathAge : 0.7, emitterDeathAge : 60 };
The particles are now moving from a center to the outside of a sphere.
The movement is done by these lines:
The brigthness effect is done by:
positionStyle : Type.SPHERE, positionBase : new THREE.Vector3( 0, 0, 1 ), positionRadius : 0.5,
The movement is done by these lines:
velocityStyle : Type.SPHERE, speedBase : 1, speedSpread : 0,
The brigthness effect is done by:
blendStyle : THREE.AdditiveBlending,
Collect Energie
You can change the direction and make a "collect energie" effect.
//energie var settings = { positionStyle : Type.SPHERE, positionBase : new THREE.Vector3( 0, 0, 1 ), positionRadius : 7, velocityStyle : Type.SPHERE, speedBase : -8, speedSpread : 0, particleTexture : THREE.ImageUtils.loadTexture( 'images/smokeparticle.png' ), sizeTween : new Tween( [0], [1] ), opacityTween : new Tween( [0, 4], [1, 0] ), colorTween : new Tween( [0.2, 1], [ new THREE.Vector3(0.52, 1, 0.5), new THREE.Vector3(0.05, 1, 0.5) ] ), blendStyle : THREE.AdditiveBlending, particlesPerSecond : 300, particleDeathAge : 1, emitterDeathAge : 60 };
Smoke Bomb
//smoke bomb var settings = { positionStyle : Type.SPHERE, positionBase : new THREE.Vector3( 0, 0, 1 ), positionRadius : 1, velocityStyle : Type.SPHERE, speedBase : 2, speedSpread : 4, particleTexture : THREE.ImageUtils.loadTexture( 'images/smokeparticle.png' ), sizeTween : new Tween( [0,4], [5,10] ), opacityTween : new Tween( [0, 5], [0.6, 0.3] ), colorTween : new Tween( [0.2, 1], [ new THREE.Vector3(0.0, 0, 1), new THREE.Vector3(0.05, 0, 0.5) ] ), particlesPerSecond : 100, particleDeathAge : 4, emitterDeathAge : 60 };
Full script
<html> <html> <head> <script src="three/build/three.min.js"></script> <script src="three/examples/js/controls/OrbitControls.js"></script> <script src="three/ParticleEngine.js"></script> <script src="jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function() { //scene scene = new THREE.Scene(); //camera var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(0,-13,5); camera.lookAt(new THREE.Vector3( 0, 5, 0 )); //renderer var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); //controls var controls = new THREE.OrbitControls( camera, renderer.domElement ); //show canvas $("#canvas-container").html(renderer.domElement); //directional light var directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(6, 0, 6); scene.add(directionalLight); //sphere //SphereGeometry(RADIUS,SEGMENTWIDTH,SEGMENTHEIGHT) var geometry = new THREE.SphereGeometry(3, 10, 10); var material = new THREE.MeshBasicMaterial({wireframe: true,color: 0x555555}); var sphere = new THREE.Mesh( geometry, material ); sphere.position.set(0,0,1); scene.add( sphere ); //grid xy var gridXY = new THREE.GridHelper(10, 1); gridXY.rotation.x = Math.PI/2; scene.add(gridXY); //particle //smoke bomb var settings = { positionStyle : Type.SPHERE, positionBase : new THREE.Vector3( 0, 0, 1 ), positionRadius : 1, velocityStyle : Type.SPHERE, speedBase : 2, speedSpread : 4, particleTexture : THREE.ImageUtils.loadTexture( 'images/smokeparticle.png' ), sizeTween : new Tween( [0,4], [5,10] ), opacityTween : new Tween( [0, 5], [0.6, 0.3] ), colorTween : new Tween( [0.2, 1], [ new THREE.Vector3(0.0, 0, 1), new THREE.Vector3(0.05, 0, 0.5) ] ), particlesPerSecond : 100, particleDeathAge : 4, emitterDeathAge : 60 }; engine = new ParticleEngine(); engine.setValues( settings ); engine.initialize(); //render scene var render = function () { requestAnimationFrame(render); renderer.render(scene, camera); engine.update( 0.01 * 0.5 ); }; render(); }); </script> </head> <body style="background: black"> <div id="canvas-container" style="position: absolute; left:0px; top:0px"></div> </body> </html>