TweenRotation.re.ts 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. import * as RE from 'rogue-engine'
  2. import * as THREE from 'three'
  3. import Tween from '../Lib/Tween'
  4. import EASINGS from '../Lib/Easings'
  5. export default class TweenRotation extends RE.Component {
  6. @RE.props.button() run = this.addRotateTween.bind(this)
  7. @RE.props.vector3() targetRotationDegrees: THREE.Vector3 = new THREE.Vector3(0, 90, 90)
  8. @RE.props.num() durationMillis: number = 2000
  9. @RE.props.select() easing = 1;
  10. easingOptions = ["Linear", "Quadratic", "Cubic", "Quartic", "Quintic", "Sinusoidal", "Exponential", "Circular", "Elastic", "Back", "Bounce"];
  11. @RE.props.select() easingDirection = 3;
  12. easingDirectionOptions = ["EaseNone", "EaseIn", "EaseOut", "EaseInOut"];
  13. firstRotation = new THREE.Vector3(0, 0, 0)
  14. secondRotation = new THREE.Vector3(0, 90, 90)
  15. awake() {
  16. this.targetRotationDegrees = this.secondRotation.clone()
  17. }
  18. addRotateTween() {
  19. const rotationInRadians = this.targetRotationDegrees.clone().multiplyScalar(Math.PI / 180)
  20. Tween.create(this.object3d.rotation, rotationInRadians, this.durationMillis, EASINGS[this.easingOptions[this.easing]][this.easingDirectionOptions[this.easingDirection]], this.onCompleted.bind(this))
  21. }
  22. onCompleted() {
  23. if (this.targetRotationDegrees.equals(this.firstRotation)) {
  24. this.targetRotationDegrees = this.secondRotation.clone()
  25. } else {
  26. this.targetRotationDegrees = this.firstRotation.clone()
  27. }
  28. }
  29. }
  30. RE.registerComponent(TweenRotation);