Alignment.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. import * as THREE from "../../../../libs/three.js/build/three.module.js";
  2. import SplitScreen4Views from "../../utils/SplitScreen4Views.js"
  3. import math from "../../utils/math.js"
  4. import History from "../../utils/History.js"
  5. var Alignment = {
  6. SplitScreen: SplitScreen4Views,
  7. handleState:null, //操作状态 'translate'|'rotate'
  8. bus: new THREE.EventDispatcher(),
  9. /* prepareRecord : true,
  10. writeToHistory(pointclouds){
  11. if(!this.prepareRecord)return;
  12. this.prepareRecord = false
  13. let content = this.getTemp(pointclouds)
  14. this.history.writeIn(content)
  15. },
  16. undo(){//撤销一步
  17. let last = this.history.pop();
  18. last && last.forEach(item=>{
  19. this.applyTemp(item)
  20. })
  21. }, */
  22. applyTemp(item){
  23. var pointcloud = viewer.scene.pointclouds.find(p=>p.dataset_id+p.name == item.sid)
  24. pointcloud.orientationUser = item.orientationUser
  25. pointcloud.translateUser = item.translateUser
  26. this.setMatrix( pointcloud )
  27. },
  28. getTemp(pointclouds){//记录最近一次保存后的状态,便于恢复
  29. pointclouds = pointclouds || viewer.scene.pointclouds
  30. return pointclouds.map(e=>{
  31. return {
  32. sid : e.dataset_id+e.name,
  33. orientationUser : e.orientationUser,
  34. translateUser : e.translateUser.clone(),
  35. }
  36. } )
  37. },
  38. init:function(){
  39. let transfromInfo
  40. this.history = new History({
  41. applyData: (data)=>{
  42. data.forEach(item=>{
  43. Alignment.applyTemp(item)
  44. })
  45. return true
  46. },
  47. getData:(pointclouds)=>{
  48. return Alignment.getTemp(pointclouds)
  49. }
  50. })
  51. viewer.fpControls.addEventListener("transformPointcloud",(e)=>{
  52. if(e.pointclouds[0].dataset_id == Potree.settings.originDatasetId){//禁止手动移动初始数据集
  53. return this.bus.dispatchEvent('forbitMoveOriginDataset')
  54. }
  55. this.history.beforeChange(e.pointclouds)
  56. //this.writeToHistory( e.pointclouds )
  57. if(!transfromInfo){
  58. transfromInfo = {pointclouds:e.pointclouds}
  59. }
  60. if(this.handleState == 'translate'){
  61. e.pointclouds.forEach(cloud=>Alignment.translate(cloud, e.moveVec))
  62. }else if(this.handleState == 'rotate'){
  63. if(Potree.settings.editType == 'pano'){
  64. //旋转中心是intersectStart的版本
  65. /* let center = e.intersectStart //旋转中心是mousedown的位置
  66. if(e.intersect.equals(center))return
  67. if(!transfromInfo){
  68. transfromInfo = {
  69. orientationUser : e.pointclouds[0].orientationUser,
  70. //vecStart : e.moveVec, // 首次移动向量 只有八个方向,精度太小,所以延迟
  71. pointclouds: e.pointclouds
  72. }
  73. this.bus.dispatchEvent({type:'rotateStart', startPoint:center})
  74. return
  75. }else if(!transfromInfo.vecStart){
  76. let vec = new THREE.Vector3().subVectors(e.intersect, center).setZ(0)
  77. if(vec.length() * e.camera.zoom > 30){ //在屏幕上距离初始点有一定距离后开始算
  78. //console.log('moveVec',vec)
  79. transfromInfo.vecStart = vec
  80. } */
  81. let center = e.pointclouds[0].translateUser //旋转中心是第一个点云的位置
  82. if(e.intersect.equals(center))return
  83. if(!transfromInfo.vecStart){
  84. transfromInfo.orientationUser = e.pointclouds[0].orientationUser
  85. transfromInfo.vecStart = new THREE.Vector3().subVectors(e.intersectStart, center).setZ(0)
  86. }else{
  87. let vec = new THREE.Vector3().subVectors(e.intersect, center).setZ(0)
  88. let angle = math.getAngle(transfromInfo.vecStart,vec,'z')
  89. let diffAngle = transfromInfo.orientationUser + angle - transfromInfo.pointclouds[0].orientationUser
  90. transfromInfo.pointclouds.forEach(cloud=>{
  91. /* let centerNoTranfrom = Potree.Utils.datasetPosTransform({ toDataset: true, pointcloud:cloud, position: center }) //中心点在数据集中的位置
  92. Alignment.rotate(cloud, null, diffAngle)
  93. let centerNow = Potree.Utils.datasetPosTransform({ fromDataset: true, pointcloud:cloud, position: centerNoTranfrom }) //中心点的现在位置
  94. let shift = new THREE.Vector3().subVectors( center, centerNow); //偏移量
  95. Alignment.translate(cloud,shift) //使center还保留在原位
  96. //let centerNow1 = Potree.Utils.datasetPosTransform({ fromDataset: true, pointcloud:transfromInfo.pointcloud, position: centerNoTranfrom }) //中心点的现在位置
  97. */
  98. Alignment.rotateAround(center, cloud, null, diffAngle)
  99. })
  100. }
  101. //this.bus.dispatchEvent({type:'rotate', endPoint: e.intersect})
  102. }else{
  103. let center = e.pointclouds[0].translateUser //移动到的位置就是中心
  104. if(e.intersect.equals(center))return
  105. if(!transfromInfo.vecStart){
  106. transfromInfo.orientationUser = e.pointclouds[0].orientationUser
  107. transfromInfo.vecStart = new THREE.Vector3().subVectors(e.intersectStart, center).setZ(0)
  108. }else{
  109. let vec = new THREE.Vector3().subVectors(e.intersect, center).setZ(0)
  110. let angle = math.getAngle(transfromInfo.vecStart,vec,'z')
  111. let diffAngle = transfromInfo.orientationUser + angle - transfromInfo.pointclouds[0].orientationUser
  112. Alignment.rotate(transfromInfo.pointclouds[0], null, diffAngle)
  113. }
  114. }
  115. }
  116. })
  117. viewer.fpControls.addEventListener("end",(e)=>{
  118. transfromInfo && this.history.afterChange(transfromInfo.pointclouds )
  119. transfromInfo = null
  120. })
  121. // cursor:
  122. let updateCursor = (e)=>{
  123. if(e.drag || !this.editing)return //仅在鼠标不按下时更新:
  124. let handleState = Alignment.handleState
  125. if(e.hoverViewport.alignment && handleState && e.hoverViewport.alignment[handleState]){
  126. if(handleState == 'translate'){
  127. if( e.intersect && e.intersect.location ){
  128. viewer.dispatchEvent({
  129. type : "CursorChange", action : "add", name:"movePointcloud"
  130. })
  131. }else{
  132. viewer.dispatchEvent({
  133. type : "CursorChange", action : "remove", name:"movePointcloud"
  134. })
  135. }
  136. }else if(handleState == 'rotate'){
  137. if( e.intersect && e.intersect.location ){
  138. viewer.dispatchEvent({
  139. type : "CursorChange", action : "add", name:"rotatePointcloud"
  140. })
  141. }else{
  142. viewer.dispatchEvent({
  143. type : "CursorChange", action : "remove", name:"rotatePointcloud"
  144. })
  145. }
  146. }
  147. }else{
  148. //清空:
  149. viewer.dispatchEvent({
  150. type : "CursorChange", action : "remove", name:"movePointcloud"
  151. })
  152. viewer.dispatchEvent({
  153. type : "CursorChange", action : "remove", name:"rotatePointcloud"
  154. })
  155. }
  156. }
  157. viewer.addEventListener('global_mousemove',updateCursor)
  158. viewer.addEventListener('global_drop',updateCursor)//拖拽结束
  159. viewer.addEventListener('updateModelBound', (e)=>{
  160. if(this.editing){
  161. this.SplitScreen.updateCameraOutOfModel()
  162. }
  163. })
  164. },
  165. setMatrix : function(pointcloud){
  166. var vec1 = pointcloud.position //position为数据集内部的偏移,在navvis中对应的是dataset.pointCloudSceneNode的children[0].position
  167. var vec2 = pointcloud.translateUser
  168. var angle = pointcloud.orientationUser
  169. var pos1Matrix = new THREE.Matrix4().setPosition(vec1);//先移动到点云本身应该在的初始位置(在4dkk里和其他应用中都是在这个位置的,也能和漫游点对应上)
  170. var rotMatrix = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0,1,0), angle)//再旋转
  171. var pos2Matrix = new THREE.Matrix4().setPosition(vec2);//最后是平移
  172. var matrix = new THREE.Matrix4().multiplyMatrices(pos2Matrix, rotMatrix);
  173. pointcloud.transformMatrix = matrix.clone();//为该数据集的变化矩阵。 对应navvis的m2w_
  174. pointcloud.transformInvMatrix.copy(pointcloud.transformMatrix).invert()
  175. pointcloud.rotateMatrix = rotMatrix
  176. pointcloud.rotateInvMatrix.copy(rotMatrix).invert()
  177. pointcloud.panos.forEach(e=>e.transformByPointcloud())
  178. matrix = new THREE.Matrix4().multiplyMatrices(matrix, pos1Matrix);
  179. //matrix.premultiply(viewer.scene.scene.matrix);////////////////////////add
  180. pointcloud.matrix = matrix;
  181. //pointcloud.matrixWorldNeedsUpdate = true //更新matrixWorld (非计算,直接赋值)
  182. pointcloud.updateMatrixWorld(true)
  183. if(this.editing){
  184. Alignment.changeCallBack && Alignment.changeCallBack();
  185. }
  186. if(pointcloud.spriteNodeRoot){
  187. pointcloud.spriteNodeRoot.matrixWorld.copy(pointcloud.matrixWorld)//.multiplyMatrices(pointcloud.matrixWorld, pointcloud.matrixWorld);
  188. }
  189. viewer.boundNeedUpdate = true
  190. //pointcloud.updateBound()
  191. pointcloud.getPanosBound()
  192. viewer.dispatchEvent('content_changed')
  193. },
  194. rotateAround(center, pointcloud, deg, angle){//绕center点转动
  195. var angle = angle != void 0 ? angle : THREE.Math.degToRad(deg)
  196. let vec1 = new THREE.Vector3().subVectors(pointcloud.translateUser, center);
  197. let rotMatrix = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0,0,1), angle)
  198. let vec2 = vec1.clone().applyMatrix4(rotMatrix) //将到旋转中心的偏差也转动
  199. let vec3 = new THREE.Vector3().subVectors(vec2,vec1); //这个就是多出来的一步translateUser
  200. this.rotate(pointcloud, deg, angle)
  201. this.translate(pointcloud, vec3)
  202. //绕点转动就是比普通转动多一步移动到相对center的某个位置。 1 初始点云移动到自己的position; 2 移动一个vec1 3绕原点旋转 4再移动一个原本的translateUser。 绘制出来后发现移动量就是第二步vec旋转后的偏移
  203. },
  204. rotate:function(pointcloud, deg, angle){//绕各自中心转动(各自的position) 假设点云位移position后0,0,0就是它的中心了(根据navvis观察这样做是绕同一个点旋转的)
  205. var angle = angle != void 0 ? angle : THREE.Math.degToRad(deg) //正逆负顺
  206. pointcloud.orientationUser += angle
  207. Alignment.setMatrix(pointcloud)
  208. },
  209. translate:function(pointcloud, vec){
  210. pointcloud.translateUser.add(vec)
  211. Alignment.setMatrix(pointcloud)
  212. },
  213. enter:function(){
  214. //this.saveTemp()
  215. this.originData = this.getTemp()
  216. this.SplitScreen.split({alignment:true})
  217. /* viewer.images360.panos.forEach(pano=>{
  218. Potree.Utils.updateVisible(pano.mapMarker, 'split4Screens', false)
  219. }) */
  220. viewer.viewports.find(e=>e.name == 'mapViewport').alignment = {rotate:true,translate:true};
  221. viewer.viewports.find(e=>e.name == 'right').alignment = {translate:true, translateVec:new THREE.Vector3(0,0,1)}; //只能上下移动
  222. viewer.viewports.find(e=>e.name == 'back').alignment = {translate:true, translateVec:new THREE.Vector3(0,0,1)}; //只能上下移动
  223. this.editing = true
  224. viewer.updateFpVisiDatasets()
  225. },
  226. leave:function(){
  227. this.switchHandle(null)
  228. /* this.originData.forEach(e=>{//恢复
  229. var pointcloud = viewer.scene.pointclouds.find(p=>p.dataset_id == e.id)
  230. this.translate(pointcloud, new THREE.Vector3().subVectors(e.translateUser , pointcloud.translateUser))
  231. this.rotate(pointcloud, null, e.orientationUser - pointcloud.orientationUser)
  232. }) */
  233. this.originData.forEach(e=>{//恢复
  234. this.applyTemp(e)
  235. })
  236. this.SplitScreen.recover()
  237. /* viewer.images360.panos.forEach(pano=>{
  238. Potree.Utils.updateVisible(pano.mapMarker, 'split4Screens', true)
  239. }) */
  240. this.editing = false
  241. this.history.clear()
  242. viewer.updateFpVisiDatasets()
  243. viewer.dispatchEvent({
  244. type : "CursorChange", action : "remove", name:"movePointcloud"
  245. })
  246. viewer.dispatchEvent({
  247. type : "CursorChange", action : "remove", name:"rotatePointcloud"
  248. })
  249. }
  250. ,
  251. switchHandle:function(state){
  252. this.handleState = state
  253. //清空:
  254. viewer.dispatchEvent({
  255. type : "CursorChange", action : "remove", name:"movePointcloud"
  256. })
  257. viewer.dispatchEvent({
  258. type : "CursorChange", action : "remove", name:"rotatePointcloud"
  259. })
  260. this.bus.dispatchEvent({type:'switchHandle' , state })
  261. },
  262. save: function(){//保存所有数据集的位置和旋转
  263. let callback = ()=>{//保存成功后
  264. this.originData = this.getTemp() //this.saveTemp();
  265. //需要修改 测量线的position。漫游点已经实时修改了
  266. viewer.scene.measurements.forEach(e=>e.transformByPointcloud())
  267. viewer.images360.updateCube(viewer.bound)
  268. }
  269. var data = viewer.scene.pointclouds.map(e=>{
  270. let pos = viewer.transform.lonlatToLocal.inverse(e.translateUser.clone())
  271. return {
  272. id: e.dataset_id,
  273. orientation : e.orientationUser,
  274. location:[pos.x, pos.y, pos.z],
  275. //transformMatrix: e.transformMatrix.elements,
  276. }
  277. })
  278. //data = JSON.stringify(data)
  279. //test: 退出后保留结果
  280. if(!Potree.settings.isOfficial){
  281. callback()
  282. }
  283. return {data, callback}
  284. }
  285. }
  286. /*
  287. 关于控制点:
  288. 两个控制点只能打在同一个数据集上。传输这两个点的4dkk中的本地坐标和经纬度,后台算出该数据集的旋转平移,
  289. 然后其他数据集绕该数据集旋转,并保持相对位置不变。
  290. */
  291. export {Alignment}