Particle.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import * as THREE from "../../../../libs/three.js/build/three.module.js";
  2. import Tween from '../Tween.js'
  3. export default class Particle{
  4. constructor(prop={}){
  5. this.position = new THREE.Vector3();
  6. this.velocity = new THREE.Vector3(); // units per second
  7. this.angle = 0;
  8. this.angleVelocity = 0; // degrees per second
  9. this.angleAcceleration = 0; // degrees per second, per second
  10. this.size = 16.0;
  11. this.color = new THREE.Color();
  12. this.opacity = 1.0;
  13. this.age = 0;
  14. this.alive = 0; // use float instead of boolean for shader purposes
  15. this.lastChangeVage = 0 //add
  16. this.sizeTween = prop.sizeTween || new Tween( [0, 1], [32, 128] );
  17. this.opacityTween = prop.opacityTween || new Tween( [0.8, 2], [0.5, 0] );
  18. this.colorTween = prop.colorTween || new Tween( [0.4, 1], [ new THREE.Vector3(0,0,0.2), new THREE.Vector3(0, 0, 0.5) ] );
  19. }
  20. update(dt)
  21. {
  22. this.position.add(this.velocity.clone().multiplyScalar(dt))
  23. this.velocity.multiplyScalar( 1+this.acceleration*dt )
  24. // convert from degrees to radians: 0.01745329251 = Math.PI/180
  25. this.angle += this.angleVelocity * 0.01745329251 * dt;
  26. this.angleVelocity += this.angleAcceleration * 0.01745329251 * dt;
  27. this.age += dt;
  28. // if the tween for a given attribute is nonempty,
  29. // then use it to update the attribute's value
  30. if ( this.sizeTween.times.length > 0 )
  31. this.size = this.sizeTween.lerp( this.age/this.deathAge );
  32. if ( this.colorTween.times.length > 0 )
  33. {
  34. var colorHSL = this.colorTween.lerp( this.age/this.deathAge );
  35. this.color = new THREE.Color().setHSL( colorHSL.x, colorHSL.y, colorHSL.z );
  36. }
  37. if ( this.opacityTween.times.length > 0 )
  38. {
  39. this.opacity = this.opacityTween.lerp( this.age/this.deathAge);
  40. }
  41. }
  42. }