import math from './math.js' export default class ConvertViews extends THREE.EventDispatcher{ constructor() { super() this.sourceApp = null this.targetApp = null } clear(o={}){ this.loaded = false; this.sourceApp = null; if(!o.dontClearTarget){ this.targetApp = null } } init(sourceApp, targetApp, sourceDom, sceneType, cameraData, sourcePano) { //if (!this.player1.model.panos.list.length || !this.player2.model.panos.list.length) return if(this.loaded || !targetApp ) return let needBindEvent = !this.targetApp // 若targetApp存在表明targetApp的dom未换掉,事件还存在 this.sourceApp = sourceApp this.targetApp = targetApp this.sourceDom = sourceDom let viewer = this.viewer = targetApp.viewer this.needConvertAxis = sceneType == '4dkk' this.lastCamStatus = viewer.getCameraStatus() this.computeAveDiffLon(sourcePano) viewer.setNavigationMode(targetApp.Glodon.Bimface.Viewer.NavigationMode3D.Walk) viewer.setFlySpeedRate(5) viewer.getViewer().setTransitionAnimationState(false) //setCameraStatus瞬间变化相机 viewer.addEventListener('Rendered', (e)=>{ let info = viewer.getCameraStatus() let poseChanged = !math.closeTo(this.lastCamStatus.position, info.position) || !math.closeTo(this.lastCamStatus.target, info.target) || !math.closeTo(this.lastCamStatus.fov, info.fov) if(poseChanged){ if(sourceApp.canChangePos()){ this.send(info) this.lastCamStatus = info } } }) /* viewer.addEventListener(targetApp.Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, ()=>{ this.loaded = true if(this.firstData){ this.receive(this.firstData) } } ) */ this.loaded = true this.receive(cameraData) needBindEvent && this.bindCamEvent() } bindCamEvent(){//传递到另一边的dom this.lockCamera(true) let getEvent = (type, e)=>{ return new MouseEvent(type, { bubbles: false,//? cancelable: true, view: this.sourceApp, clientX: e.clientX, clientY: e.clientY, button: e.button, buttons: e.buttons, which: e.which, altKey: e.altKey, ctrlKey: e.ctrlKey, shiftKey:e.shiftKey, metaKey: e.metaKey, detail:e.detail, //target : dom2 }); } let dom1 = this.viewer.getDomElement() dom1.addEventListener('mousedown',(e)=>{ let event = getEvent('mousedown', e) this.sourceDom.dispatchEvent(event) }) dom1.addEventListener('mousemove',(e)=>{ let event = getEvent('mousemove', e) this.sourceDom.dispatchEvent(event) }) dom1.addEventListener('mouseup',(e)=>{ let event = getEvent('mouseup', e) this.sourceApp.dispatchEvent(event) //mouseup 在laser中加在window上的 }) dom1.addEventListener('mousewheel',(e)=>{ let event = getEvent('mousewheel', e) event.wheelDelta = e.wheelDelta //wheelDelta没法在getEvent参数中赋值 this.sourceDom.dispatchEvent(event) }) let stop = (e)=>{ //drag到另一边时停止旋转, 防止转到另一边 let event = getEvent('mouseup', e) this.sourceApp.dispatchEvent(event) } dom1.addEventListener('mouseout',stop) dom1.addEventListener('mouseover',stop) } receive(data){ if(!this.loaded){ return this.firstData = data } /* if(this.isMaster){ return //正在操作当前,不接收 } */ let position = new THREE.Vector3, target = new THREE.Vector3 let currStatus = this.viewer.getCameraStatus() if(data.position){ position = new THREE.Vector3().copy(data.position) } if(!data.target){ if(data.quaternion){ /* if(this.needConvertAxis){ data.quaternion = math.convertQuaternion.YupToZup(data.quaternion) } */ let dir = new THREE.Vector3(0, 0, -1).applyQuaternion(data.quaternion) //dir.applyQuaternion(this.diffQuaternion)/////! target.copy(position).add(dir) } }else{ if(this.needConvertAxis){ target = math.convertVector.YupToZup(target) }else{ target.copy(data.target) } } if(this.needConvertAxis){ position = math.convertVector.YupToZup(position) target = math.convertVector.YupToZup(target) } position.applyMatrix4(this.convertMatrix) target.applyMatrix4(this.convertMatrix) let msg = { position, target, up: new THREE.Vector3(0,0,1), //前三个缺一不可 fov: data.fov , //fov 用setCameraStatus 无效 } this.viewer.setCameraStatus(msg) this.lastCamStatus = msg //记录下来,防止反向传输 let camera = this.viewer.getViewer().camera if(camera.fov != data.fov){ camera.fov = data.fov camera.updateProjectionMatrix() } //fov, near, far /* aspect: 0.7879440258342304 coordinateSystem: "world" far: 11485.989363357028 fov: 45 name: "persp" near: 1.1852000000072447 position: {x: -1130.0432094639486, y: -6058.569138159733, z: 2265.9284566100446} target: {x: 310.3968263091223, y: -66.0595010237127, z: 1477.7045866099475} up: {x: 0, y: 1.534753124827774e-13, z: 1} version: 1 zoom: 0 */ } send(info){ let camera = this.viewer.getViewer().camera let data = { position : new THREE.Vector3().copy(info.position).applyMatrix4(this.convertMatrixInvert), //quaternion : camera.quaternion.clone().applyMatrix4(this.convertMatrix), target : new THREE.Vector3().copy(info.target).applyMatrix4(this.convertMatrixInvert), } if(this.needConvertAxis){ data.position = math.convertVector.ZupToYup(data.position) data.target = math.convertVector.ZupToYup(data.target) } this.dispatchEvent({ type: 'sendCameraData', data }) } computeAveDiffLon(sourcePano) { //获取两个场景的lon偏差值 //需要点的个数>1, 且两个场景点一一对应,位置接近且顺序一致 //pick两个点来计算 let diffLonAve = 0, diffLons = [] /* let panoPos1 = [//4dkk SS-t-lc5OWhZPaC new THREE.Vector3( 2.1985836955069153, -0.7253820937020852, -0.01348725), new THREE.Vector3( 4.07288387528266, 1.8350265362839944, 0.04772775) ] */ let panoPos1 = sourcePano let panoPos2 = [ new THREE.Vector3( -5.313605730801787, -4.889868407960505, 1.237447893355817), new THREE.Vector3( -5.337403524084278, -2.5012228235167737, 1.2808838933558175) ] let length = panoPos1.length if(this.needConvertAxis){ panoPos1 = panoPos1.map(e=>math.convertVector.YupToZup(e)) } var vec1 = new THREE.Vector3().subVectors(panoPos1[0], panoPos1[1]) //旧的向量 var vec2 = new THREE.Vector3().subVectors(panoPos2[0], panoPos2[1])//新的向量 var angle = math.getAngle(vec1, vec2, 'z') //var scale = vec2.length()/vec1.length() //var scaleMatrix = new THREE.Matrix4().makeScale(scale,scale,scale) //默认为1, 但由于坐标暂时是自己采集的,所以结果会是第一个点附近比较正确,越远偏差越大 var matrix = new THREE.Matrix4().setPosition(panoPos1[0].clone().negate())//先以点0为基准平移到000 //matrix.premultiply(scaleMatrix)//再缩放 var rotateMatrix = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0,0,1), angle ); matrix.premultiply(rotateMatrix)//和旋转 var moveBackMatrix = new THREE.Matrix4().setPosition(panoPos2[0]) matrix.premultiply(moveBackMatrix)//再移动到realPosition的点0处 this.convertMatrix = matrix this.convertMatrixInvert = matrix.clone().invert() /* var pos = panoPos1.map(e=>{ return e.clone().applyMatrix4(matrix) }) console.log(pos) */ //挑选连续的两个点为向量来计算,如有123个漫游点,则选取12 23 31作为向量 /* let index = 0 while (index < length) { let pos11 = new THREE.Vector3().copy(panoPos1[index]) let pos12 = new THREE.Vector3().copy(panoPos1[(index + 1) % length]) let pos21 = new THREE.Vector3().copy(panoPos2[index]) let pos22 = new THREE.Vector3().copy(panoPos2[(index + 1) % length]) let vec1 = new THREE.Vector3().subVectors(pos11, pos12).setZ(0) let vec2 = new THREE.Vector3().subVectors(pos21, pos22).setZ(0) let diffLon = math.getAngle(vec1, vec2, 'z') diffLons.push(diffLon) diffLonAve += diffLon index++ } console.log('diffLons', diffLons) diffLonAve /= length console.log('diffLonAve', diffLonAve) this.diffQuaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), diffLonAve) this.diffQuaternionInvert = this.diffQuaternion.clone().invert() */ } lockCamera(locked){ this.locked = locked this.updateCtrlEnable() } setPanoMode(state){ this.isPanoMode = state this.updateCtrlEnable() } updateCtrlEnable(){ this.viewer.camera3D.enableRotate(this.locked ? false : true) this.viewer.enableShortcutKey((this.locked || this.isPanoMode) ? false : true) //键盘移动 } /* applyDiff(app) { //sourcePlayer -> targetPlayer if (!this.player1 || !this.player2 || this.targetApp.config.num == this.sourceApp.config.num) return //场景码相同的话返回 if (this.player1.mode != this.player2.mode) return let player1, player2, quaternion //player1为要改变的, player2是参照 if (app == this.sourceApp) { player1 = this.player1 player2 = this.player2 quaternion = this.diffQuaternion } else { player1 = this.player2 player2 = this.player1 quaternion = this.diffQuaternionInvert } let control1 = player1.cameraControls.activeControl let control2 = player2.cameraControls.activeControl //if(!control1 || !control2)return player1.quaternion.copy(player2.quaternion).premultiply(quaternion) if (player1.mode == 'panorama') { //平移 let dir = new this.KanKan.THREE.Vector3().subVectors(control2.target, player2.position) dir.applyQuaternion(quaternion) let target1 = new this.KanKan.THREE.Vector3().addVectors(player1.position, dir) control1.lookAt(target1) control1.target.copy(target1) } else if (control2) { //修改target,保证target在panos之间的相对位置一样 //console.log('target', control2.target.clone()) //console.log('position', control2.target.clone()) let vec = new this.KanKan.THREE.Vector3().subVectors(control2.target, player2.model.panos.list[0].position) vec.applyQuaternion(quaternion) control1.target.addVectors(player1.model.panos.list[0].position, vec) player1.target.copy(control1.target) //修改position,保证方向一样 let dir = new this.KanKan.THREE.Vector3().subVectors(control2.camera.position , control2.target) dir.applyQuaternion(quaternion) player1.position = new this.KanKan.THREE.Vector3().addVectors(control1.target, dir) control1.camera.position.copy(player1.position) } control1.camera.quaternion.copy(player1.quaternion) } */ /* applyDiff(app, data) { //sourcePlayer -> targetPlayer let quaternion if (data.quaternion) { quaternion = new this.KanKan.THREE.Quaternion().copy(data.quaternion) data.quaternion = quaternion } else if (data.info && data.info.quaternion) { //飞出 quaternion = new this.KanKan.THREE.Quaternion(data.info.quaternion._x, data.info.quaternion._y, data.info.quaternion._z, data.info.quaternion._w) data.info.quaternion = quaternion //let radius = data.info.position.distanceTo(data.info.target) } if (!quaternion) return if (app == this.sourceApp) { quaternion.premultiply(this.diffQuaternionInvert) } else { quaternion.premultiply(this.diffQuaternion) } if (data.info && data.info.quaternion) { //飞出 let dir = new this.KanKan.THREE.Vector3().subVectors(data.info.position, data.info.target) dir.applyQuaternion(app == this.sourceApp ? this.diffQuaternionInvert : this.diffQuaternion) data.info.position = new this.KanKan.THREE.Vector3().addVectors(data.info.target, dir) } //先不管飞出后的位置平移 //位置参照第一个漫游点。保持相机相对第一个漫游点的位移和 } */ }