potree-sdk/src/modules/datasetAlignment/Alignment.js

import * as THREE from "../../../libs/three.js/build/three.module.js";
import SplitScreen4Views from "../../utils/SplitScreen4Views.js"
import math from "../../utils/math.js"
import History from "../../utils/History.js"
import { EventDispatcher } from "../../EventDispatcher.js";

var Alignment = {
    SplitScreen: SplitScreen4Views, 
    handleState:null,  //操作状态 'translate'|'rotate'
    bus: new EventDispatcher(), 
    
    prepareRecord : true, 
    
    writeToHistory(content){ 
        if(!this.prepareRecord)return;
        this.prepareRecord = false
        this.history.writeIn(content)
    },
    
    
    /* undo(){//撤销一步 
        let last = this.history.pop();
        last && last.forEach(item=>{
            this.applyTemp(item)  
        })
        
    },  */ 
    
    applyTemp(item){ 
        var pointcloud = viewer.scene.pointclouds.find(p=>p.dataset_id+p.name == item.sid)
            pointcloud.orientationUser = item.orientationUser
            pointcloud.translateUser = item.translateUser
            this.setMatrix( pointcloud )
    },
    getTemp(pointclouds){//记录最近一次保存后的状态，便于恢复
        pointclouds = pointclouds || viewer.scene.pointclouds
        return pointclouds.map(e=>{
            return {
                sid : e.dataset_id+e.name,
                orientationUser : e.orientationUser,
                translateUser : e.translateUser.clone(),
            }
        } )
    },
    
    
    
    init:function(){ 
        let rotateInfo   
        
        viewer.fpControls.addEventListener("transformPointcloud",(e)=>{ 
            if(e.pointclouds[0].dataset_id == Potree.settings.originDatasetId){//禁止手动移动初始数据集
                return this.bus.dispatchEvent('forbitMoveOriginDataset') 
            }
            
            
            this.writeToHistory(this.getTemp(e.pointclouds) ) 
             
            
            
            
        
            if(this.handleState == 'translate'){
                e.pointclouds.forEach(cloud=>Alignment.translate(cloud, e.moveVec))
                
                
            }else if(this.handleState == 'rotate'){
                if(Potree.settings.editType == 'pano'){
                    
                    let center = e.intersectStart //旋转中心是mousedown的位置
                    if(e.intersect.equals(center))return
                    if(!rotateInfo){  
                        rotateInfo = {
                            orientationUser : e.pointclouds[0].orientationUser,
                            //vecStart : e.moveVec, // 首次移动向量 只有八个方向，精度太小，所以延迟 
                            pointclouds: e.pointclouds
                        } 
                        this.bus.dispatchEvent({type:'rotateStart', startPoint:center})
                        return
                    }else if(!rotateInfo.vecStart){  
                        let vec = new THREE.Vector3().subVectors(e.intersect, center).setZ(0)
                        if(vec.length() * e.camera.zoom >  30){  //在屏幕上距离初始点有一定距离后开始算
                            //console.log('moveVec',vec)
                            rotateInfo.vecStart = vec
                        }
                    }else{
                        
                        let vec = new THREE.Vector3().subVectors(e.intersect, center).setZ(0)
                        let angle = math.getAngle(rotateInfo.vecStart,vec,'z')   
                        let diffAngle = rotateInfo.orientationUser + angle - rotateInfo.pointclouds[0].orientationUser
                        
                        rotateInfo.pointclouds.forEach(cloud=>{
                            
                           /*  let centerNoTranfrom = Potree.Utils.datasetPosTransform({ toDataset: true, pointcloud:cloud, position: center }) //中心点在数据集中的位置
                            Alignment.rotate(cloud, null, diffAngle)
                             
                            let centerNow = Potree.Utils.datasetPosTransform({ fromDataset: true, pointcloud:cloud, position: centerNoTranfrom }) //中心点的现在位置
                            let shift = new THREE.Vector3().subVectors( center, centerNow); //偏移量
                            Alignment.translate(cloud,shift)   //使center还保留在原位
                            //let centerNow1 = Potree.Utils.datasetPosTransform({ fromDataset: true, pointcloud:rotateInfo.pointcloud, position: centerNoTranfrom }) //中心点的现在位置
                                 */
                                 
                            Alignment.rotateAround(center, cloud, null, diffAngle)   
                                
                                 
                        })
                        
                        
                    }
                    this.bus.dispatchEvent({type:'rotate', endPoint: e.intersect})
                    
                }else{ 
                    let center = e.pointclouds[0].translateUser //移动到的位置就是中心
                    if(e.intersect.equals(center))return
                    if(!rotateInfo){  
                        rotateInfo = {
                            orientationUser : e.pointclouds[0].orientationUser,
                            vecStart : new THREE.Vector3().subVectors(e.intersectStart, center).setZ(0),
                            //pointclouds: e.pointclouds
                            pointcloud: e.pointclouds[0]
                        }  
                    }else{ 
                        let vec = new THREE.Vector3().subVectors(e.intersect, center).setZ(0)
                        let angle = math.getAngle(rotateInfo.vecStart,vec,'z')   
                        let diffAngle = rotateInfo.orientationUser + angle - rotateInfo.pointcloud.orientationUser
                        Alignment.rotate(rotateInfo.pointcloud, null, diffAngle)
                    }
                }    
            } 
        })
        
        
        viewer.fpControls.addEventListener("end",(e)=>{ 
            rotateInfo = null 
            this.prepareRecord = true
        })
        
        viewer.inputHandler.addEventListener('keydown',e=>{ 
            if(e.keyCode == 90 && e.event.ctrlKey){//Z
                this.history.undo()
            } 
        })  
		 
        
        // cursor:
        
        let updateCursor = (e)=>{ 
            if(e.drag || !this.editing)return  //仅在鼠标不按下时更新：
            
            let handleState = Alignment.handleState
            
            if(e.hoverViewport.alignment && handleState && e.hoverViewport.alignment[handleState]){
                if(handleState == 'translate'){
                    if( e.intersect && e.intersect.location ){ 
                        viewer.dispatchEvent({
                            type : "CursorChange", action : "add",  name:"movePointcloud"
                        })
                    }else{
                        viewer.dispatchEvent({
                            type : "CursorChange", action : "remove",  name:"movePointcloud"
                        })
                    }
                }else if(handleState == 'rotate'){ 
                    if( e.intersect && e.intersect.location ){ 
                        viewer.dispatchEvent({
                            type : "CursorChange", action : "add",  name:"rotatePointcloud"
                        })
                    }else{
                        viewer.dispatchEvent({
                            type : "CursorChange", action : "remove",  name:"rotatePointcloud"
                        })
                    }
                }  
            }else{
                //清空：
                viewer.dispatchEvent({
                    type : "CursorChange", action : "remove",  name:"movePointcloud" 
                })
                viewer.dispatchEvent({
                    type : "CursorChange", action : "remove",  name:"rotatePointcloud" 
                })
            }                
        }
        
         
        viewer.addEventListener('global_mousemove',updateCursor)  
        viewer.addEventListener('global_drop',updateCursor)//拖拽结束  
       
            
        
        
        viewer.addEventListener('updateModelBound', (e)=>{
            if(this.editing){
                this.SplitScreen.updateCameraOutOfModel() 
            } 
        })
        
        
    },
    
    
    setMatrix :  function(pointcloud){
        var vec1 = pointcloud.position     //position为数据集内部的偏移，在navvis中对应的是dataset.pointCloudSceneNode的children[0].position
        var vec2 = pointcloud.translateUser
        var angle = pointcloud.orientationUser
        var pos1Matrix = new THREE.Matrix4().setPosition(vec1);//先移动到点云本身应该在的初始位置（在4dkk里和其他应用中都是在这个位置的，也能和漫游点对应上）
        var rotMatrix = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0,0,1), angle)//再旋转 
        var pos2Matrix = new THREE.Matrix4().setPosition(vec2);//最后是平移
         
        var matrix = new THREE.Matrix4().multiplyMatrices(pos2Matrix, rotMatrix);
        pointcloud.transformMatrix = matrix.clone();//为该数据集的变化矩阵。 对应navvis的m2w_
        pointcloud.transformInvMatrix.copy(matrix).invert()
        pointcloud.rotateMatrix = rotMatrix
        pointcloud.rotateInvMatrix.copy(rotMatrix).invert()
        
        
        pointcloud.panos.forEach(e=>e.transformByPointcloud())
        
        
        matrix = new THREE.Matrix4().multiplyMatrices(matrix, pos1Matrix);
        
        
        
        pointcloud.matrix = matrix;
        //pointcloud.matrixWorldNeedsUpdate = true //更新matrixWorld (非计算，直接赋值）
        pointcloud.updateMatrixWorld(true)
        
        if(this.editing){
            Alignment.changeCallBack && Alignment.changeCallBack();
        } 
        
        if(pointcloud.spriteNodeRoot){
            pointcloud.spriteNodeRoot.matrixWorld.copy(pointcloud.matrixWorld)//.multiplyMatrices(pointcloud.matrixWorld, pointcloud.matrixWorld);	
        } 

        viewer.updateModelBound();
        //pointcloud.updateBound()
        pointcloud.getPanosBound()  
        

    },
    
    
    rotateAround(center, pointcloud, deg, angle){//绕center点转动
        var angle = angle != void 0 ? angle : THREE.Math.degToRad(deg) 
        let vec1 = new THREE.Vector3().subVectors(pointcloud.translateUser, center);
        let rotMatrix = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0,0,1), angle)
        let vec2 = vec1.clone().applyMatrix4(rotMatrix) //将到旋转中心的偏差也转动
        let vec3 = new THREE.Vector3().subVectors(vec2,vec1); //这个就是多出来的一步translateUser
        this.rotate(pointcloud, deg, angle) 
        this.translate(pointcloud, vec3)
        //绕点转动就是比普通转动多一步移动到相对center的某个位置。 1 初始点云移动到自己的position； 2 移动一个vec1  3绕原点旋转 4再移动一个原本的translateUser。 绘制出来后发现移动量就是第二步vec旋转后的偏移
    },
    
    
    rotate:function(pointcloud, deg, angle){//绕各自中心转动（各自的position）   假设点云位移position后0,0,0就是它的中心了（根据navvis观察这样做是绕同一个点旋转的）
        var angle = angle != void 0 ? angle : THREE.Math.degToRad(deg)   //正逆负顺
        pointcloud.orientationUser += angle
        Alignment.setMatrix(pointcloud)
    },
    translate:function(pointcloud, vec){
        pointcloud.translateUser.add(vec)
        Alignment.setMatrix(pointcloud)
    },
    
    
    
    
    enter:function(){
        //this.saveTemp()  
        this.originData = this.getTemp() 
        
        this.SplitScreen.split({alignment:true})
         
        viewer.images360.panos.forEach(pano=>{
            viewer.updateVisible(pano.mapMarker, 'split4Screens', false)
        }) 
        
        viewer.viewports.find(e=>e.name == 'mapViewport').alignment = {rotate:true,translate:true};
        viewer.viewports.find(e=>e.name == 'right').alignment = {translate:true};
        viewer.viewports.find(e=>e.name == 'back').alignment = {translate:true};
        
        
        this.editing = true
        
        viewer.updateFpVisiDatasets()
        
        
        
    },
    leave:function(){
        this.switchHandle(null)
        
        /* this.originData.forEach(e=>{//恢复
            var pointcloud = viewer.scene.pointclouds.find(p=>p.dataset_id == e.id)
            this.translate(pointcloud, new THREE.Vector3().subVectors(e.translateUser , pointcloud.translateUser))
            this.rotate(pointcloud, null, e.orientationUser - pointcloud.orientationUser)
        }) */
        this.originData.forEach(e=>{//恢复
            this.applyTemp(e)
        })
        
        
        this.SplitScreen.recover()
        viewer.images360.panos.forEach(pano=>{
            viewer.updateVisible(pano.mapMarker, 'split4Screens', true)
        }) 
        this.editing = false
        this.history.clear() 
        viewer.updateFpVisiDatasets()
        viewer.dispatchEvent({
            type : "CursorChange", action : "remove",  name:"movePointcloud" 
        })
        viewer.dispatchEvent({
            type : "CursorChange", action : "remove",  name:"rotatePointcloud" 
        })
    } 
    
    ,
    switchHandle:function(state){
        this.handleState = state
        //清空：
        viewer.dispatchEvent({
            type : "CursorChange", action : "remove",  name:"movePointcloud" 
        })
        viewer.dispatchEvent({
            type : "CursorChange", action : "remove",  name:"rotatePointcloud" 
        })
        
        this.bus.dispatchEvent({type:'switchHandle' , state })
        
        

    },
    
    
    save: function(){//保存所有数据集的位置和旋转
        let callback = ()=>{//保存成功后
            this.originData = this.getTemp()   //this.saveTemp();
            //需要修改 测量线的position。漫游点已经实时修改了
            
            viewer.scene.measurements.forEach(e=>e.transformByPointcloud())
            viewer.images360.updateCube(viewer.bound)
        }
        
        var data = viewer.scene.pointclouds.map(e=>{
            let pos = viewer.transform.lonlatToLocal.inverse(e.translateUser.clone())
            
            
            return {
                id: e.dataset_id,
                orientation : e.orientationUser,
                location:[pos.x, pos.y, pos.z],
                //transformMatrix: e.transformMatrix.elements,
            }
        })
        //data = JSON.stringify(data)
        
        //test: 退出后保留结果
        if(!Potree.settings.isOfficial){
            callback() 
        }
        
        return {data, callback}
    }
        
    
}


Alignment.history = new History({ 
    callback: (data)=>{ 
        data.forEach(item=>{
            Alignment.applyTemp(item)  
        }) 
    } 
})

/* 

关于控制点：

两个控制点只能打在同一个数据集上。传输这两个点的4dkk中的本地坐标和经纬度，后台算出该数据集的旋转平移，
然后其他数据集绕该数据集旋转，并保持相对位置不变。


 */
 

export {Alignment}