threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
103 lines (91 loc) • 3.14 kB
HTML
<script src="../../../vendor/three.js/build/three.min.js"></script>
<script src="../../threex.loop/THREEx.Loop.js"></script>
<body style='margin: 0px; background-color: #bbbbbb;overflow: hidden;'>
<script>
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var loop = new THREEx.Loop().start();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 3;
renderer.setClearColor('black', 1)
var geometry = new THREE.SphereGeometry( 1 );
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.scale.multiplyScalar(0.1)
scene.add( mesh );
loop.hook(function(delta, now){
var angle = 0.1 * now * Math.PI * 2;
mesh.position.x = Math.cos(angle*3.0) * 2
mesh.position.y = Math.sin(angle*1.3) * 1
})
new WhiteSmokeTrail(mesh.position, loop, scene)
loop.hook(function(delta, now){
renderer.render( scene, camera );
})
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
function WhiteSmokeTrail(position, loop, container){
var texture = THREE.ImageUtils.loadTexture('images/cloud10.png')
var maxAge = 1;
var tweenOpacity= createTweenMidi(maxAge, 0.33*maxAge, 0.33*maxAge);
var tweenScale = (function(){
var tweenMidi = createTweenMidi(maxAge, 0.2*maxAge, 0.2*maxAge);
return function(age){
return (1 + 1 * tweenMidi(age)) * 0.2
}
})();
var lastEmit = 0;
var prevPosition= new THREE.Vector3().copy(position);
loop.hook(function(delta, now){
// rate limiter emittion
var rate = 50;
if( rate === 0 || now - lastEmit < 1/rate ) return;
lastEmit = now;
// init sprite material
var material = new THREE.SpriteMaterial({
map : texture,
useScreenCoordinates : false,
color : 'white'
})
// init sprite
var sprite = new THREE.Sprite(material)
sprite.rotation = Math.random() * Math.PI*2
sprite.position.copy( position )
container.add( sprite )
// compute velocity
var velocity = position.clone().sub(prevPosition).normalize();
prevPosition.copy( position )
// start a little bit behind the container
sprite.position.add( velocity.clone().multiplyScalar(-0.1) )
// init patterm
sprite.scale.set(1,1,1).multiplyScalar( tweenScale(0) )
material.opacity= tweenOpacity(0)
var birthDate = now;
var callback = loop.hook(function(delta, now){
var age = now - birthDate;
if( age >= maxAge ){
sprite.parent.remove(sprite)
loop.unhook(callback)
return;
}
sprite.scale.set(1,1,1).multiplyScalar( tweenScale(age) )
material.opacity= tweenOpacity(age)
})
});
function createTweenMidi(maxAge, attackTime, releaseTime){
return function(age){
if( age < attackTime ){
return age / attackTime
}else if( age < maxAge - releaseTime ){
return 1;
}else{
return (maxAge - age) / releaseTime
}
}
}
}
</script></body>