potree-sdk/src/custom/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 {TransformControls} from "../../objects/tool/TransformControls.js";
import CursorDeal from "../../utils/CursorDeal.js";


var Alignment = {
    SplitScreen: SplitScreen4Views, 
    handleState:null,  //操作状态 'translate'|'rotate'
    bus: new THREE.EventDispatcher(), 
    selectedClouds:[],
    

    /* prepareRecord : true, 
    
      writeToHistory(pointclouds){ 
        if(!this.prepareRecord)return;
        this.prepareRecord = false
        
        let content = this.getTemp(pointclouds)
        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 : typeof(e.orientationUser) == 'number' ? e.orientationUser : e.orientationUser.clone() ,
                translateUser : e.translateUser.clone(),
            }
        } )
    },
     
     
    getDatasetQuaternion(pointcloud){
        let quaternion
        if(typeof(pointcloud.orientationUser) == 'number' ){
            quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,0,1), pointcloud.orientationUser)     
        }else{ 
            quaternion = pointcloud.orientationUser
        }
        return quaternion
    },
    getDatasetOrient(pointcloud){
        let orientation
        if(typeof(pointcloud.orientationUser) == 'number' ){
            orientation = pointcloud.orientationUser
        }else{ 
            orientation = math.getYawPitchByQua(pointcloud.orientationUser)
        }
        return orientation
    },
    
    
    init:function(){ 
        let transfromInfo, sideRotHovered
        
        
        
        
        this.history = new History({ 
            applyData: (data)=>{    
                data.forEach(item=>{
                    Alignment.applyTemp(item)  
                }) 
                return true
            },
            getData:(pointclouds)=>{ 
                return Alignment.getTemp(pointclouds)
            } 
        })
        
        
        {//侧视图旋转
            this.transformControls = new TransformControls(viewer.mainViewport.camera, viewer.renderArea,{
                //dontHideWhenFaceCamera: true,
                rotFullCircle:true
            }) 
            this.transformControls.name = 'Alignment-transformControls'
            this.transformControls.setSize(0.5)
            viewer.scene.scene.add(this.transformControls) 
            this.transformControls.setMode('rotate')
            this.transformControls.setRotateMethod(2)
            this.transformControls._gizmo.hideAxis =  {rotate:['x','z','y'] } 
            this.fakeMarkerForTran = new THREE.Mesh(new THREE.BoxBufferGeometry(0.3,0.3,0.3) , new THREE.MeshBasicMaterial({
                color:"#F00",  opacity:0.9,  transparent:true, visible:false
            }));//一个看不见的mesh，只是为了让transformControls移动点云
            this.fakeMarkerForTran.name = 'fakeMarkerForTran'
            viewer.scene.scene.add(this.fakeMarkerForTran)
            
            let afterMoveCtl = (type)=>{
                if(Alignment.afterMoveCtl){
                    Alignment.afterMoveCtl(type)
                }else{
                    if(type == 'position'){
                        let moveVec = new THREE.Vector3().subVectors(this.fakeMarkerForTran.position, this.fakeMarkerForTran.oldState.position)
                        Alignment.translate(this.selectedClouds[0], moveVec)
                    }else{
                        let center = this.selectedClouds[0].translateUser;
                        
                        let diffQua = new THREE.Quaternion().multiplyQuaternions(this.fakeMarkerForTran.quaternion, this.fakeMarkerForTran.oldState.quaternion.clone().invert())
                        CursorDeal.add('rotatePointcloud') 
                        //Alignment.rotateAround(center, this.selectedClouds, diffQua)
                        Alignment.rotate(this.selectedClouds[0], null, diffQua)
                        
                    }
                }
                
                this.fakeMarkerForTran.oldState = {
                    position: this.fakeMarkerForTran.position.clone(),
                    quaternion: this.fakeMarkerForTran.quaternion.clone(),
                }
             
                Alignment.history.beforeChange(this.selectedClouds) 
                
            }
        
         
            this.fakeMarkerForTran.addEventListener('position_changed', afterMoveCtl.bind(this,'position')) 
            this.fakeMarkerForTran.addEventListener("rotation_changed", afterMoveCtl.bind(this,'rotation') )
          
            this.transformControls.addEventListener('mouseUp',()=>{
                 Alignment.history.afterChange(this.selectedClouds)
            }) 
            this.transformControls.addEventListener('axisHoveredChange',(e)=>{
                if(e.axis && e.mode == 'rotate'){
                    CursorDeal.add('rotatePointcloud'),
                    sideRotHovered = true
                }else{
                    CursorDeal.remove('rotatePointcloud') 
                    sideRotHovered = false
                } 
            })
            this.history.addEventListener('undo',()=>{
                this.updateFakeMarker()
            })
             
            
        }
        
        viewer.fpControls.addEventListener("transformPointcloud",(e)=>{ 
            if(e.pointclouds[0].dataset_id == Potree.settings.originDatasetId && Potree.settings.editType != 'pano'){//禁止手动移动初始数据集
                return this.bus.dispatchEvent('forbitMoveOriginDataset') 
            }
            
                             
            this.history.beforeChange(e.pointclouds)    
            //this.writeToHistory( e.pointclouds ) 
              
            if(!transfromInfo){  
                transfromInfo = {pointclouds:e.pointclouds}
            }
            
            
            if(this.handleState == 'translate'){
                e.pointclouds.forEach(cloud=>Alignment.translate(cloud, e.moveVec))
                //this.updateFakeMarker()
                
            }else if(this.handleState == 'rotate'){
                //if(Potree.settings.editType == 'pano'){  
                    //旋转中心是intersectStart的版本
                    /* let center = e.intersectStart //旋转中心是mousedown的位置
                    if(e.intersect.equals(center))return
                    if(!transfromInfo){  
                        transfromInfo = {
                            orientationUser : e.pointclouds[0].orientationUser,
                            //vecStart : e.moveVec, // 首次移动向量 只有八个方向，精度太小，所以延迟 
                            pointclouds: e.pointclouds
                        } 
                        this.bus.dispatchEvent({type:'rotateStart', startPoint:center})
                        return
                    }else if(!transfromInfo.vecStart){  
                        let vec = new THREE.Vector3().subVectors(e.intersect, center).setZ(0)
                        if(vec.length() * e.camera.zoom >  30){  //在屏幕上距离初始点有一定距离后开始算
                            //console.log('moveVec',vec)
                            transfromInfo.vecStart = vec
                        } */ 
                   
                     
                    let center = e.pointclouds[0].translateUser //旋转中心是第一个点云的位置  
                    if(e.intersect.equals(center))return
                    if(!transfromInfo.vecStart){  
                        //transfromInfo.orientationUser = e.pointclouds[0].orientationUser  
                        transfromInfo.vecStart = new THREE.Vector3().subVectors(e.intersectStart, center).setZ(0)  
                        transfromInfo.lastQua = new THREE.Quaternion()   
                    }else{ 
                    
                        let vec = new THREE.Vector3().subVectors(e.intersect, center).setZ(0)
                        let angle = math.getAngle(transfromInfo.vecStart,vec,'z')   
                        //let diffAngle = transfromInfo.orientationUser + angle - transfromInfo.pointclouds[0].orientationUser
                        
                        let diffQuaFromStart = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,0,1), angle)   
                        let diffQua = new THREE.Quaternion().multiplyQuaternions(diffQuaFromStart, transfromInfo.lastQua.clone().invert())
                        
                        transfromInfo.lastQua.copy(diffQuaFromStart)
                        transfromInfo.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:transfromInfo.pointcloud, position: centerNoTranfrom }) //中心点的现在位置
                                 */ 
                                 
                            Alignment.rotateAround(center, cloud, diffQua)    
                                
                                 
                        }) 
                        
                        
                    }
                    //this.bus.dispatchEvent({type:'rotate', endPoint: e.intersect})
                    
                /* }else{ //旧版数据集校准只转z轴
                    let center = e.pointclouds[0].translateUser //移动到的位置就是中心
                    if(e.intersect.equals(center))return
                    if(!transfromInfo.vecStart){  
                        transfromInfo.orientationUser = e.pointclouds[0].orientationUser
                        transfromInfo.vecStart = new THREE.Vector3().subVectors(e.intersectStart, center).setZ(0)  
                    }else{ 
                        let vec = new THREE.Vector3().subVectors(e.intersect, center).setZ(0)
                        let angle = math.getAngle(transfromInfo.vecStart,vec,'z')   
                        let diffAngle = transfromInfo.orientationUser + angle - transfromInfo.pointclouds[0].orientationUser
                        Alignment.rotate(transfromInfo.pointclouds[0], null, diffAngle)
                    }
                }  */   
            } 
        })
        
        
        viewer.fpControls.addEventListener("end",(e)=>{   
            transfromInfo && this.history.afterChange(transfromInfo.pointclouds )
            transfromInfo = null 
        })
        
        
		 
        
        // 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 ){  
                        CursorDeal.add('movePointcloud')  
                    }else{
                        CursorDeal.remove('movePointcloud')  
                    }
                }else if(handleState == 'rotate'){ 
                    if( e.intersect && e.intersect.location ){  
                        CursorDeal.add('rotatePointcloud')  
                    }else{ 
                        CursorDeal.remove('rotatePointcloud')  
                    }
                }  
            }else{  
                //清空：
                CursorDeal.remove('movePointcloud')  
                if(!sideRotHovered) CursorDeal.remove('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 pos1Matrix = new THREE.Matrix4().setPosition(vec1);//先移动到点云本身应该在的初始位置（在4dkk里和其他应用中都是在这个位置的，也能和漫游点对应上）
         
        var rotMatrix = typeof(pointcloud.orientationUser ) == 'number' ?  //再旋转 
                        new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0,0,1), pointcloud.orientationUser ) :
                        new THREE.Matrix4().makeRotationFromQuaternion(pointcloud.orientationUser)
                        
        var pos2Matrix = new THREE.Matrix4().setPosition(vec2);//最后是平移
         
        var matrix = new THREE.Matrix4().multiplyMatrices(pos2Matrix, rotMatrix);
        pointcloud.transformMatrix = matrix.clone();//为该数据集的变化矩阵。 对应navvis的m2w_
        pointcloud.transformInvMatrix.copy(pointcloud.transformMatrix).invert() 
        
        pointcloud.rotateMatrix = rotMatrix
        pointcloud.rotateInvMatrix.copy(rotMatrix).invert()
        
        
        pointcloud.panos.forEach(e=>e.transformByPointcloud())
        
        
        matrix = new THREE.Matrix4().multiplyMatrices(matrix, pos1Matrix);
        
        //matrix.premultiply(viewer.scene.scene.matrix);////////////////////////add
        
        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.boundNeedUpdate = true
        //pointcloud.updateBound()
        pointcloud.getPanosBound()  
        viewer.dispatchEvent('content_changed') 

    },
    
    
    rotateAround(center, pointcloud, angle, axis){//绕center点水平转动
        
        let vec1 = new THREE.Vector3().subVectors(pointcloud.translateUser, center);
        let rotMatrix = typeof(angle) == 'number' ? 
                        new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0,0,1), angle) :  
                        new THREE.Matrix4().makeRotationFromQuaternion(angle)
         
        let vec2 = vec1.clone().applyMatrix4(rotMatrix) //将到旋转中心的偏差也转动
        let vec3 = new THREE.Vector3().subVectors(vec2,vec1); //这个就是多出来的一步translateUser
        this.rotate(pointcloud, null, angle) 
        this.translate(pointcloud, vec3)
        //绕点转动就是比普通转动多一步移动到相对center的某个位置。 1 初始点云移动到自己的position； 2 移动一个vec1  3绕原点旋转 4再移动一个原本的translateUser。 绘制出来后发现移动量就是第二步vec旋转后的偏移
    },
    
    
    rotate:function(pointcloud, deg, angle, axis){//绕各自中心水平转动（各自的position）   假设点云位移position后0,0,0就是它的中心了（根据navvis观察这样做是绕同一个点旋转的）
        let qua 
        
        if(deg || typeof(angle) == 'number'){
            angle = angle != void 0 ? angle : THREE.Math.degToRad(deg)   //正逆负顺             
        }else if(angle instanceof Array){//when init
            qua = new THREE.Quaternion().fromArray(angle)
        }else{
            qua = angle
        }
        
        if(typeof(pointcloud.orientationUser) == 'number' ){
            //pointcloud.orientationUser += angle
            pointcloud.orientationUser = this.getDatasetQuaternion(pointcloud)
        } 
        
        if(!qua){
            qua = new THREE.Quaternion().setFromAxisAngle(axis || new THREE.Vector3(0,0,1), angle)     
        } 
        pointcloud.orientationUser.premultiply(qua)
         
        //新版全部使用qua
        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=>{
            Potree.Utils.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, translateVec:new THREE.Vector3(0,0,1)}; //只能上下移动
        viewer.viewports.find(e=>e.name == 'back').alignment = {translate:true, translateVec:new THREE.Vector3(0,0,1)}; //只能上下移动
        viewer.viewports.forEach(e=>{
            if(e.name == 'right' || e.name == 'back' ){
                e.layersAdd('sideVisi') 
                /* if(e.name == 'right') e.layersAdd('layer1') 
                else if(e.name == 'back') e.layersAdd('layer2')  */
            }  
        })
        Potree.Utils.setObjectLayers(this.transformControls, 'sideVisi' )
        /* Potree.Utils.setObjectLayers(this.transformControls, 'layer1' )
        Potree.Utils.setObjectLayers(this.transformControls, 'layer2' ) */
         
        { 
            /* viewer.viewports.forEach(e=>{
                let oldFun = e.beforeRender 
                e.beforeRender = function(){
                    oldFun.bind(this)()
                    if(e.name == 'right'){
                        Alignment.transformControls._gizmo.hideAxis =  {rotate:['e','z','y'] }  
                    }else if(e.name == 'back'){
                        Alignment.transformControls._gizmo.hideAxis =  {rotate:['e','z','x'] }  
                    }
                }
                 
            }) */
            /* viewer.viewports.find(e=>e.name == 'right').beforeRender = function(){
                oldFun.bind(this)()
                if(this.name == right)
                
            }
            viewer.viewports.find(e=>e.name == 'back').beforeRender = (e)=>{
                old2()
                this.transformControls._gizmo.hideAxis =  {rotate:['e','z','x'] }  
            }  */  
        }
         
        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=>{
            Potree.Utils.updateVisible(pano.mapMarker, 'split4Screens', true)
        })  */
        this.editing = false
        this.history.clear() 
        viewer.updateFpVisiDatasets()
        CursorDeal.remove('movePointcloud')  
        CursorDeal.remove('rotatePointcloud') 

    } 
    
    ,
    switchHandle:function(state){
        console.log('switchHandle',state)
        this.handleState = state
        //清空： 
        CursorDeal.remove('movePointcloud') 
        CursorDeal.remove('rotatePointcloud') 
        this.bus.dispatchEvent({type:'switchHandle' , state })
        
        this.updateCtlDisplay() 

    },
    
    updateCtlDisplay(){//仅数据集校准执行
        if(!this.editing)return  
        let selected = this.handleState == 'rotate' && this.selectedClouds.length > 0
        if(selected){
            this.updateFakeMarker()
        }else{
            this.transformControls.detach()
        }
    },
    
    updateFakeMarker(){
        this.transformControls.attach(this.fakeMarkerForTran)
  
        let position = this.selectedClouds[0].translateUser
        let quaternion = this.getDatasetQuaternion(this.selectedClouds[0])
        this.fakeMarkerForTran.position.copy(position)
        this.fakeMarkerForTran.quaternion.copy(quaternion)
        this.fakeMarkerForTran.oldState = {
            position: position.clone(),
            quaternion: quaternion.clone() 
        }
    }
    ,
    save: function(){//保存所有数据集的位置和旋转
        let callback = ()=>{//保存成功后
            this.originData = this.getTemp()   //this.saveTemp();
            //需要修改 测量线的position。漫游点已经实时修改了
            
            viewer.scene.measurements.forEach(e=>e.transformByPointcloud())
            viewer.images360.updateCube(viewer.bound)
        }
        
        let initialPointcloud = viewer.scene.pointclouds.find(e=>e.dataset_id == Potree.settings.originDatasetId)
        var data = viewer.scene.pointclouds.map(e=>{
            let pos = viewer.transform.lonlatToLocal.inverse(e.translateUser.clone())
            let data = {
                id: e.dataset_id,
                quaternion: this.getDatasetQuaternion(e).toArray(),
                orientation : this.getDatasetOrient(e).yaw,
                location:[pos.x, pos.y, pos.z + initialPointcloud.datasetData.location[2]],
                //transformMatrix: e.transformMatrix.elements,
            }
             
            return data
        })
        //data = JSON.stringify(data)
        
        //test: 退出后保留结果
        if(!Potree.settings.isOfficial){
            callback() 
        }
        
        return {data, callback}
    }
        
    
}


                                  
                        
                            
 
  
 
/* 

关于控制点：

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





关于cloud.js
tightBoundingBox规定了整个点云应该放置后的边界范围。  boundingBox则是在其基础上变为正方体。
为了达成这个目标，需要将点云进行位移。在没有位移前，点云boundingBox的min是0,0,0（如果没出错的话）
所以要令min变为tightBoundingBox.min， 需要将点云position设置为 tightBoundingBox.min 。
设置完以后整体点云的旋转中心为0,0,0。如果不出错的话0,0,0大概在点云中央附近。

在添加经纬度信息后，非初始数据集又会有一个位置偏移，其旋转中心也跟着一起偏移，如偏移了 1,0,0，则旋转中心就是 1,0,0

 
但是，有的cloud.js的tightBoundingBox使用的是大地坐标，需要转成普通值


 */
 

export {Alignment}