var MathLight = {}; MathLight.RADIANS_PER_DEGREE = Math.PI / 180; MathLight.DEGREES_PER_RADIAN = 180 / Math.PI; var filterAll = function filterAll(e, t) { return e.filter(function (e) { return t.every(function (t) { return t(e); }); }); } var sortByScore = function (list, request, rank) { var i = filterAll(list, request); return 0 === i.length ? null : i = i.map(function (e) { return { item: e, score: rank.reduce(function (t, i) { return t + i(e); }, 0) }; }).sort(function (e, t) { return t.score - e.score; }); }; /* var cameraLight = { clampVFOV: function(fov, t, i, n) { var r = cameraLight.getHFOVFromVFOV(fov, i, n); return r > t ? cameraLight.getVFOVFromHFOV(t, i, n) : fov }, getHFOVForCamera: function(e, t, i) { return cameraLight.getHFOVFromVFOV(e.fov, t, i) }, getHFOVFromVFOV: function(fov, t, i) { var n = t , o = i , a = 2 * Math.atan(Math.tan(fov * MathLight.RADIANS_PER_DEGREE / 2) * (n / o)) * MathLight.DEGREES_PER_RADIAN; return a }, getVFOVFromHFOV: function(e, t, i) { var n = t , o = i , a = 2 * Math.atan(Math.tan(e * MathLight.RADIANS_PER_DEGREE / 2) * (o / n)) * MathLight.DEGREES_PER_RADIAN; return a } }; */ var initOverlay = function(THREE){ var _planeGeometry = new THREE.PlaneGeometry(settings.overlay.width, settings.overlay.height,1,1) var _boxGeometry = new THREE.BoxBufferGeometry(settings.overlay.width, settings.overlay.height, settings.overlay.depth ) //ie的mesh 加了polygonOffset也是会重叠。所以去掉前面的face: (但是突然ie又播放不了videoTexture) var newIndex = [..._boxGeometry.index.array] newIndex.splice(4*6,6) _boxGeometry.setIndex(new THREE.BufferAttribute(new Uint16Array(newIndex), 1)) var _boxMat = new THREE.MeshBasicMaterial({//MeshStandardMaterial color:"#eeeeee", transparent: !0 , opacity:0.8 }) var overlayGroup = new THREE.Object3D; player.model.add(overlayGroup); overlayGroup.name = "overlayGroup" player.overlayGroup = overlayGroup; var Overlay = function(info){ THREE.Object3D.call(this); this.sid = info.sid; if(info.sid == '1624590736940'||info.sid == '1624778346600'){ this.playPanos = [player.model.panos.index["db8c40d5b3be459695c25d0de45f7b69"]] info.loop = false; this.hideWhenPlayDone = true } if(info.media)this.preDeal(info) this.build(info); this.name = "overlay_"+this.sid; } Overlay.prototype = Object.create(THREE.Object3D.prototype); Overlay.prototype.build = function(info){ var plane = new THREE.Mesh(_planeGeometry, new THREE.MeshBasicMaterial({//MeshStandardMaterial color:"#00c8af", opacity:0.4, transparent: !0, polygonOffset : true,//是否开启多边形偏移 //ie不开启时blank也不会闪烁 polygonOffsetFactor : -0.9,//多边形偏移因子 polygonOffsetUnits : -4.0,//多边形偏移单位 }) ) plane.renderOrder = 3 this.add(plane); this.plane = plane; if(info.hasBox){ this.addBox(true) } overlayGroup.add(this); if(info.media){ if(info.media.includes('video')){ var video = $('')[0] video.setAttribute("crossOrigin", 'Anonymous')//要在src设置好前解决跨域 $(video).on('contextmenu', function () { return false; });//禁止右键点击出 video.src = manage.dealURL(info.file) ; info.media = video; info.type = "video" video.addEventListener('loadeddata', ()=>{ // console.log(this.sid + " loaded!!!") }) this.hideWhenPlayDone && video.addEventListener('ended', ()=>{ this.visible = false }) video.volume = 0 video.muted = true if(info.loop == false){ this.loop = video.loop = false this.playCount = 0 } plane.material.opacity = 1; }else if(info.media.includes('photo')){ /* var img = new Image(); img.src = manage.dealURL(info.file) //"https://4dkk.4dage.com/images/images"+Config.projectNum+"/overlay"+this.sid+".jpg?m="+new Date().getTime() info.media = img */ info.type = "photo" plane.material.opacity = 0.1; } plane.material.color = new THREE.Color(1,1,1) } if(info.width == void 0) info.width = settings.overlay.width; if(info.height == void 0) info.height = settings.overlay.height; this.setFromInfo(info) this.fileSrc = info.file } Overlay.prototype.setFromInfo = function(info){//1 恢复到编辑之前 2 初始加载 var plane = this.plane; this.transformAtPanos = info.transformAtPanos || {} //在每个漫游点独立设置的position。 var curPanoTransform = player.currentPano && this.transformAtPanos[player.currentPano.id] || {} info.depth && this.scale.setZ(info.depth/settings.overlay.depth) this.posCustom = info.pos ? info.pos.clone() : this.position.clone(); //没有单独设置position的漫游点使用的position this.position.copy(curPanoTransform.pos || this.posCustom ) this.quaCustom = info.qua ? info.qua.clone() : this.quaternion.clone() this.quaternion.copy(curPanoTransform.qua || this.quaCustom); this.widthCustom = info.width this.heightCustom = info.height this.width = curPanoTransform.width || this.widthCustom this.height = curPanoTransform.height || this.heightCustom var a = this.getScaleBySize(this.width, this.height) this.scale.setX( a.x ) this.scale.setY( a.y ) if(info.type){ if(!plane.material.map){ if(info.type == "video"){ plane.material.map = new THREE.VideoTexture( info.media ); this.hasRequestLoad = true plane.material.map.wrapS = plane.material.map.wrapT = THREE.ClampToEdgeWrapping; plane.material.map.minFilter = THREE.LinearFilter; plane.material.map.magFilter = THREE.LinearFilter; plane.material.map.generateMipmaps = true; }else{ this._loadDones = [] /* plane.material.map = Texture.load(info.file,()=>{ if(this._loadDones){ this._loadDones.forEach(e=>e()) this._loadDones = null } }) */ } /* plane.material.map.wrapS = plane.material.map.wrapT = THREE.ClampToEdgeWrapping; plane.material.map.minFilter = THREE.LinearFilter; plane.material.map.magFilter = THREE.LinearFilter; plane.material.map.generateMipmaps = true; */ }else plane.material.map.image = info.media; this.file = info.file; } this.overlayType = info.type; if(!!this.hasBox != !!info.hasBox){ this.addBox(!this.hasBox); } this.updateMatrixWorld() this.getVisiblePanos() } Overlay.prototype.addBox = function(state){ if(state == !!this.hasBox){ return; } if(state){ var box = new THREE.Mesh(_boxGeometry , _boxMat) box.position.set(0,0,settings.overlay.depth/2); box.renderOrder = 3 this.plane.position.set(0,0,settings.overlay.depth ); this.add(box); this.box = box; }else{ this.plane.position.set(0,0,0); this.remove(this.box); this.box = null; } this.hasBox = state } Overlay.prototype.getSizeByScale = function(){ return { width : settings.overlay.width * this.scale.x, height : settings.overlay.height * this.scale.y } } Overlay.prototype.getScaleBySize = function(width, height){ return { x : width / settings.overlay.width, y : height / settings.overlay.height, } } Overlay.prototype.preDeal = function(info){ info.pos = new THREE.Vector3().fromArray(info.pos) info.qua = new THREE.Quaternion().fromArray(info.qua) info.width = parseFloat(info.width) info.height = parseFloat(info.height) info.depth = parseFloat(info.depth) info.hasBox = parseInt(info.hasBox) info.pos.x = parseFloat(info.pos.x) info.pos.y = parseFloat(info.pos.y) info.pos.z = parseFloat(info.pos.z) info.qua.x = parseFloat(info.qua.x) info.qua.y = parseFloat(info.qua.y) info.qua.z = parseFloat(info.qua.z) info.qua.w = parseFloat(info.qua.w) if(!info.transformAtPanos)info.transformAtPanos = {} for(let i in info.transformAtPanos){ info.transformAtPanos[i].pos = new THREE.Vector3().fromArray(info.transformAtPanos[i].pos) info.transformAtPanos[i].qua = new THREE.Quaternion().fromArray(info.transformAtPanos[i].qua) } } Overlay.prototype.inSight = function(){ //var maxAngle = THREE.Math.degToRad( cameraLight.getHFOVFromVFOV(70, player.domElement.clientWidth, app.player.domElement.clientHeight) / 2); var position = this.plane.getWorldPosition() var pos2d = math.getPos2d(position, player.camera, $("#player")[0]) if(pos2d.trueSide && pos2d.inSight){ /* var cornerPoint = [ new THREE.Vector3(-settings.overlay.width/2, settings.overlay.height/2, 0), new THREE.Vector3(settings.overlay.width/2, settings.overlay.height/2, 0), new THREE.Vector3(settings.overlay.width/2, -settings.overlay.height/2, 0), new THREE.Vector3(-settings.overlay.width/2, -settings.overlay.height/2, 0), ]; */ var cornerPoint = [//正对的时候才触发播放,只需要管宽度即可 new THREE.Vector3(-settings.overlay.width/2, 0, 0), new THREE.Vector3(settings.overlay.width/2, 0, 0), ]; for(var i=0;ithis.visiblePanos.includes(pano)) //if(this.loop) if((!this.visible || (this.playPanos && !this.playPanos.find(pano=>player.currentPano == pano) )) && this.overlayType == 'video'){ this.videoControl('stop') } } Overlay.updateVisibles = function(panos){ if(panos === true){ player.overlayGroup.children.forEach(e=>e.visible = true) }else{ player.overlayGroup.children.forEach(e=>e.updateVisibles(panos)) } } Overlay.prototype.videoControl = function(state){ if(this.overlayType != "video")return if(!state || state == 'stop'){ this.plane.material.map.image.paused || this.plane.material.map.image.pause() if(state == 'stop'){ this.plane.material.map.image.currentTime = 0; this.playCount = 0 } //console.log("pause") }else if(state && (this.loop !== false || this.playCount == 0 || this.plane.material.map.image.currentTimeplayer.currentPano == pano) )){ this.plane.material.map.image.paused && this.plane.material.map.image.play() this.playCount = this.playCount ? (this.playCount+1) : 1 //console.log("play") } } Overlay.prototype.addToLoadQueue = function(){ if(this.overlayType == 'photo'){ Overlay.loadQueue.includes(this) || Overlay.loadQueue.push(this) } } Overlay.prototype.requestDownload = function(){ if(this.hasRequestLoad || this.overlayType != 'photo')return // console.log('overlay requestDownload : '+this.sid) var plane = this.plane; plane.material.map = Texture.load(this.file,()=>{ plane.material.needsUpdate = true if(this._loadDones){ this._loadDones.forEach(e=>e()) this._loadDones = null } setTimeout(Overlay.loadNext,50) plane.material.opacity = 1; // console.log('overlay loaded: '+this.sid) }) plane.material.map.wrapS = plane.material.map.wrapT = THREE.ClampToEdgeWrapping; plane.material.map.minFilter = THREE.LinearFilter; plane.material.map.magFilter = THREE.LinearFilter; plane.material.map.generateMipmaps = true; this.hasRequestLoad = true } Overlay.loadQueue = []; Overlay.getNeedLoad = function(){ if(!player || !player.domElement || !player.mode)return; if(player.mode != 'panorama'){ if( !Overlay.loadWhenOutside) return; /* var loadings = player.overlayGroup.children.filter(e=>e.hasRequestLoad && e._loadDones)//开始下载了但是没加载好的 if(loadings.length==4){ Overlay.loadQueue = player.overlayGroup.children.filter(e=>!e.hasRequestLoad) .slice(0,5); } */ if(Overlay.loadQueue.length == 0){ Overlay.loadQueue = player.overlayGroup.children.filter(e=>!e.hasRequestLoad).slice(0,5); } return; } Overlay.loadWhenOutside = true var overlays = player.overlayGroup.children.filter(e=>!e.hasRequestLoad && e.visiblePanos.includes(player.currentPano)) //var maxAngle = THREE.Math.degToRad( cameraLight.getHFOVFromVFOV(70, player.domElement.clientWidth, app.player.domElement.clientHeight) / 2); var cameraDir = player.getDirection() /* var maxCount = 5; if(overlays.length>maxCount){ for(var i=0;i=10) break; } } if(Overlay.loadQueue.length{ return true }]; var rank = [(overlay)=>{ var dis = overlay.plane.getWorldPosition().distanceTo(player.position); return -dis },(overlay)=>{ var tagDir = overlay.plane.getWorldPosition().sub(player.position) var angle = tagDir.angleTo(cameraDir) return -angle*20 }] var result = sortByScore(Overlay.loadQueue, request,rank); Overlay.loadQueue = result ? result.slice(0,5).map(e=>e.item) : player.overlayGroup.children.filter(e=>!e.hasRequestLoad).slice(0,2); } Overlay.maxLoadingCount = 3; Overlay.loadNext = ()=>{ var loadings = player.overlayGroup.children.filter(e=>e.hasRequestLoad && e._loadDones)//开始下载了但是没加载好的 Overlay.loadQueue.slice(0,Overlay.maxLoadingCount-loadings.length).forEach(e=>e.requestDownload()) Overlay.loadQueue.splice(0,Overlay.maxLoadingCount-loadings.length) } Overlay.load = ()=>{ Overlay.getNeedLoad() //Overlay.loadQueue.slice(0,2).forEach(e=>e.requestDownload()) Overlay.loadNext() var unloads = player.overlayGroup.children.filter(e=>!e.hasRequestLoad) if(unloads.length){ setTimeout(Overlay.load, 200) }else{ Overlay.allRequestLoad = true // console.log('allRequestLoad') } } window.Overlay = Overlay; }