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;
}