import * as THREE from "../../../libs/three.js/build/three.module.js"; import {transitions, easing, lerp} from '../../utils/transitions.js' import TileUtils from './tile/TileUtils' import { PanoRendererEvents, PanoramaEvents, PanoSizeClass} from '../../defines' import math from '../../utils/math' import {TextSprite} from '../../objects/TextSprite' var texLoader = new THREE.TextureLoader() const labelProp = { sizeInfo: {minSize : 200 , maxSize : 250, nearBound : 0.8, farBound : 10}, backgroundColor:{r: 255, g: 255, b: 255, a: 0.4 }, textColor:{r: 0, g: 0, b: 0, a: 1 }, borderRadius: 15, renderOrder:10 } let standardMarkerMat let getMarerMat = function(){ if(!standardMarkerMat) { let map = texLoader.load( Potree.resourcePath+'/textures/marker.png' ) map.anisotropy = 4 // 各向异性过滤 .防止倾斜模糊 standardMarkerMat = new THREE.MeshBasicMaterial({opacity:0.7, side: THREE.DoubleSide , map ,transparent:true, depthTest:false})//总是被点云遮住，所以depthTest:false } return standardMarkerMat.clone() } //显示全景图时marker没有被遮挡，如果需要，要换成depthBasicMaterial 或者直接把skybox的深度修改（拿到深度贴图后更如此） let planeGeo = new THREE.PlaneBufferGeometry(0.2,0.2); let sg = new THREE.SphereGeometry(0.1, 8, 8); let smHovered = new THREE.MeshBasicMaterial({/* side: THREE.BackSide, */color: 0xff0000}); let sm = new THREE.MeshBasicMaterial({/* side: THREE.BackSide */}); var rot90 = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,0,1), Math.PI/2 ); //使用的是刚好适合全景图的，给cube贴图需要转90° //var rot90 = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0), -Math.PI/2 ); //4dkk->navvis //var rot901 = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,1,0), -Math.PI/2 ); //整张球幕图要旋转下 //rot90 = new THREE.Quaternion().multiplyQuaternions( rot901, rot90) var old = null; /* 转成四维看看的axis： var a = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,0,1), THREE.Math.degToRad(-90)) 因为四维的要绕y转90 这里的quaternion.multiply(a); 先乘再换顺序 w : q.w, x:q.x , y:-q.z, z:q.y */ //暂时直接用4dkkconsole输出的数据 class Panorama extends THREE.EventDispatcher{ constructor(o, transform, images360){//file, time, longitude, latitude, altitude, course, pitch, roll super() this.id = o.id; this.images360 = images360 this.transform = transform this.visible = true //for viewer updateVisible this.enabled = true//是否可以走 this.originPosition = new THREE.Vector3().fromArray(o.dataset_location) this.originFloorPosition = new THREE.Vector3().fromArray(o.dataset_floor_location) this.originID = parseInt(o.file_id)//"file_id":"00022"对应是原本的4dkk的id --来自vision.txt this.pointcloud = viewer.scene.pointclouds.find(e=>e.dataset_id == o.dataset_id) || viewer.scene.pointclouds[0] this.pointcloud.panos.push(this) /* this.pointcloud.addEventListener('isVisible',(e)=>{ var visible = viewer.getObjVisiByReason(this.pointcloud, 'datasetSelection') console.log('datasetVisi', visible) viewer.updateVisible(this, 'pointcloudVisi', visible) //e.reason == 'datasetSelection' && viewer.updateVisible(this, 'pointcloudVisi', e.visible) }) */ this.addEventListener('isVisible',(e)=>{//是否显示该点的mesh(不显示也能走） this.marker.visible = e.visible Potree.settings.showPanoMesh && (this.mesh.visible = e.visible) if(e.reason == 'screenshot' || e.visible){ this.label && (this.label.visible = e.visible)//截图时隐藏下 } }) //全景图和Cube的水平采样起始坐标相差90度 /* if(from4dkk){ var qua = o.dataset_orientation var quaternion = new THREE.Quaternion().fromArray(qua) quaternion = new THREE.Quaternion().multiplyQuaternions(quaternion, rot901);//整张球幕图要旋转下 因为在4dkk里转过，还原。如果是tiles的不用 this.quaternion = new THREE.Quaternion(quaternion.x, -quaternion.z, quaternion.y, quaternion.w) //转化坐标 }else{ */ var qua = o.dataset_orientation qua = [qua[1], qua[2], qua[3], qua[0]] this.quaternion = new THREE.Quaternion().fromArray(qua) this.quaternion4dkk = math.convertVisionQuaternion(this.quaternion)//4dkk内使用的quaternion this.quaternion = new THREE.Quaternion().multiplyQuaternions(this.quaternion, rot90);//全景图和Cube的水平采样起始坐标相差90度，cubeTex转90度 this.rotation4dkk = new THREE.Euler().setFromQuaternion(this.quaternion4dkk) this.rotation = new THREE.Euler().setFromQuaternion(this.quaternion) //} //this.quaternion1 = Potree.Utils.QuaternionFactory.fromArray(o.dataset_orientation) //同quaternion //let xy = this.transform.forward([this.longitude, this.latitude]); this.file = `https://4dkk.4dage.com/images/images${Potree.settings.number}/pan/high/${this.id}.jpg` this.build() this.transformByPointcloud() //初始化位移 {//tile this.minimumTiledPanoLoaded = !1; this.highestPartialTileRenderOpCompleted = 0; this.highestFullTileRenderOpCompleted = 0; this.shouldRedrawOnBaseLoaded = !1; this.resolutionPromise = {} this.tiledPanoRenderTarget = null; this.zoomed = !1; images360.panoRenderer.addEventListener(PanoRendererEvents.TileRenderSuccess, this.onTileRendered.bind(this)); images360.panoRenderer.addEventListener(PanoRendererEvents.PanoRenderComplete, this.onPanoRendered.bind(this)); images360.panoRenderer.addEventListener(PanoRendererEvents.TileRenderFailure, this.onTileRenderFail.bind(this)); images360.panoRenderer.addEventListener(PanoRendererEvents.UploadAttemptedForAllTiles, this.onUploadAttemptedForAllTiles.bind(this)); } this.addEventListener('hoverOn', (e)=>{//from Map if(!e.byMainView){ this.hoverOn(e) } }) this.addEventListener('hoverOff', (e)=>{ if(!e.byMainView){ this.hoverOff(e) } }) } setEnable(enable){//是否可以走 viewer.updateVisible(this, 'isEnabled', enable) //令所有marker不可见 this.enabled = enable //如果当前在全景模式且在这个点，需要切换显示吗？ 目前用不到 } build(){ let mesh = new THREE.Mesh(sg, sm); mesh.scale.set(1, 1, 1); mesh.material.transparent = true; mesh.material.opacity = 0.75; mesh.pano = this; mesh.name = 'panoSphere' mesh.addEventListener('mouseover',(e)=>{ mesh.material = smHovered }) mesh.addEventListener('mouseleave',(e)=>{ mesh.material = sm }) mesh.addEventListener('click',(e)=>{ this.images360.focusPano(this) }) { // orientation //var {course, pitch, roll} = this; //mesh.quaternion.copy(this.quaternion) //add //var quaternion = new THREE.Quaternion().multiplyQuaternions(this.quaternion, rot901);//改 为球目全 //quaternion.premultiply(rot90) this.panoMatrix = new THREE.Matrix4().makeRotationFromQuaternion(this.quaternion) this.oriPanoMatrix = this.panoMatrix.clone() //console.log(this.quaternion) //this.quaternion = quaternion } this.mesh = mesh; if(!Potree.settings.showPanoMesh) mesh.visible = false let marker = new THREE.Mesh(planeGeo, getMarerMat() ) marker.up.set(0,0,1) marker.lookAt(marker.up) marker.scale.set(2,2,2) this.marker = marker this.images360.node.add(mesh) this.images360.node.add(marker) Potree.settings.isTest && this.createTextLabel() } transformByPointcloud(){ let position = this.originPosition.clone().applyMatrix4(this.pointcloud.transformMatrix);//也可以用datasetPosTransform算 let floorPosition = this.originFloorPosition.clone().applyMatrix4(this.pointcloud.transformMatrix); this.setPosition(position, floorPosition) this.panoMatrix = new THREE.Matrix4().multiplyMatrices(this.pointcloud.rotateMatrix, this.oriPanoMatrix ) //this.panoMatrix2 = Potree.Utils.datasetRotTransform({fromDataset:true, pointcloud:this.pointcloud, matrix:this.oriPanoMatrix, getMatrix:true}) //和上一行结果一样 //quaternion也变下 this.dispatchEvent('rePos') } setPosition(position, floorPosition){ this.position = position this.floorPosition = floorPosition this.mesh.position.copy(this.position) this.marker.position.copy(this.floorPosition) this.marker.position.z+=0.1//会被点云遮住 if(this.label){ this.label.position.copy(this.floorPosition), this.label.position.z+=0.2 this.label.update() } } hoverOn(e={}) { //console.log("hoverOn " + this.id ) transitions.start(lerp.property(this.marker.material, "opacity", 1), 250) if(!e.byMap) this.dispatchEvent({type:'hoverOn', byMainView:true}) } hoverOff(e={}){ //console.log("hoverOff " + this.id ) transitions.start(lerp.property(this.marker.material, "opacity", 0.5), 250) if(!e.byMap) this.dispatchEvent({type:'hoverOff', byMainView:true}) } setZoomed(zoomed){ this.zoomed = zoomed; Potree.settings.displayMode == 'showPanos' && this.updateSkyboxForZoomLevel(); //放大后换成zoomTarget贴图 viewer.dispatchEvent({type:'panoSetZoom', zoomed}) } enter(){ this.setZoomed(!1), viewer.dispatchEvent({type:PanoramaEvents.Enter, oldPano:old, newPano:this } ) old = this //console.log("enter pano "+ this.id) } exit(){ /* if(this.tiled) { */ this.clearWaitDeferreds(); this.minimumTiledPanoLoaded = !1; this.tiledPanoRenderTarget = null; this.setZoomed(!1); this.images360.panoRenderer.deactivateTiledPano(this); this.highestPartialTileRenderOpCompleted = 0; this.highestFullTileRenderOpCompleted = 0; /*} else { this.solidSkybox.dispose(); this.solidSkybox.loaded = !1; this.solidSkybox.version = 0; } */ //console.log("exit pano "+ this.id) viewer.dispatchEvent({type:PanoramaEvents.Exit, pano:this}); } updateSkyboxForZoomLevel(){ if(this.minimumTiledPanoLoaded){ this.images360.updateProjectedPanos(); } } getSkyboxTexture(){ if(this.minimumTiledPanoLoaded) { if(this.zoomed && this.images360.qualityManager.maxRenderTargetSize > this.images360.qualityManager.maxNavPanoSize)//change 如果放大后和不放大都是2k就不用这个 { return this.images360.panoRenderer.zoomRenderTarget.texture; } else { this.tiledPanoRenderTarget.texture.mapping = THREE.UVMapping//add return this.tiledPanoRenderTarget.texture; } } else { return null; } } isLoaded(e){ if (e && "string" == typeof e) console.error("Wrong panoSize given to Panorama.isLoaded(); a tiled pano uses PanoSizeClass"); return !!this.minimumTiledPanoLoaded && (!e || this.highestFullTileRenderOpCompleted >= e)//改：原本是：this.highestPartialTileRenderOpCompleted >= e， 希望这代表全部加载完 } getWaitDeferred(size){//获取不同size的tile贴图的promiss var t = this.resolutionPromise[this.id]; t || (t = {}, this.resolutionPromise[this.id] = t); var i = t[size]; return i || (i = { deferred: $.Deferred(), active: !1 }, t[size] = i), i } clearWaitDeferreds(){ var e = this.resolutionPromise[this.id]; e || (e = {}, this.resolutionPromise[this.id] = e); for (var t in e) if (e.hasOwnProperty(t)) { var i = e[t]; i.active = !1, i.deferred = $.Deferred() } } resetWaitDeferred(e){ var t = this.getWaitDeferred(e); t.active = !1; t.deferred = $.Deferred(); } onTileRendered(ev){ ev.id === this.id && this.dispatchEvent({ type:PanoramaEvents.TileLoaded, size:ev.panoSize, index:ev.tileIndex, count:ev.totalTiles }); } onPanoRendered(ev) { if(ev.id === this.id) { this.minimumTiledPanoLoaded = !0; this.updateSkyboxForZoomLevel();//更新贴图 setProjected ev.panoSize > this.highestPartialTileRenderOpCompleted && (this.highestPartialTileRenderOpCompleted = ev.panoSize);//应该是更新最高获取到的Partial size ev.updateFullComplete && ev.panoSize > this.highestFullTileRenderOpCompleted && (this.highestFullTileRenderOpCompleted = ev.panoSize); //应该是更新最高获取到的Full size //this.dispatchEvent("load", ev.panoSize); viewer.ifAllLoaded( this); this.dispatchEvent({type:PanoramaEvents.LoadComplete, size:ev.panoSize, count:ev.totalTiles}); } } onTileRenderFail(ev) { ev.id === this.id && this.dispatchEvent({type:PanoramaEvents.LoadFailed }); } onUploadAttemptedForAllTiles(ev) { if (ev.id === this.id) { var n = this.images360.qualityManager.getPanoSize(PanoSizeClass.BASE); if(ev.panoSize === n && this.shouldRedrawOnBaseLoaded) //shouldRedrawOnBaseLoaded一直是false。在4dkk里只有初始点在quickstart后变为true。 { this.shouldRedrawOnBaseLoaded = !1; this.panoRenderer.resetRenderStatus(this.id, !0, !1); this.panoRenderer.renderPanoTiles(this.id, null, !0, !0); } } } createTextLabel(){ this.removeTextLabel() this.label = new TextSprite($.extend( labelProp, {text: this.id }) //{text: `id:${this.id}, dataset:${this.pointcloud.name}, 4dkkId:${this.originID}`} ); this.images360.node.add(this.label); this.floorPosition && this.label.position.copy(this.floorPosition) } removeTextLabel(){ if(this.label){ this.label.parent.remove(this.label); } } }; Panorama.prototype.loadTiledPano = function() { //var downloads = [] , t = []; var downloaded = {} , eventAdded = {}, latestPartialRequest = {}; //每个pano对应一组这些 return function(size, dirs, fov, o, a, download) { var dir = dirs.datasetsLocal.find(e=>e.datasetId == this.pointcloud.dataset_id).direction; //var dir = dirs null !== o && void 0 !== o || (o = !0), null !== a && void 0 !== a || (a = !0); var l = this.getWaitDeferred(size) , c = l.deferred , h = null , u = null; fov && ("number" == typeof fov ? h = fov : (h = fov.hFov, u = fov.vFov)) if (!this.isLoaded(size)) { //console.log('loadTiledPano', this.id, size, fov) if (!l.active) { l.active = !0 let name = this.id + ":" + size downloaded[name] = downloaded[name] || [] /* this.downloaded = downloaded this.latestPartialRequest = latestPartialRequest */ latestPartialRequest[name] = null if (fov) { let tileArr = []//add var d = TileUtils.matchingTilesInDirection(this, size, dir, h, u, tileArr); latestPartialRequest[name] = tileArr downloaded[name].forEach((e)=>{ let item = latestPartialRequest[name].find(a=>e.faceTileIndex == a.faceTileIndex && e.face == a.face) if(item){ item.loaded = true } }) if(!latestPartialRequest[name].some(e=>!e.loaded)){//所需要的全部加载成功 //let total = TileUtils.getTileCountForSize(size) //this.onPanoRendered(this.id, size, total, !0); c.resolve(size/* , total */); this.resetWaitDeferred(size) //console.log('该部分早已经加载好了'+size, this.id) latestPartialRequest[name] = null } //console.log("Loading partial pano: " + this.id + " with " + d + " tiles") } if(!eventAdded[this.id]) { eventAdded[this.id] = !0 this.addEventListener(PanoramaEvents.LoadComplete, function(ev/* e, t */) {//本次任务全部加载完毕 //console.warn('点位(可能部分)下载完成 ', 'id:'+this.id, 'size:'+ev.size ) var i = this.getWaitDeferred(ev.size).deferred;//"pending"为还未完成 i && "pending" === i.state() && this.highestPartialTileRenderOpCompleted >= ev.size && (i.resolve(ev.size, ev.count), this.resetWaitDeferred(ev.size))//恢复active为false }.bind(this)) this.addEventListener(PanoramaEvents.LoadFailed, function(ev) { var t = this.getWaitDeferred(e).deferred; t && "pending" === t.state() && this.highestPartialTileRenderOpCompleted >= ev.t && (t.reject(ev.t), this.resetWaitDeferred(ev.t))//恢复active为false }.bind(this)) this.addEventListener(PanoramaEvents.TileLoaded, function(ev/* t, i, n */) {//每张加载完时 //console.log('tileLoaded', 'id:'+this.id, 'size:'+ev.size, 'tileIndex:'+ev.index ) let tileIndex = ev.index let total = ev.count let size = ev.size let name = this.id + ":" + size downloaded[name] = downloaded[name] || [] //不是所有的加载都是从loadTiledPano获取的所以会有未定义的情况 let {faceTileIndex,face} = TileUtils.getTileLocation(size, tileIndex, {}) downloaded[name].push({faceTileIndex,face}) var r = this.getWaitDeferred(size).deferred; if (r && "pending" === r.state()) { r.notify(size, tileIndex, total); if(latestPartialRequest[name]){ let item = latestPartialRequest[name].find(e=>e.faceTileIndex == faceTileIndex && e.face == face) item && (item.loaded = true ) if(!latestPartialRequest[name].some(e=>!e.loaded)){//所需要的局部tiles全部加载成功 this.onPanoRendered(this.id, size, total, !0); //onPanoRendered还会触发 PanoramaEvents.LoadComplete r.resolve(size, total); this.resetWaitDeferred(size) //console.log('该部分加载好了'+size, this.id) latestPartialRequest[name] = null } } } /* var r = this.getWaitDeferred(ev.size).deferred; if (r && "pending" === r.state()) { r.notify(ev.size, ev.index, ev.count); var o = downloads[this.id + ":" + ev.size]; if(o){//如果有规定下载哪些tile，只需要下载这些tile则LoadComplete o.tileCount++ if(o.tileCount === o.targetTileCount){//达到下载目标数 this.onPanoRendered(this.id, ev.size, ev.count, !0); r.resolve(ev.size, ev.count); this.resetWaitDeferred(ev.size) } } } */ }.bind(this)) } } this.images360.tileDownloader.clearForceQueue(), this.images360.tileDownloader.forceQueueTilesForPano(this, size, dir, h, u, download) this.tiledPanoRenderTarget = this.images360.panoRenderer.activateTiledPano(this, this.images360.qualityManager.getMaxNavPanoSize(), o) this.images360.panoRenderer.renderPanoTiles(this.id, dirs, a) }else{ //console.log('早已经全加载好了' +size, this.id) c.resolve(size) } return c.promise() } }() /* 经观察发现，navvis的也存在的问题是点云和全景有微小的偏差，导致远处的热点在全景和点云上看位置差别感大，比如一个在路上一个在天空上。 */ export default Panorama