Charactor.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. export default class Charactor {
  2. constructor(newMeshes, particleSystems, skeletons, animationGroups) {
  3. this.mesh = newMeshes[0]
  4. this.particleSystem = particleSystems[0]
  5. this.skeleton = skeletons[0]
  6. // 设置人物动画权重
  7. this.animation = {}
  8. animationGroups.forEach((ani, index) => {
  9. this.animation[ani.name] = ani
  10. ani.play(true)
  11. if(index == 0) {
  12. ani.setWeightForAllAnimatables(1);
  13. this.actionType = ani.name + "-" + ani.name
  14. }
  15. else ani.setWeightForAllAnimatables(0);
  16. })
  17. // 动画沙漏, 用于人物模型动画权重转换
  18. this.aniHourglass = {
  19. upper: 0,
  20. lower: 1,
  21. }
  22. // 人物行走数据,通过startWalk更新
  23. this.walkData = {
  24. pathArr: [],
  25. currentPoint: 0
  26. }
  27. }
  28. updateAniTrans() {
  29. // 实时更新角色模型动画
  30. if(this.aniHourglass.upper > 0) {
  31. // 10帧动画过渡
  32. this.aniHourglass.upper = (this.aniHourglass.upper * 10 - 1) / 10
  33. this.aniHourglass.lower = (this.aniHourglass.lower * 10 + 1) / 10
  34. let fromAni = this.actionType.split("-")[0]
  35. let toAni = this.actionType.split("-")[1]
  36. this.animation[fromAni].setWeightForAllAnimatables(this.aniHourglass.upper);
  37. this.animation[toAni].setWeightForAllAnimatables(this.aniHourglass.lower);
  38. }
  39. }
  40. AniTransfromTo(aniName) {
  41. let lastAniName = this.actionType.split("-")[1]
  42. if(lastAniName == aniName) return
  43. // 颠倒沙漏
  44. this.aniHourglass = {
  45. upper: 1,
  46. lower: 0,
  47. }
  48. this.actionType = lastAniName + "-" + aniName
  49. }
  50. startWalk(pathArr, charactorManager) {
  51. this.walkData = {
  52. pathArr: pathArr,
  53. currentPoint: 0
  54. }
  55. if(pathArr.length >= 2 && this.actionType.split("-")[1] != "Walking")
  56. {
  57. let video = pathArr[1].video
  58. if(video.isLoaded) {
  59. this.AniTransfromTo("Walking")
  60. this.walkByPath(charactorManager)
  61. } else {
  62. video.onloadeddata = () => {
  63. this.AniTransfromTo("Walking")
  64. this.walkByPath(charactorManager)
  65. }
  66. }
  67. }
  68. }
  69. walkByPath(charactorManager) {
  70. let charactor = this
  71. charactor.walkData.currentPoint++
  72. // 更新房间的视频贴图
  73. let video = charactor.walkData.pathArr[charactor.walkData.currentPoint].video
  74. charactorManager.app.updateHouseVideo(video)
  75. let newPos = charactor.walkData.pathArr[charactor.walkData.currentPoint].point
  76. // 要跳转的位置与当前位置相同的话,就直接跳过,否则动画会出bug
  77. if(newPos.x == this.mesh.position.x && newPos.z == this.mesh.position.z)
  78. {
  79. console.warn("跳转点位与当前点位相同, 已跳过!")
  80. if(charactor.walkData.pathArr[charactor.walkData.currentPoint+1]) {
  81. charactor.walkByPath(charactorManager)
  82. } else {
  83. charactor.AniTransfromTo("Idle")
  84. charactorManager.app.lockCamera(false)
  85. }
  86. return
  87. }
  88. let startingPoint = charactor.mesh.position.clone();
  89. startingPoint.y = newPos.y;
  90. let walkDirc = newPos.subtract(startingPoint).normalize();
  91. // 行走动画
  92. const walkAni = new BABYLON.Animation("walk", "position", charactorManager.frameRate,
  93. BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE);
  94. let walkFrameNum = charactorManager.frameRate * video.duration
  95. const walkKeyFrames = [{
  96. frame: 0,
  97. value: charactor.mesh.position
  98. },{
  99. frame: walkFrameNum,
  100. value: newPos
  101. }];
  102. walkAni.setKeys(walkKeyFrames);
  103. // 转身动画
  104. const newQuar = BABYLON.Quaternion.FromUnitVectorsToRef(new BABYLON.Vector3(0, 0, 1), walkDirc, new BABYLON.Quaternion())
  105. const turnAroundAni = new BABYLON.Animation("turnAround", "rotationQuaternion", charactorManager.frameRate,
  106. BABYLON.Animation.ANIMATIONTYPE_QUATERNION, BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE);
  107. let turnAroundFrameNum = charactorManager.frameRate * 0.2 // 0.2秒的帧数
  108. const turnAroundFrames = [{
  109. frame: 0,
  110. value: charactor.mesh.rotationQuaternion
  111. },{
  112. frame: turnAroundFrameNum,
  113. value: newQuar
  114. }];
  115. turnAroundAni.setKeys(turnAroundFrames);
  116. charactorManager.app.scene.beginDirectAnimation(charactor.mesh, [walkAni, turnAroundAni], 0, Math.max(walkFrameNum, turnAroundFrameNum), false, 1,
  117. () => {
  118. // 如果还有下一个点位就继续走,否则变为站立
  119. if(charactor.walkData.pathArr[charactor.walkData.currentPoint+1]) {
  120. charactor.walkByPath(charactorManager)
  121. } else {
  122. charactor.AniTransfromTo("Idle")
  123. charactorManager.app.lockCamera(false)
  124. }
  125. });
  126. }
  127. }