ConvertViews.js 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936
  1. import math from './math.js'
  2. let bimViewer
  3. export default class ConvertViews extends THREE.EventDispatcher{
  4. constructor() {
  5. super()
  6. }
  7. bindWithSameFakeType(sourceFakeApp, targetApp){//for mobile 实际只有一个场景,未分屏,和上一个场景相比
  8. let sourceApp = {sceneType: sourceFakeApp.sceneType, fakeApp:sourceFakeApp}
  9. this.createTempApp(targetApp, true)
  10. let convertInfo = this.computeAveDiffLon(sourceFakeApp, targetApp.fakeApp)
  11. sourceApp.sceneName = 'sourceApp'
  12. targetApp.sceneName = 'targetApp'
  13. if(sourceApp.sceneType == 'laser'){
  14. let data = this.computeShift({sourceApp,targetApp, convertInfo}) //因为有点云模式自由移动所以需要计算
  15. convertInfo.convertMatrix = data.convertMatrix
  16. convertInfo.convertMatrixInvert = data.convertMatrixInvert
  17. }
  18. this.syncView(sourceApp, targetApp, convertInfo)
  19. if(sourceApp.sceneType == 'kankan' || sourceFakeApp.viewInfo.isAtPano){
  20. this.flyToPano(targetApp, sourceFakeApp.viewInfo.currentPano,{duration:0})
  21. }
  22. if(sourceApp.sceneType == 'laser'){
  23. targetApp.viewer.mainViewport.view.applyToCamera(targetApp.viewer.mainViewport.camera)//使获得的cameraInfo正确
  24. }else if(sourceApp.sceneType == 'kankan'){
  25. targetApp.app.core.get('Player').cameraControls.activeControl.locked = false //怎么刚加载时lock了
  26. targetApp.app.core.get('Player').update()//cameraControls.activeControl.update() //使获得的cameraInfo正确
  27. }
  28. }
  29. bindWithSameType(sourceApp,targetApp, isSwitchScene){
  30. this.sourceApp = sourceApp
  31. this.targetApp = targetApp
  32. this.createTempApp(sourceApp)
  33. this.createTempApp(targetApp)
  34. this.convertInfo = this.computeAveDiffLon(sourceApp.fakeApp, targetApp.fakeApp)
  35. sourceApp.sceneName = 'sourceApp'
  36. targetApp.sceneName = 'targetApp'
  37. if(sourceApp.sceneType == 'laser'){
  38. {
  39. let data = this.computeShift({sourceApp,targetApp, convertInfo:this.convertInfo}) //因为有点云模式自由移动所以需要计算
  40. this.convertInfo.convertMatrix = data.convertMatrix
  41. this.convertInfo.convertMatrixInvert = data.convertMatrixInvert
  42. }
  43. //只监听左边
  44. let displayMode = (e)=>{
  45. targetApp.Potree.settings.displayMode = e.mode
  46. }
  47. sourceApp.viewer.images360.addEventListener('endChangeMode', displayMode)
  48. let dispose = ()=>{
  49. if(!sourceApp.viewer || !sourceApp.viewer.images360)return
  50. sourceApp.viewer.images360.removeEventListener('endChangeMode', displayMode)
  51. this.removeEventListener('clearBind-sameType',dispose)
  52. }
  53. this.addEventListener('clearBind-sameType',dispose)
  54. }
  55. let bind = (master, customer)=>{ //相互都能带动对方
  56. if(sourceApp.sceneType == 'laser'){
  57. var flyToPano = (e)=>{//同步点位
  58. if(master != this.masterApp )return
  59. let pano = customer.viewer.images360.getPano(e.toPano.pano.id)
  60. if(!pano)return console.error('找不到该e.panoId', e.toPano.pano.id)
  61. customer.viewer.images360.flyToPano({pano} )
  62. }
  63. master.viewer.images360.addEventListener('flyToPano',flyToPano)
  64. var cameraMove = (e)=>{
  65. if(master != this.masterApp || !customer.viewer )return
  66. this.addViewInfo(master)
  67. master.fakeApp.viewInfo.quaternionChanged = e.changeInfo && e.changeInfo.quaternionChanged
  68. this.syncView(master, customer)
  69. }
  70. master.viewer.addEventListener('camera_changed',cameraMove)
  71. var dragEnd = (e)=>{
  72. if(customer.viewer.inputHandler.drag){
  73. customer.viewer.inputHandler.onMouseUp(e) //从一侧拖拽到另一侧松开时,需要执行原先一侧的mouseup
  74. }
  75. }
  76. master.addEventListener('mouseup',dragEnd)
  77. }else if(sourceApp.sceneType == 'kankan'){
  78. var player1 = master.app.core.get('Player')
  79. var player2 = customer.app.core.get('Player')
  80. let this_ = this
  81. var flyToPano = (e)=>{//同步点位
  82. if(master != this_.masterApp )return
  83. let pano = player2.model.panos.index[e.panoId]
  84. if(!pano)return console.error('找不到该e.panoId',e.panoId)
  85. player2.flyToPano({pano} )
  86. }
  87. player1.on("flying.started",flyToPano)
  88. var cameraMove = (e)=>{//暂时只有漫游模式
  89. if(!e.hasChanged.cameraChanged || !customer.app || !customer.app.core)return
  90. this.addViewInfo(master)
  91. this.syncView(master, customer)
  92. }
  93. player1.on("update",cameraMove)
  94. }
  95. let changeMaster = ()=>{
  96. this.masterApp = master //主控方。只有主控方能控制被控方。鼠标操作过mousedown mousewheel等才能认定为主控方
  97. }
  98. let dom = sourceApp.sceneType == 'laser' ? master.viewer.inputHandler.domElement : master.app.core.get('Player').domElement
  99. dom.addEventListener('pointerdown',changeMaster )
  100. dom.addEventListener('mousewheel',changeMaster )
  101. let dispose = ()=>{
  102. if(master.sceneType == 'laser'){
  103. if(!master.viewer )return //master已替换,不用处理
  104. master.viewer.images360.removeEventListener('flyToPano',flyToPano)
  105. master.viewer.removeEventListener('camera_changed',cameraMove)
  106. }else if(master.sceneType == 'kankan'){
  107. player1.off("flying.started",flyToPano)
  108. player1.off("update",cameraMove)
  109. }
  110. master.removeEventListener('mousedown',changeMaster)
  111. master.removeEventListener('mousewheel',changeMaster)
  112. master.removeEventListener('mouseup',dragEnd)
  113. this.removeEventListener('clearBind-sameType',dispose)
  114. }
  115. this.addEventListener('clearBind-sameType',dispose)
  116. }
  117. bind(sourceApp, targetApp)
  118. bind(targetApp, sourceApp)
  119. //切换其中一个场景后同步初始漫游点
  120. if(isSwitchScene){
  121. setTimeout(()=>{
  122. let master = isSwitchScene == 'target' ? sourceApp : targetApp
  123. let customer = isSwitchScene == 'target' ? targetApp : sourceApp
  124. this.masterApp = master
  125. this.addViewInfo(master)
  126. this.syncView(master, customer)
  127. if(master.sceneType == 'laser'){
  128. let pano = master.viewer.images360.nextPano || master.viewer.images360.currentPano
  129. pano && this.flyToPano(customer, pano.id, { duration: 0, callback:()=>{
  130. customer.Potree.settings.displayMode = master.Potree.settings.displayMode
  131. }})
  132. //master.viewer.dispatchEvent({type:'camera_changed',changeInfo:{quaternionChanged:true},viewport:master.viewer.mainViewport }) //朝向位置同步
  133. }else{
  134. //master.app.core.get('Player').emit("update",{ hasChanged:{cameraChanged:true} })//朝向同步
  135. let pano = master.app.core.get('Player').nextPano || master.app.core.get('Player').currentPano
  136. pano && this.flyToPano(customer, pano.id, { duration: 0 })
  137. }
  138. },1)//要延迟,否则角度和pano都不成功
  139. }
  140. this.loaded = true
  141. }
  142. bindFakeWithBim(sourceFakeApp, targetApp, panoData ){// bim和其他类型互转(mobile)
  143. if(!panoData)return
  144. let sourceApp = {sceneType: sourceFakeApp.sceneType, fakeApp:sourceFakeApp}
  145. this.createTempApp(targetApp)
  146. let {sourcePano, targetPano} = this.bimGetPanoData(sourceApp, targetApp, panoData)
  147. let convertAxis = sourceApp.sceneType == 'kankan' ? 'YupToZup' : targetApp.sceneType == 'kankan' ? 'ZupToYup' : null
  148. let convertInfo = this.computeShift({sourcePano, targetPano, convertAxis})
  149. console.log('convertInfo', convertInfo, sourcePano, targetPano)
  150. let selectBestPose = ()=>{
  151. let data = this.getTranPosData(sourceFakeApp.viewInfo, convertInfo )
  152. let panos = targetApp.fakeApp.panos;
  153. let panos2 = panos.sort((a,b)=>{
  154. return data.position.distanceToSquared(a.position) - data.position.distanceToSquared(b.position)
  155. })
  156. let dir = new THREE.Vector3().subVectors( data.target, data.position )
  157. console.log('dir', dir)
  158. let prop = { duration:0,}
  159. if(targetApp.sceneType == 'laser'){
  160. targetApp.viewer.mainViewport.view.direction = dir
  161. }else{
  162. let player = targetApp.app.core.get('Player')
  163. console.log('nearest:', panos2[0].id)
  164. prop.aimDuration = 0
  165. prop.lookAtPoint = new THREE.Vector3().addVectors(panos2[0].position, dir)
  166. }
  167. this.flyToPano(targetApp, panos2[0].id, prop)
  168. }
  169. if(targetApp.sceneType == 'bim'){
  170. bimViewer = targetApp.viewer
  171. bimViewer.getViewer().setTransitionAnimationState(false)
  172. targetApp.CLOUD.GlobalData.WalkRotationSpeed = -0.2 //反向一下
  173. }
  174. //this.syncView(sourceApp, targetApp)
  175. if(targetApp.sceneType == 'bim' /* || this.ifCanChangePos(targetApp) */){
  176. this.syncPosRot(sourceFakeApp.viewInfo, targetApp, convertInfo)
  177. }else if(targetApp.sceneType == 'laser' ){
  178. setTimeout(()=>{//一开始虽然是点云模式,但过后又变成showPano所以是没加载好
  179. if(this.ifCanChangePos(targetApp) ){
  180. this.syncPosRot(sourceFakeApp.viewInfo, targetApp, convertInfo)
  181. }else{
  182. selectBestPose()
  183. }
  184. },1000)
  185. }else{//bim -> 固定点位
  186. selectBestPose()
  187. }
  188. }
  189. bindWithBim(sourceApp, targetApp, panoData ) {
  190. //if (!this.player1.model.panos.list.length || !this.player2.model.panos.list.length) return
  191. if(this.loaded || !targetApp ) return
  192. let needBindEvent = !this.targetApp // 若targetApp存在表明targetApp的dom未换掉,事件还存在
  193. this.createTempApp(sourceApp)
  194. this.createTempApp(targetApp)
  195. let {sourcePano, targetPano} = this.bimGetPanoData(sourceApp, targetApp, panoData)
  196. this.sourceApp = sourceApp
  197. this.targetApp = targetApp
  198. let modelSize = new THREE.Vector3
  199. bimViewer = this.bimViewer = targetApp.viewer
  200. let modelBound = bimViewer.getViewer().modelManager.boundingBox
  201. modelBound.getSize(modelSize)
  202. bimViewer.setNavigationMode(targetApp.Glodon.Bimface.Viewer.NavigationMode3D.Walk)
  203. bimViewer.setFlySpeedRate(THREE.MathUtils.clamp( modelSize.length() / 10, 1, 6)) //会被限制
  204. //bimViewer.getViewer().setWalkSpeedRate(2)
  205. this.sourceDom = sourceApp.sceneType == 'laser' ? this.sourceApp.viewer.inputHandler.domElement : this.sourceApp.app.core.get('Player').domElement
  206. if(targetPano){
  207. bimViewer.getViewer().setTransitionAnimationState(false) //setCameraStatus瞬间变化相机 ,or setCameraAnimation?
  208. var convertAxis = sourceApp.sceneType == 'kankan' && targetApp.sceneType == 'bim' && 'YupToZup'// Y朝上需要转换
  209. this.lastCamStatus = bimViewer.getCameraStatus()
  210. this.convertInfo = this.computeShift({sourcePano, targetPano, convertAxis})
  211. bimViewer.addEventListener('Rendered', (e)=>{//反向改变左侧相机
  212. let info = bimViewer.getCameraStatus()
  213. let poseChanged = !math.closeTo(this.lastCamStatus.position, info.position)
  214. || !math.closeTo(this.lastCamStatus.target, info.target)
  215. || !math.closeTo(this.lastCamStatus.fov, info.fov)
  216. if(poseChanged){
  217. if(this.ifCanChangePos(this.sourceApp)){
  218. this.send(info)
  219. this.lastCamStatus = info
  220. }
  221. }
  222. })
  223. if(needBindEvent){
  224. this.bindCamEvent()
  225. }else{//替换的左侧的,需要使左侧和右侧同步, 其实是左侧要和上一个左侧先同步,再让右侧和左侧同步
  226. this.bindWithSameFakeType(this.lastFakeApp, sourceApp)
  227. }
  228. {
  229. let cameraMove
  230. if(sourceApp.sceneType == 'laser'){
  231. cameraMove = e => {
  232. targetApp && this.syncPosRot(this.getCameraData(sourceApp))
  233. }
  234. sourceApp.viewer.addEventListener('camera_changed', cameraMove)
  235. }else if(sourceApp.sceneType == 'kankan'){
  236. var player = this.sourceApp.app.core.get('Player')
  237. //this.sourceDom = player.domElement
  238. cameraMove = (e)=>{//暂时只有漫游模式
  239. if(!e.hasChanged.cameraChanged2)return
  240. //console.log('cameraMove', this.getCameraData(sourceApp))
  241. this.syncPosRot(this.getCameraData(sourceApp))
  242. }
  243. player.on("update",cameraMove)
  244. }
  245. let dispose = ()=>{
  246. if(sourceApp.sceneType == 'laser'){
  247. //if(!sourceApp.viewer || !sourceApp.viewer.images360)return
  248. sourceApp.viewer.removeEventListener('camera_changed', cameraMove)
  249. }else{
  250. //if(!sourceApp.app || !sourceApp.app.core)return
  251. player.off("update",cameraMove)
  252. }
  253. this.removeEventListener('clearBind-sameType',dispose)
  254. }
  255. this.addEventListener('clearBind-sameType',dispose)
  256. }
  257. /* bimViewer.addEventListener(targetApp.Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded,
  258. ()=>{
  259. this.loaded = true
  260. if(this.firstData){
  261. this.syncPosRot(this.firstData)
  262. }
  263. }
  264. ) */
  265. let data = this.getCameraData(sourceApp)
  266. this.syncPosRot(data)
  267. this.loaded = true
  268. }else{
  269. //分屏 不同步
  270. let data = this.getCameraData(sourceApp)
  271. let camera = bimViewer.getViewer().camera
  272. if(camera.fov != data.fov){
  273. camera.fov = data.fov
  274. camera.updateProjectionMatrix()
  275. }
  276. //补充control
  277. bimViewer.getViewer().animator.setDuration(60)//滚轮缩放时长,原先:1000
  278. let baseSpeed = THREE.MathUtils.clamp( modelSize.length() / 10, 1, 10)
  279. let dom = bimViewer.getDomElement();
  280. dom.addEventListener('mousewheel', e => { //原版滚轮不能缩放,自己加一个
  281. if(e.wheelDelta == 0)return //mac
  282. let info = bimViewer.getCameraStatus()
  283. let dis = modelBound.distanceToPoint(info.position)
  284. let speed = baseSpeed + dis / 8
  285. //console.log('speed', speed)
  286. this.bimFlyTo({forwardDis: e.wheelDelta > 0 ? speed : -speed})
  287. })
  288. //右键pan
  289. let dragging , pointerDelta = new THREE.Vector2, pointerStart = new THREE.Vector2
  290. dom.addEventListener('mousedown', e => {
  291. if(e.button == 2){//右键
  292. dragging = true
  293. pointerStart.set(e.clientX, e.clientY)
  294. }
  295. })
  296. dom.addEventListener('mousemove', e => {
  297. if(!dragging)return
  298. let pointerEnd = new THREE.Vector2(e.clientX, e.clientY)
  299. pointerDelta.subVectors(pointerEnd, pointerStart)
  300. //pointerDelta.multiplyScalar(0.07)
  301. pointerStart.copy(pointerEnd)
  302. bimViewer.getViewer().cameraControl.pan(pointerDelta.x,pointerDelta.y)
  303. })
  304. targetApp.addEventListener('mouseup', e => {
  305. dragging = false
  306. })
  307. this.sourceDom.addEventListener('mouseup', e => {
  308. dragging = false
  309. })
  310. this.addEventListener('globalMouseUp', e => {
  311. dragging = false
  312. })
  313. targetApp.CLOUD.GlobalData.WalkRotationSpeed = -0.2 //反向一下
  314. //bimViewer.viewer.getViewer().editorManager.userInputEditor.enable = true//这句近似将control切换成orbit
  315. }
  316. }
  317. syncPosRot(data, customer, convertInfo ){//同步 自由位置和朝向(不被漫游点束缚时)
  318. /*
  319. if(!this.loaded){
  320. return this.firstData = data
  321. } */
  322. convertInfo = convertInfo || this.convertInfo
  323. let {position,target} = this.getTranPosData(data, convertInfo )
  324. if(customer && customer.sceneType == 'laser'){
  325. this.laserSyncView(customer, {position,target})
  326. }else{
  327. let msg = {
  328. position,
  329. target,
  330. up: new THREE.Vector3(0,0,1),
  331. //前三个缺一不可
  332. fov: data.fov , //fov 用setCameraStatus 无效
  333. }
  334. bimViewer.setCameraStatus(msg)
  335. this.lastCamStatus = msg //记录下来,防止反向传输
  336. let camera = bimViewer.getViewer().camera
  337. if(camera.fov != data.fov){
  338. camera.fov = data.fov
  339. camera.updateProjectionMatrix()
  340. }
  341. }
  342. }
  343. ifCanChangePos(app){
  344. return app.sceneType == 'laser' && app.Potree.settings.displayMode != 'showPanos' //app.fakeApp.viewInfo.displayMode != 'showPanos'
  345. }
  346. send(info){
  347. //let camera = bimViewer.getViewer().camera
  348. let data = this.getTranPosData(info, this.convertInfo, true )
  349. this.laserSyncView(this.sourceApp, data) //左侧只有laser点云模式才能接收到
  350. }
  351. computeAveDiffLon(sourceFakeApp, targetFakeApp) {
  352. //获取两个场景的lon偏差值
  353. //需要点的个数>1, 且两个场景点一一对应,位置接近且顺序一致
  354. let diffLonAve = 0, length,
  355. diffLons = []
  356. let panoPos1 = sourceFakeApp.panos.map(e=>{
  357. return e.position
  358. })
  359. let panoPos2 = targetFakeApp.panos.map(e=>{
  360. return e.position
  361. })
  362. length = panoPos1.length
  363. //挑选连续的两个点为向量来计算,如有123个漫游点,则选取12 23 31作为向量
  364. let index = 0
  365. while (index < length) {
  366. let pos11 = new THREE.Vector3().copy(panoPos1[index])
  367. let pos12 = new THREE.Vector3().copy(panoPos1[(index + 1) % length])
  368. let pos21 = new THREE.Vector3().copy(panoPos2[index])
  369. let pos22 = new THREE.Vector3().copy(panoPos2[(index + 1) % length])
  370. let vec1 = new THREE.Vector3().subVectors(pos11, pos12).setY(0)
  371. let vec2 = new THREE.Vector3().subVectors(pos21, pos22).setY(0)
  372. let diffLon = math.getAngle(vec1, vec2, 'z')
  373. diffLons.push(diffLon)
  374. diffLonAve += diffLon
  375. index++
  376. }
  377. console.log('diffLons', diffLons)
  378. diffLonAve /= length
  379. console.log('diffLonAve', diffLonAve)
  380. let diffQua = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), diffLonAve)
  381. return {
  382. diffLon : diffLonAve,
  383. diffQua ,
  384. diffQuaInvert : diffQua.clone().invert()
  385. }
  386. }
  387. computeShift(o={}/* sourcePano, targetPano */) { //获取两个场景的旋转和位移偏差值
  388. //需要点的个数>1, 且两个场景点一一对应,位置接近且顺序一致
  389. let panoPos1, panoPos2
  390. if(o.sourceApp && o.targetApp && o.sourceApp.sceneType == o.targetApp.sceneType){
  391. var angle = o.convertInfo.diffLon; //直接使用 更精准
  392. panoPos1 = o.sourceApp.fakeApp.panos.map(e=>{
  393. return e.position
  394. })
  395. panoPos2 = o.targetApp.fakeApp.panos.map(e=>{
  396. return e.position
  397. })
  398. }else{
  399. panoPos1 = o.sourcePano.map(e=>e.position) //pick两个点来计算
  400. panoPos2 = o.targetPano.map(e=>e.position)
  401. if(o.convertAxis){
  402. panoPos1 = panoPos1.map(e=>math.convertVector[o.convertAxis](e))
  403. }
  404. var vec1 = new THREE.Vector3().subVectors(panoPos1[0], panoPos1[1]) //旧的向量
  405. var vec2 = new THREE.Vector3().subVectors(panoPos2[0], panoPos2[1])//新的向量
  406. var angle = math.getAngle(vec1, vec2, 'z')
  407. }
  408. //var scale = vec2.length()/vec1.length()
  409. //var scaleMatrix = new THREE.Matrix4().makeScale(scale,scale,scale) //默认为1, 但由于坐标暂时是自己采集的,所以结果会是第一个点附近比较正确,越远偏差越大
  410. var matrix = new THREE.Matrix4().setPosition(panoPos1[0].clone().negate())//先以点0为基准平移到000
  411. //matrix.premultiply(scaleMatrix)//再缩放
  412. var rotateMatrix = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0,0,1), angle );
  413. matrix.premultiply(rotateMatrix)//和旋转
  414. var moveBackMatrix = new THREE.Matrix4().setPosition(panoPos2[0])
  415. matrix.premultiply(moveBackMatrix)//再移动到realPosition的点0处
  416. return { convertMatrix: matrix, convertMatrixInvert:matrix.clone().invert(), convertAxis:o.convertAxis}
  417. }
  418. /*
  419. laser暂时做成这样: 全景模式时不跟踪pos,跟踪pano变化。点云模式时也跟踪pano变化,但移动时完全跟踪位置变化 ,所以会有左边marker在脚下,右边marker不在脚下的情况。
  420. */
  421. getCameraData(app){
  422. if(app.sceneType == 'laser'){
  423. let camera = app.viewer.mainViewport.camera
  424. return {
  425. position: camera.position.clone(),
  426. quaternion: camera.quaternion.clone(),
  427. fov: camera.fov,
  428. }
  429. }else if(app.sceneType == 'kankan'){
  430. let player = app.app.core.get('Player')
  431. return {
  432. position: player.position.clone(),
  433. quaternion: player.quaternion.clone(),
  434. fov: player.zoomFov,
  435. }
  436. }else{
  437. let bimViewer = app.viewer
  438. let info = bimViewer.getCameraStatus();
  439. return {
  440. position: info.position,
  441. target: info.target,
  442. fov: info.fov,
  443. }
  444. }
  445. }
  446. createTempApp(app, addsubInfo){//for mobile
  447. let fakeApp = {
  448. isFake : true, //标志是虚拟的app。每个真实的app都要带一个这个。在移动端如果大的销毁了还有小的
  449. sceneType : app.sceneType
  450. }
  451. if(app.sceneType != 'bim'){
  452. function getPanos(panos){ // only data
  453. return panos.map(e=>{return {id:e.id, position:e.position, quaternion:e.quaternion}})
  454. }
  455. fakeApp.panos = app.sceneType == 'laser' ? getPanos(app.viewer.images360.panos) : getPanos(app.app.core.get('Player').model.panos.list)
  456. }
  457. app.fakeApp = fakeApp
  458. if(addsubInfo){
  459. this.addViewInfo(app)
  460. }
  461. return fakeApp
  462. }
  463. addViewInfo(app){
  464. let viewInfo
  465. let cameraData = this.getCameraData(app)
  466. if(app.sceneType == 'laser'){
  467. let images360 = app.viewer.images360
  468. viewInfo = {
  469. displayMode : app.Potree.settings.displayMode,
  470. currentPano : images360.currentPano && images360.currentPano.id,
  471. isAtPano : images360.isAtPano(),
  472. quaternionChanged : true,
  473. }
  474. }else if(app.sceneType == 'kankan'){
  475. let player = app.app.core.get('Player')
  476. viewInfo = {
  477. currentPano : player.currentPano.id,
  478. lon : player.cameraControls.activeControl.lon,
  479. lat : player.cameraControls.activeControl.lat,
  480. zoomLevel : player.zoomLevel,
  481. }
  482. }else{
  483. viewInfo = {}
  484. }
  485. for(let i in cameraData){
  486. viewInfo[i] = cameraData[i]
  487. }
  488. app.fakeApp.viewInfo = viewInfo
  489. }
  490. /* getPano(app){
  491. return app.sceneType == 'laser' ? app.viewer.images360.getPano(id) : app.app.core.get('Player').panos.index[id]
  492. } */
  493. syncView(master, customer, convertInfo ){//同类型 相当于moveCamera的函数
  494. let fakeApp = master.fakeApp;
  495. convertInfo = convertInfo || this.convertInfo
  496. if(fakeApp.sceneType == 'laser'){
  497. customer.Potree.settings.displayMode = fakeApp.viewInfo.displayMode
  498. if(fakeApp.viewInfo.isAtPano || fakeApp.viewInfo.displayMode == 'showPanos'){ //不改变漫游点,仅转换朝向
  499. if( fakeApp.viewInfo.quaternionChanged){
  500. let diffQua = customer == this.targetApp ? convertInfo.diffQua : convertInfo.diffQuaInvert
  501. let quaternion = fakeApp.viewInfo.quaternion.clone().premultiply(diffQua)
  502. let rotation = new THREE.Euler().setFromQuaternion(quaternion)
  503. customer.viewer.mainViewport.view.rotation = rotation
  504. //console.log('cameraMove',customer == this.targetApp)
  505. }
  506. if(fakeApp.viewInfo.displayMode == 'showPanos' ){
  507. if(customer.viewer.mainViewport.camera.fov != fakeApp.viewInfo.fov){
  508. customer.viewer.mainViewport.camera.fov = fakeApp.viewInfo.fov
  509. customer.viewer.mainViewport.camera.updateProjectionMatrix()
  510. }
  511. }
  512. }else{//转换朝向和位置
  513. this.syncPosRot(fakeApp.viewInfo, customer , convertInfo)
  514. }
  515. }else if(fakeApp.sceneType == 'kankan'){
  516. let player = customer.app.core.get('Player')
  517. let diffLon = THREE.Math.radToDeg(customer == this.sourceApp ? -convertInfo.diffLon : convertInfo.diffLon)
  518. player.cameraControls.controls.panorama.lon = fakeApp.viewInfo.lon + diffLon
  519. player.cameraControls.controls.panorama.lat = fakeApp.viewInfo.lat
  520. if(player.zoomLevel != fakeApp.viewInfo.zoomLevel){
  521. player.zoomTo(fakeApp.viewInfo.zoomLevel)
  522. }
  523. }
  524. }
  525. bimGetPanoData(sourceApp, targetApp, panoData){
  526. if(panoData){
  527. let sourcePano,targetPano
  528. let pano1 = [{position:new THREE.Vector3().copy(panoData.p1.position)},{position:new THREE.Vector3().copy(panoData.p2.position)}]
  529. let getPano2 = (app)=>{
  530. return [app.fakeApp.panos.find(e=>e.id == panoData.p1.id), app.fakeApp.panos.find(e=>e.id == panoData.p2.id)]
  531. }
  532. if(targetApp.sceneType == 'bim'){
  533. targetPano = pano1
  534. sourcePano = getPano2(sourceApp)
  535. }else{
  536. targetPano = getPano2(targetApp)
  537. sourcePano = pano1
  538. }
  539. if( !sourcePano[0] || !sourcePano[1] || !targetPano[0] || !targetPano[1] ){
  540. console.error('!sourcePano[0] || !sourcePano[1] || !targetPano[0] || !targetPano[1]')
  541. }
  542. return {sourcePano, targetPano}
  543. }else return {}
  544. }
  545. getTranPosData(data, convertInfo, ifRevert ){
  546. let position = new THREE.Vector3, target = new THREE.Vector3
  547. if(data.position){
  548. position = new THREE.Vector3().copy(data.position)
  549. }
  550. if(!data.target){
  551. if(data.quaternion){
  552. let dir = new THREE.Vector3(0, 0, -1).applyQuaternion(data.quaternion)
  553. target.copy(position).add(dir)
  554. }
  555. }else{
  556. target.copy(data.target)
  557. }
  558. if(ifRevert){
  559. position.applyMatrix4(convertInfo.convertMatrixInvert)
  560. target.applyMatrix4(convertInfo.convertMatrixInvert)
  561. if(convertInfo.convertAxis){
  562. position = math.convertVector[convertInfo.convertAxis](position)
  563. target = math.convertVector[convertInfo.convertAxis](target)
  564. }
  565. }else{
  566. if(convertInfo.convertAxis){
  567. position = math.convertVector[convertInfo.convertAxis](position)
  568. target = math.convertVector[convertInfo.convertAxis](target)
  569. }
  570. position.applyMatrix4(convertInfo.convertMatrix)
  571. target.applyMatrix4(convertInfo.convertMatrix)
  572. }
  573. return {position, target}
  574. }
  575. bimFlyTo(data){
  576. let info = bimViewer.getCameraStatus()
  577. let dir = new THREE.Vector3().subVectors(info.target, info.position).normalize()
  578. let position = data.position
  579. if(!position){
  580. position = new THREE.Vector3().addVectors(info.position, dir.clone().multiplyScalar(data.forwardDis))//forwardDis:前进距离
  581. }
  582. let target = new THREE.Vector3().addVectors(position, dir)
  583. let msg = {
  584. position,
  585. target,
  586. up: new THREE.Vector3(0,0,1),
  587. //前三个缺一不可
  588. }
  589. bimViewer.setCameraStatus(msg)
  590. }
  591. flyToPano(app, panoId, o={}){
  592. if(app.sceneType == 'laser'){
  593. app.viewer.images360.cancelFlyToPano()
  594. app.viewer.images360.flyToPano(Object.assign({},{
  595. pano: app.viewer.images360.getPano(panoId)
  596. },o))
  597. }else{
  598. let player = app.app.core.get('Player')
  599. player.flyToPano(Object.assign({},{
  600. pano: player.model.panos.index[panoId]
  601. },o))
  602. }
  603. }
  604. laserSyncView(app,data){
  605. app.viewer.mainViewport.view.position.copy(data.position)
  606. app.viewer.mainViewport.view.lookAt(data.target)
  607. }
  608. lockCamera(locked){//禁止操作改变相机
  609. this.locked = locked
  610. this.updateCtrlEnable()
  611. }
  612. setPanoMode(state){
  613. this.isPanoMode = state
  614. this.updateCtrlEnable()
  615. }
  616. updateCtrlEnable(){
  617. this.bimViewer.camera3D.enableRotate(this.locked ? false : true)
  618. this.bimViewer.enableShortcutKey((this.locked || this.isPanoMode) ? false : true) //键盘移动
  619. }
  620. bindCamEvent(){//传递到另一边的dom
  621. this.lockCamera(true)
  622. /* this.targetApp.addEventListener(this.targetApp.Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,(e)=>{
  623. console.log('MouseClicked',e)
  624. }); */
  625. let dom1 = this.bimViewer.getDomElement()
  626. let getEvent = (type, e)=>{
  627. let clientWidth1 = this.sourceDom.clientWidth
  628. let clientHeight1 = this.sourceDom.clientHeight
  629. let clientWidth2 = dom1.clientWidth
  630. let clientHeight2 = dom1.clientHeight
  631. return new MouseEvent(type, {
  632. bubbles: false,//?
  633. cancelable: true,
  634. view: this.sourceApp,
  635. /* clientX: e.clientX,
  636. clientY: e.clientY, */
  637. clientX: clientWidth1 * e.clientX / clientWidth2 , //鼠标在右屏的比例的左屏的相同,针对右屏全屏等左右不对称的情况
  638. clientY: clientHeight1 * e.clientY / clientHeight2,
  639. button: e.button, buttons: e.buttons, which: e.which,
  640. altKey: e.altKey, ctrlKey: e.ctrlKey, shiftKey:e.shiftKey, metaKey: e.metaKey,
  641. detail:e.detail,
  642. //target : dom2
  643. });
  644. }
  645. //let pointerDownPos = new THREE.Vector2
  646. dom1.addEventListener('mousedown',(e)=>{
  647. let event = getEvent('mousedown', e)
  648. this.sourceApp && this.sourceDom.dispatchEvent(event)
  649. //pointerDownPos.set(e.clientX,e.clientY)
  650. })
  651. dom1.addEventListener('mousemove',(e)=>{
  652. let event = getEvent('mousemove', e)
  653. this.sourceApp && this.sourceDom.dispatchEvent(event)
  654. })
  655. dom1.addEventListener('mouseup',(e)=>{
  656. if(!this.sourceApp)return
  657. let event = getEvent('mouseup', e)
  658. event.unableClick = true //最好禁止右侧点击行走。否则和点击效果冲突
  659. if(this.sourceApp.sceneType == 'laser'){
  660. this.sourceApp.dispatchEvent(event) //mouseup 在laser中加在window上的
  661. }else{
  662. let player = this.sourceApp.app.core.get('Player')
  663. player.mouseCouldBeClickToMove = false //dont click
  664. this.sourceDom.dispatchEvent(event)
  665. }
  666. })
  667. dom1.addEventListener('mousewheel',(e)=>{
  668. let event = getEvent('mousewheel', e)
  669. event.wheelDelta = e.wheelDelta //wheelDelta没法在getEvent参数中赋值
  670. this.sourceApp && this.sourceDom.dispatchEvent(event)
  671. })
  672. let stop = (e)=>{ //drag到另一边时停止旋转, 防止转到另一边
  673. let event = getEvent('mouseup', e)
  674. this.sourceApp && this.sourceApp.dispatchEvent(event)
  675. }
  676. dom1.addEventListener('mouseout',stop)
  677. dom1.addEventListener('mouseover',stop)
  678. }
  679. clear(o={}){
  680. this.loaded = false;
  681. if(o.dontClearTarget){
  682. if(this.sourceApp){
  683. this.lastFakeApp = this.sourceApp.fakeApp //记住当前左屏
  684. this.addViewInfo(this.sourceApp)
  685. }
  686. }else{
  687. this.targetApp = null
  688. this.lastFakeApp = null
  689. }
  690. this.sourceApp = null;
  691. this.dispatchEvent({type:'clearBind-sameType'})
  692. window.Log('clear done')
  693. }
  694. }
  695. /*
  696. note:
  697. 旋转只能通过target设置, 不能直接改camera.quaternion
  698. 当且仅当发送方相机属性变化后才传递过来,就不在这里判断是否变化了。
  699. (所以只需要实时检测相机是否改变, hasChanged后发送)
  700. */