CharactorManager.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. import Charactor from "./Charactor.js";
  2. import common from "./utils/common.js";
  3. import data from "./utils/data.js";
  4. import settings from "./utils/settings.js";
  5. export default class CharactorManager {
  6. constructor(app) {
  7. this.app = app
  8. this.frameRate = settings.video.frameRate;
  9. this.texture = new BABYLON.Texture("https://4dkk.4dage.com/v3/img/marker.png", scene);
  10. }
  11. readPointData() {
  12. return fetch("../textures/outputmp4/points1.json", {
  13. headers: {
  14. 'content-type': 'application/json'
  15. },
  16. method: 'GET',
  17. })
  18. .then(response => response.json())
  19. .then(response => {
  20. this.pointsData = response
  21. this.pointsData.forEach(data => {
  22. data.position = new BABYLON.Vector3(-data.position.x, data.position.y, data.position.z)
  23. // var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.2, segments: 32}, this.app.scene);
  24. // sphere.position.x = data.position.x;
  25. // sphere.position.y = data.position.y+1;
  26. // sphere.position.z = data.position.z;
  27. var plane = new BABYLON.Mesh.CreatePlane("TextPlane", 0.2, scene, true);
  28. plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
  29. plane.material.alpha = 1,
  30. plane.material.emissiveTexture = this.texture,
  31. plane.material.backFaceCulling = true,
  32. plane.material.diffuseTexture = this.texture,
  33. plane.material.diffuseTexture.hasAlpha = !0,
  34. plane.material.useAlphaFromDiffuseTexture = !0
  35. plane.rotation.x = Math.PI / 2
  36. plane.position.x = data.position.x;
  37. plane.position.y = data.position.y+0.01;
  38. plane.position.z = data.position.z;
  39. })
  40. })
  41. }
  42. importCharactorModel(modelPath, modelName) {
  43. let self = this
  44. BABYLON.SceneLoader.ImportMesh("", modelPath, modelName, this.app.scene, function (newMeshes, particleSystems, skeletons, animationGroups) {
  45. self.charactor = new Charactor(newMeshes, particleSystems, skeletons, animationGroups)
  46. self.charactor.mesh.scaling.scaleInPlace(1.4);
  47. self.charactor.visible = false
  48. setTimeout(() => {
  49. self.charactor.visible = true
  50. // document.getElementById("mask").style.zIndex = "-10000"
  51. }, 1000)
  52. // 初始人物位置
  53. self.charactor.mesh.position = new BABYLON.Vector3(
  54. self.pointsData[0].position.x,
  55. 0,
  56. self.pointsData[0].position.z
  57. )
  58. });
  59. }
  60. clickHouse() {
  61. var scene = this.app.scene
  62. var pickinfo = scene.pick(scene.pointerX, scene.pointerY);
  63. if(pickinfo.pickedPoint) {
  64. let camera = this.app.cameraController.camera
  65. // 在行走之前,首先要把人物矫正到45度的倍数(有视频的8个方向)
  66. if(camera.alpha % (Math.PI / 4) == 0 )
  67. {
  68. // 如果已经在8个方向上了
  69. this.charactorWalkTo(pickinfo.pickedPoint)
  70. }
  71. else {
  72. // 相机方向矫正
  73. let cameraAlphaAmend = Math.round(camera.alpha / (Math.PI / 4)) * (Math.PI / 4)
  74. // let pointData = this.getClosestPointData(this.charactor.mesh.position)
  75. // let sendData = {
  76. // video: [pointData.id],
  77. // reverse: camera.alpha - cameraAlphaAmend < 0
  78. // }
  79. // window.connection.socket.emit("getPush", sendData)
  80. this.app.cameraController.rotateCamera(camera.alpha - cameraAlphaAmend, -Math.sign(camera.alpha - cameraAlphaAmend), () => {
  81. this.charactorWalkTo(pickinfo.pickedPoint)
  82. })
  83. }
  84. }
  85. }
  86. onBeforeAnimation() {
  87. this.charactor.updateAniTrans()
  88. }
  89. charactorWalkTo(endPoint) {
  90. let currentPath = this.charactor.walkData.pathArr[this.charactor.walkData.currentPoint]
  91. let startPoint = (currentPath && currentPath.point) || this.charactor.mesh.position
  92. // let sendData = {
  93. // startId: this.getClosestPointData(startPoint).id, // todo
  94. // endId: this.getClosestPointData(endPoint).id, // todo
  95. // dir: this.getVideoDirecNum()
  96. // }
  97. let sendData = {
  98. sceneCode: settings.sceneCode,
  99. roomId: settings.roomId,
  100. userId: settings.userId,
  101. s_location: {
  102. x: -startPoint.x,
  103. y: startPoint.y,
  104. z: startPoint.z,
  105. },
  106. e_location: {
  107. x: -endPoint.x,
  108. y: endPoint.y,
  109. z: endPoint.z,
  110. }
  111. }
  112. window.connection.socket.emit("getRoute", sendData);
  113. console.log("[3D] send(getRoute): ", sendData)
  114. }
  115. getClosestPointData(vec) {
  116. let ueVec = {x: vec.x, y: vec.z, z: vec.y}
  117. let closestPoint = { data: null, length: 99999 }
  118. this.pointsData.forEach( data => {
  119. let length = common.getLengthBetweenVec3(ueVec, data.position)
  120. if(length < closestPoint.length) {
  121. closestPoint.data = data
  122. closestPoint.length = length
  123. }
  124. })
  125. return closestPoint.data
  126. }
  127. getVideoDirecNum() {
  128. // 视频逆时针旋转
  129. let num = Math.round(this.app.cameraController.camera.alpha % (Math.PI * 2) / (Math.PI / 4))
  130. if(num <= 0) {
  131. return -num
  132. } else {
  133. return 8 - num
  134. }
  135. }
  136. }