|
|
@@ -1,4 +1,6 @@
|
|
|
-
|
|
|
+var MathLight = {};
|
|
|
+MathLight.RADIANS_PER_DEGREE = Math.PI / 180;
|
|
|
+MathLight.DEGREES_PER_RADIAN = 180 / Math.PI;
|
|
|
|
|
|
|
|
|
|
|
|
@@ -56,8 +58,10 @@ var initOverlay = function(THREE) {
|
|
|
overlayGroup.add(this);
|
|
|
|
|
|
if (info.media) {
|
|
|
- if (info.media.includes('video')) {
|
|
|
- var video = $('<video controls="controls" loop autoplay x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"></video>')[0]
|
|
|
+ if (info.media.includes('video')) {
|
|
|
+ //var id = "video"+ this.sid id="${ id }"
|
|
|
+ var video = $(`<video controls="controls" loop autoplay x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"></video>`)[0]
|
|
|
+
|
|
|
video.setAttribute("crossOrigin", 'Anonymous')
|
|
|
//要在src设置好前解决跨域
|
|
|
$(video).on('contextmenu', function() {
|
|
|
@@ -69,10 +73,18 @@ var initOverlay = function(THREE) {
|
|
|
info.media = video;
|
|
|
info.type = "video"
|
|
|
|
|
|
- video.addEventListener('loadeddata', ()=>{
|
|
|
+ /* video.addEventListener('loadeddata', ()=>{
|
|
|
console.log(this.sid + " loaded!!!")
|
|
|
+ }) */
|
|
|
+
|
|
|
+ video.oncanplaythrough = function() {
|
|
|
+ plane.material.map.needsUpdate = !0
|
|
|
+ if(video.shouldPlay){
|
|
|
+ video.play()
|
|
|
+ }
|
|
|
}
|
|
|
- )
|
|
|
+
|
|
|
+
|
|
|
video.volume = 0
|
|
|
video.muted = true
|
|
|
plane.material.opacity = 1;
|
|
|
@@ -85,8 +97,18 @@ var initOverlay = function(THREE) {
|
|
|
|
|
|
info.type = "photo"
|
|
|
plane.material.opacity = 0.1;
|
|
|
- }
|
|
|
+
|
|
|
+ /* this.animateInfo = {
|
|
|
+ cellXcount : 4,
|
|
|
+ cellYcount : 2,
|
|
|
+ loop : true,
|
|
|
+ duration : 1000
|
|
|
+ }
|
|
|
+ */
|
|
|
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
plane.material.color = new THREE.Color(1,1,1)
|
|
|
}
|
|
|
if (info.width == void 0)
|
|
|
@@ -98,13 +120,29 @@ var initOverlay = function(THREE) {
|
|
|
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
Overlay.prototype.setFromInfo = function(info) {
|
|
|
//1 恢复到编辑之前 2 初始加载
|
|
|
- var plane = this.plane;
|
|
|
- this.transformAtPanos = info.transformAtPanos || {}
|
|
|
+ var plane = this.plane;
|
|
|
+ var transformAtPanos = {}
|
|
|
+ for(var i in info.transformAtPanos){
|
|
|
+ transformAtPanos[i] = {
|
|
|
+ width : info.transformAtPanos[i].width,
|
|
|
+ height : info.transformAtPanos[i].height,
|
|
|
+ pos : info.transformAtPanos[i].pos.clone(),
|
|
|
+ qua : info.transformAtPanos[i].qua.clone(),
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.transformAtPanos = transformAtPanos
|
|
|
//在每个漫游点独立设置的position。
|
|
|
- var curPanoTransform = player.currentPano && this.transformAtPanos[player.currentPano.id] || {}
|
|
|
-
|
|
|
+ //var curPanoTransform = player.currentPano && this.transformAtPanos[player.currentPano.id] || {}
|
|
|
+ var curPanoTransform = this.transformAtPanos[ getTransformSid()] || {}
|
|
|
+
|
|
|
+
|
|
|
info.depth && this.scale.setZ(info.depth / settings.overlay.depth)
|
|
|
|
|
|
this.posCustom = info.pos ? info.pos.clone() : this.position.clone();
|
|
|
@@ -158,9 +196,30 @@ var initOverlay = function(THREE) {
|
|
|
|
|
|
this.updateMatrixWorld()
|
|
|
this.getVisiblePanos()
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+ {//gif
|
|
|
+ if(this.animation){
|
|
|
+ GifTexDeal.remove(this.animation)
|
|
|
+ }
|
|
|
+ this.animateInfo = CloneObject(info.animateInfo)
|
|
|
+ if(this.animateInfo && plane.material.map){
|
|
|
+ this.animation = GifTexDeal.addAnimation(plane.material.map, this, this.animateInfo, this.sid )
|
|
|
+ this.visible && this.inSight() && GifTexDeal.start(this.animation)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
Overlay.prototype.addBox = function(state) {
|
|
|
if (state == !!this.hasBox) {
|
|
|
return;
|
|
|
@@ -220,20 +279,31 @@ var initOverlay = function(THREE) {
|
|
|
|
|
|
}
|
|
|
|
|
|
- Overlay.prototype.getVisiblePanos = function() {
|
|
|
+ Overlay.prototype.getVisiblePanos = function() {//在不同点还不一样
|
|
|
this.visiblePanos = common.getVisiblePano(this.plane.getWorldPosition(), {
|
|
|
- model: null
|
|
|
+ model: null/* , transformAtPanos:info.transformAtPanos */
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
Overlay.prototype.updateVisibles = function(panos) {
|
|
|
+
|
|
|
+ if(settings.isEdit && EditOverlay.editPlane == this){
|
|
|
+ return true
|
|
|
+ }
|
|
|
+
|
|
|
this.visible = !!panos.find(pano=>this.visiblePanos.includes(pano))
|
|
|
- if(!this.visible && this.overlayType == 'video'){
|
|
|
+ if (!this.visible && this.overlayType == 'video')
|
|
|
this.videoControl('stop')
|
|
|
-
|
|
|
- }
|
|
|
+
|
|
|
+ /* if(this.animateInfo){ //在player.update里更新
|
|
|
+ if(this.visible){
|
|
|
+ GifTexDeal.start(this.animation)
|
|
|
+ }else{
|
|
|
+ GifTexDeal.stop(this.animation)
|
|
|
+ }
|
|
|
+ } */
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -244,55 +314,51 @@ var initOverlay = function(THREE) {
|
|
|
player.overlayGroup.children.forEach(e=>e.updateVisibles(panos))
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
Overlay.prototype.videoControl = function(state){
|
|
|
if(this.overlayType != "video")return
|
|
|
-
|
|
|
-
|
|
|
+ var video = this.plane.material.map.image
|
|
|
if(!state || state == 'stop'){
|
|
|
- this.plane.material.map.image.pause()
|
|
|
+ video.paused || video.pause()
|
|
|
if(state == 'stop'){
|
|
|
- this.plane.material.map.image.currentTime = 0;
|
|
|
- this.playCount = 0
|
|
|
+ video.currentTime = 0;
|
|
|
+
|
|
|
}
|
|
|
- console.log("pause")
|
|
|
- }else if(state /* && (this.loop !== false || this.playCount == 0 || this.plane.material.map.image.currentTime<this.plane.material.map.image.duration) */){
|
|
|
- this.plane.material.map.image.play()
|
|
|
- //this.playCount = this.playCount ? (this.playCount+1) : 1
|
|
|
- console.log("play")
|
|
|
+ video.shouldPlay = false
|
|
|
+ //console.log("pause")
|
|
|
+ }else if(state){
|
|
|
+ video.paused && video.play()
|
|
|
+ video.shouldPlay = true
|
|
|
+ //console.log("play")
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ }
|
|
|
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){
|
|
|
- return true
|
|
|
- }else{
|
|
|
- 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),
|
|
|
- ];
|
|
|
- for(var i=0;i<4;i++){
|
|
|
- cornerPoint[i].applyMatrix4(this.plane.matrixWorld);
|
|
|
- var pos2d = math.getPos2d(cornerPoint[i], player.camera, $("#player")[0])
|
|
|
- if(pos2d.trueSide && pos2d.inSight){
|
|
|
- return true
|
|
|
+ if(player.mode == 'panorama'){
|
|
|
+ var position = this.plane.getWorldPosition()
|
|
|
+ var pos2d = math.getPos2d(position, player.camera, $("#player")[0])
|
|
|
+ if(pos2d.trueSide && pos2d.inSight){
|
|
|
+ return true
|
|
|
+ }else{
|
|
|
+ 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),
|
|
|
+ ];
|
|
|
+ for(var i=0;i<4;i++){//只要有一点可见就算看见
|
|
|
+ cornerPoint[i].applyMatrix4(this.plane.matrixWorld);
|
|
|
+ var pos2d = math.getPos2d(cornerPoint[i], player.camera, $("#player")[0])
|
|
|
+ if(pos2d.trueSide && pos2d.inSight){
|
|
|
+ return true
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ }else{//飞出要判断模型阻挡，有点耗时就算了
|
|
|
+ return true
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
Overlay.prototype.addToLoadQueue = function() {
|
|
|
if (this.overlayType == 'photo') {
|
|
|
Overlay.loadQueue.includes(this) || Overlay.loadQueue.push(this)
|
|
|
@@ -309,7 +375,7 @@ var initOverlay = function(THREE) {
|
|
|
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
|
|
|
@@ -317,6 +383,13 @@ var initOverlay = function(THREE) {
|
|
|
setTimeout(Overlay.loadNext, 50)
|
|
|
plane.material.opacity = 1;
|
|
|
console.log('overlay loaded: ' + this.sid)
|
|
|
+
|
|
|
+ if(this.animateInfo){
|
|
|
+ this.animation = GifTexDeal.addAnimation(plane.material.map, this, this.animateInfo, this.sid )
|
|
|
+ this.visible && this.inSight() && GifTexDeal.start(this.animation)
|
|
|
+ }
|
|
|
+
|
|
|
+ plane.material.needsUpdate = true
|
|
|
})
|
|
|
plane.material.map.wrapS = plane.material.map.wrapT = THREE.ClampToEdgeWrapping;
|
|
|
plane.material.map.minFilter = THREE.LinearFilter;
|
|
|
@@ -335,9 +408,6 @@ var initOverlay = function(THREE) {
|
|
|
Overlay.loadQueue.slice(0, Overlay.maxLoadingCount - loadings.length).forEach(e=>e.requestDownload())
|
|
|
Overlay.loadQueue.splice(0, Overlay.maxLoadingCount - loadings.length)
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
|
|
|
Overlay.getNeedLoad = function() {//计算获取loadQueue，每次都重新计算，覆盖旧的
|
|
|
if (!player || !player.domElement || !player.mode)
|
|
|
@@ -355,11 +425,26 @@ var initOverlay = function(THREE) {
|
|
|
}
|
|
|
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<overlays.length;i++){
|
|
|
+ //角度为可见范围
|
|
|
+ var v1 = cameraDir.clone().setY(0);
|
|
|
+ var v2 = overlays[i].plane.getWorldPosition().sub(player.position).setY(0)
|
|
|
+ if(v1.angleTo(v2) <= maxAngle){
|
|
|
+ Overlay.loadQueue.push(overlays[i])
|
|
|
+ if(Overlay.loadQueue.length>=10) break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(Overlay.loadQueue.length<Overlay.maxLoadingCount){
|
|
|
+ Overlay.loadQueue.push()
|
|
|
+ }
|
|
|
+ }else{ */
|
|
|
Overlay.loadQueue = overlays
|
|
|
-
|
|
|
+ //}
|
|
|
|
|
|
var request = [(overlay)=>{
|
|
|
return true
|
|
|
@@ -375,7 +460,7 @@ var initOverlay = function(THREE) {
|
|
|
return -angle * 20
|
|
|
}
|
|
|
]
|
|
|
- var result = sortByScore(Overlay.loadQueue, request, rank);
|
|
|
+ var result = common.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);
|
|
|
|
|
|
}
|
|
|
@@ -395,3 +480,5 @@ var initOverlay = function(THREE) {
|
|
|
window.Overlay = Overlay;
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+
|
xzw