Charactor.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. import settings from "./utils/settings.js"
  2. export default class Charactor {
  3. constructor(newMeshes, particleSystems, skeletons, animationGroups) {
  4. this.mesh = newMeshes[0]
  5. this.particleSystem = particleSystems[0]
  6. this.skeleton = skeletons[0]
  7. this.modelData = { newMeshes, particleSystems, skeletons, animationGroups }
  8. // 设置人物动画权重
  9. this.animation = {}
  10. animationGroups.forEach((ani, index) => {
  11. this.animation[ani.name] = ani
  12. ani.play(true)
  13. if(index == 0) {
  14. ani.setWeightForAllAnimatables(1);
  15. this.actionType = ani.name + "-" + ani.name
  16. }
  17. else ani.setWeightForAllAnimatables(0);
  18. })
  19. // 动画沙漏, 用于人物模型动画权重转换
  20. this.aniHourglass = {
  21. upper: 0,
  22. lower: 1,
  23. }
  24. // 人物行走数据,通过startWalk更新
  25. this.walkData = {
  26. pathArr: [],
  27. currentPoint: 0
  28. }
  29. }
  30. set visible(isVisible) {
  31. this.modelData.newMeshes.forEach(mesh => mesh.isVisible = isVisible)
  32. }
  33. get visible() {
  34. return this.mesh.isVisible
  35. }
  36. updateAniTrans() {
  37. // 实时更新角色模型动画
  38. if(this.aniHourglass.upper > 0) {
  39. // 10帧动画过渡
  40. this.aniHourglass.upper = (this.aniHourglass.upper * 10 - 1) / 10
  41. this.aniHourglass.lower = (this.aniHourglass.lower * 10 + 1) / 10
  42. let fromAni = this.actionType.split("-")[0]
  43. let toAni = this.actionType.split("-")[1]
  44. this.animation[fromAni].setWeightForAllAnimatables(this.aniHourglass.upper);
  45. this.animation[toAni].setWeightForAllAnimatables(this.aniHourglass.lower);
  46. }
  47. }
  48. AniTransfromTo(aniName) {
  49. let lastAniName = this.actionType.split("-")[1]
  50. if(lastAniName == aniName) return
  51. // 颠倒沙漏
  52. this.aniHourglass = {
  53. upper: 1,
  54. lower: 0,
  55. }
  56. this.actionType = lastAniName + "-" + aniName
  57. }
  58. startWalk(pathArr, charactorManager) {
  59. this.walkData = {
  60. pathArr: pathArr,
  61. currentPoint: 0
  62. }
  63. if(pathArr.length >= 2 && this.actionType.split("-")[1] != "Walking")
  64. {
  65. let video = pathArr[0].video
  66. if(video.isLoaded) {
  67. this.AniTransfromTo("Walking")
  68. this.walkByPath(charactorManager)
  69. } else {
  70. video.onloadeddata = () => {
  71. this.AniTransfromTo("Walking")
  72. this.walkByPath(charactorManager)
  73. }
  74. }
  75. }
  76. }
  77. walkByPath(charactorManager) {
  78. let charactor = this
  79. let { pathArr, currentPoint } = charactor.walkData
  80. // 更新房间的视频贴图
  81. let video = pathArr[currentPoint].video
  82. if(!video) {
  83. console.warn("视频未加载。")
  84. charactor.AniTransfromTo("Idle")
  85. charactorManager.app.cameraController.lockCamera(false)
  86. return
  87. }
  88. charactorManager.app.updateHouseVideo(video)
  89. // let video = charactor.walkData.pathArr[1].video
  90. // charactor.walkData.currentPoint == 1 && video && charactorManager.app.updateHouseVideo(video)
  91. let nextPos = pathArr[currentPoint+1].point
  92. let nextVideoName = pathArr[currentPoint+1].videoName
  93. if(nextVideoName)
  94. {
  95. let sendData = {
  96. videoList: [nextVideoName],
  97. sceneCode: settings.sceneCode,
  98. roomId: settings.roomId,
  99. userId: settings.userId,
  100. }
  101. console.log("[3D] send(getVideo): ", sendData);
  102. connection.socket.emit("getVideo", sendData);
  103. }
  104. else {
  105. // 即将走到终点之前,获取终点旋转视频
  106. charactorManager.app.getSocketVideoType = "rotateCamera"
  107. let endPointId = pathArr[currentPoint+1].id
  108. console.log("[3D] send(getRotateVideo): ", endPointId + "/" + endPointId)
  109. window.connection.socket.emit("getRotateVideo", {
  110. videoPath: endPointId + "/" + endPointId,
  111. sangle: 0,
  112. eangle: 360,
  113. reverses: false,
  114. sceneCode: settings.sceneCode,
  115. roomId: settings.roomId,
  116. userId: settings.userId,
  117. });
  118. window.connection.socket.emit("getRotateVideo", {
  119. videoPath: endPointId + "/" + endPointId,
  120. sangle: 0,
  121. eangle: 360,
  122. reverses: true,
  123. sceneCode: settings.sceneCode,
  124. roomId: settings.roomId,
  125. userId: settings.userId,
  126. });
  127. }
  128. // 要跳转的位置与当前位置相同的话,就直接跳过,否则动画会出bug
  129. if(nextPos.x == this.mesh.position.x && nextPos.z == this.mesh.position.z)
  130. {
  131. console.warn("跳转点位与当前点位相同, 已跳过!")
  132. if(pathArr[currentPoint+1].videoName) {
  133. charactor.walkByPath(charactorManager)
  134. } else {
  135. charactor.AniTransfromTo("Idle")
  136. charactorManager.app.cameraController.lockCamera(false)
  137. }
  138. return
  139. }
  140. let startingPoint = charactor.mesh.position.clone();
  141. startingPoint.y = nextPos.y;
  142. let walkDirc = nextPos.subtract(startingPoint).normalize();
  143. // 行走动画
  144. const walkAni = new BABYLON.Animation("walk", "position", settings.video.frameRate,
  145. BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE);
  146. let walkFrameNum = settings.video.frameRate * video.duration
  147. const walkKeyFrames = [{
  148. frame: 0,
  149. value: charactor.mesh.position
  150. },{
  151. frame: walkFrameNum,
  152. value: nextPos
  153. }];
  154. walkAni.setKeys(walkKeyFrames);
  155. // 转身动画
  156. const newQuar = BABYLON.Quaternion.FromUnitVectorsToRef(new BABYLON.Vector3(0, 0, 1), walkDirc, new BABYLON.Quaternion())
  157. const turnAroundAni = new BABYLON.Animation("turnAround", "rotationQuaternion", settings.video.frameRate,
  158. BABYLON.Animation.ANIMATIONTYPE_QUATERNION, BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE);
  159. let turnAroundFrameNum = settings.video.frameRate * 0.2 // 0.2秒的帧数
  160. const turnAroundFrames = [{
  161. frame: 0,
  162. value: charactor.mesh.rotationQuaternion
  163. },{
  164. frame: turnAroundFrameNum,
  165. value: newQuar
  166. }];
  167. turnAroundAni.setKeys(turnAroundFrames);
  168. charactorManager.app.scene.beginDirectAnimation(charactor.mesh, [walkAni, turnAroundAni], 0, Math.max(walkFrameNum, turnAroundFrameNum), false, 1,
  169. () => {
  170. // 如果还有下一个点位就继续走,否则变为站立
  171. if(pathArr[++charactor.walkData.currentPoint].videoName) {
  172. charactor.walkByPath(charactorManager)
  173. } else {
  174. charactor.AniTransfromTo("Idle")
  175. charactorManager.app.cameraController.lockCamera(false)
  176. }
  177. });
  178. }
  179. }