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>
