修改第一次进入的提示，修改俯视图固定和透明图片文字贴合

web/public/static/js/Hot.js

@@ -1,25 +1,14 @@
- 
 //合并热点和展览 
-
+g_currentHot = null
 
 window.initHot = function(model){
-    
-    
-    
-
-    
-    
-    
-    
-    
-    
-    
+      
     var objLoader = new THREE.OBJLoader()    
     var _planeGeometry = new THREE.PlaneGeometry(1,1)
     var _boxGeometry = new THREE.BoxBufferGeometry(1,1,1)
     {//ie的mesh 加了polygonOffset也是会重叠。所以去掉前面的face：  （但是突然ie又播放不了videoTexture）
         var newIndex = [..._boxGeometry.index.array]
-        newIndex.splice(4 * 6, 6)
+        newIndex.splice(4 * 6, 12)
         _boxGeometry.setIndex(new THREE.BufferAttribute(new Uint16Array(newIndex),1))
     }
     var originPhotoCount = photoLoaded = originModelCount = modelLoaded = 0;
@@ -35,10 +24,11 @@ window.initHot = function(model){
     var _boxMat = new THREE.MeshPhongMaterial({ 
         color: "#eeeeee",
         transparent: !0,
-        opacity: 0.8
+        opacity: 0.8,
+        side:THREE.DoubleSide
     })
     
-
+    var autoSizeInfo = {minSize : 120,  maxSize : 600,   nearBound : 1 , farBound :  15}
     var hotGroup = new THREE.Object3D;  hotGroup.name = "hotGroup"
     model.add(hotGroup);   model.hotGroup = hotGroup
     
@@ -50,7 +40,7 @@ window.initHot = function(model){
           , o = "en" == manage.number("lang") ? "&lang=" + manage.number("lang") : "";
         -1 == r.indexOf("?") ? src = link + "?time=" + randomTime().getTime() + "&id=" + window.number + o : src = link + "&time=" + randomTime().getTime() + "&id=" + window.number + o 
             
-        return src 
+         return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1/', 'https://culture.4dage.com/JHSuperTow/')    
     }
     var removeSrcPostMark = function(url){//去除texture.load时自动加上的'?'
         var index = url.indexOf('?')
@@ -136,7 +126,7 @@ window.initHot = function(model){
     class Hot extends THREE.Object3D{
         constructor(info, source){    
             super()
-            
+             
             
             this.sid = info.sid;
             this.preDeal(info, source)// source:来源
@@ -362,10 +352,11 @@ window.initHot = function(model){
                     } 
                 }
                 
-                //this.hasRequestLoad = true
+                
                 video.volume = 0
                 video.muted = true
-               
+                video.currentTime = 0
+                
                 this.material_.map = new THREE.VideoTexture(video) 
                 this.material_.map.wrapS = this.material_.map.wrapT = THREE.ClampToEdgeWrapping;
                 
@@ -397,6 +388,7 @@ window.initHot = function(model){
                     }
                     this.changeShineTex(this.styleImg)
                 }
+                this.info.texSrc = null
             }
             if(this.material_.map){
                 /*  this.material_.map.minFilter = THREE.LinearFilter;
@@ -428,6 +420,9 @@ window.initHot = function(model){
             } 
             this.changeMaterial(getShineMat(tex1, tex2)) 
             this.styleImg = styleImg
+            
+            this.info.styleImg = styleImg.map(img=>img.src)
+            
         }
         
         
@@ -591,8 +586,7 @@ window.initHot = function(model){
             }    
             
             if(info.texSrc){
-                if(manage.removeSrcPostMark) info.texSrc = manage.removeSrcPostMark(info.texSrc)
-                
+                info.texSrc = manage.removeSrcPostMark(info.texSrc)
             }
                          
                 
@@ -726,7 +720,7 @@ window.initHot = function(model){
              
             let maxCount = browser.isMobile() ? 2000 : 5000
             let c = model.panos.list.length * model.colliders.length
-            if(settings.isEdit || c < maxCount){  
+            if(window.isEdit ||  c < maxCount){  //编辑页面保险起见还是全部算完后才可浏览，就能保证保存全部的visiblePano
                 this.info.visiblePanos = common.getVisiblePano(customPositions,  model.panos.list, {
                     model: model.colliders , posAtPanos  
                 })  
@@ -749,15 +743,15 @@ window.initHot = function(model){
                         console.log(window.hotsi ?(++window.hotsi): (window.hotsi = 1))
                         clearInterval(interval)
                     }
-                }, Hot.visiEveryDurSlice ) 
+                }, Hot.visiEveryDurSlice )// visiEveryDurSlice 等在main中定义
             }
             
         }
         
             
         updateVisible(panos, visibility) { 
-            if(settings.isEdit && editTool.hotpoint.editSpot == this){
-                return true
+            if(window.isEdit && editTool.hotpoint.editSpot == this){
+                return this.visible = true
             }
             
             this.visible = visibility != void 0 ? visibility : (!this.info.visiblePanos || !!panos.find(pano=>this.info.visiblePanos.includes(pano.id)))
@@ -774,10 +768,10 @@ window.initHot = function(model){
                 return this.cornerPoints[player.currentPano.id]
             }else{
                 var boundPoint,  cornerPoint
+                var center//中心点
                 if(this.plane){ 
-                    var center = this.plane.position.clone()
-                    boundPoint = [
-                        center,
+                    center = this.plane.getWorldPosition()
+                    boundPoint = [ 
                         new THREE.Vector3(-0.5, 0.5, 0),
                         new THREE.Vector3(0.5, 0.5, 0),
                         new THREE.Vector3(0.5, -0.5, 0),
@@ -806,11 +800,11 @@ window.initHot = function(model){
                 var maxLat = -Infinity
                 var minLat = +Infinity
                 var pos1 = player.currentPano.position.clone();
-                var pos2 = this.position.clone()
-                var dir = pos2.clone().sub(pos1).normalize()
+                center = this.position.clone()  //模型bound的中心点已经位移到了hot中心点。 注意不能用getWorldPosition，得到的会是偏移的
+                var dir = center.clone().sub(pos1).normalize()
                 var centerDirInfo = { } 
                 player.cameraControls.controls.panorama.lookAt.call( centerDirInfo , null, dir )
-                    
+                     
                 boundPoint.forEach(e=>{//lon左右
                     var point = e.applyMatrix4(this.mesh.matrixWorld);
                     var dir = point.clone().sub(pos1).normalize()
@@ -852,19 +846,18 @@ window.initHot = function(model){
                         math.getDirByLonLat(minLon, minLat),
                         math.getDirByLonLat(maxLon, minLat),
                         math.getDirByLonLat(minLon, maxLat),
-                    ]
- 
+                    ] 
                     cornerPoint = dirs.map(e=>{
                         return e.clone().add(pos1) 
                     })
-                       
+                    cornerPoint = [center, ...cornerPoint]   //最后增加一个中心点
                 
                 
                 }
                 
-                if(this.objObject){
+                /* if(this.objObject){
                     cornerPoint = [pos2, ...cornerPoint]
-                }
+                } */
                 
                 
                 //addPoints(cornerPoint)
@@ -887,7 +880,7 @@ window.initHot = function(model){
         
         inSight(){
             //return true
-            if(settings.isEdit)return true // 太容易move了
+            if(window.isEdit)return true // 太容易move了
              
             if(player.mode == 'panorama'){
                 if(!player.camera) return
@@ -936,11 +929,22 @@ window.initHot = function(model){
                 this.quaternion.copy(player.camera.quaternion)
             }
             
-            
+
+            this.updateScale()
         }
                     
-                    
-
+            updateScale(e, t) {//自适应调节大小 
+                if(!DATA.autoAdjustHotScale || this.texType != 'shine' )return
+                //let renderSize = player.sceneRenderer.renderer.domElement 
+                let renderSize = player.sceneRenderer.renderer.getSize()
+                
+                var scale = convertTool.getScaleForConstantSize($.extend(autoSizeInfo,{
+                    camera:player.camera,  resolution:{x:renderSize.width, y:renderSize.height},
+                    position: this.position.clone() ,
+                }))
+                this.plane.scale.set(scale,scale,scale)
+                
+            }     
 
         switchPlay(state){//手动播放暂停 
             this.pausedByUser = !state
@@ -957,7 +961,7 @@ window.initHot = function(model){
             if(!state || state == 'stop'){
                 if(!video.paused){
                     video.pause()
-                    console.log("pause " + this.sid)
+                    //console.log("pause " + this.sid)
                 }
                
                 if(state == 'stop'){
@@ -968,7 +972,7 @@ window.initHot = function(model){
             }else if(state){
                 if(video.paused){
                     video.play()
-                    console.log("play " + this.sid)                    
+                    //console.log("play " + this.sid)                    
                 }                    
                   
             }
@@ -1028,46 +1032,55 @@ window.initHot = function(model){
               , n = []
               , r = this.mesh.getWorldPosition();
             if (e === "panorama") {
-                var o = t.position.clone().sub(r).normalize();
-                n.push(function(t, i) {//scoreFunctions.direction
+                /* var o = t.position.clone().sub(r).normalize();
+                n.push(function(t, i) {//scoreFunctions.direction 最好这个漫游点在currentPano到热点之间的路径上。但是这样的话可能就看不到热点正面，所以删掉
                     return function(e) {
-                        return e.position.clone().sub(t).normalize().dot(i) * window._settings.navigation.directionFactor
+                        return e.position.clone().sub(t).normalize().dot(i) * window._settings.navigation.directionFactor 
                     }}(r, o)
-                )
+                ) */  
             }
             var a = new THREE.Vector3;
             i.push(function(e) {
                     return Math.abs(e.position.x - r.x) > window._settings.tags.visibility.cameraClearance   || Math.abs(e.position.z - r.z) > window._settings.tags.visibility.cameraClearance  
-                }, function(e) {
+                },
+
+                function(e) {
                     a.copy(r).sub(e.position);
                     var t = -THREE.Math.radToDeg(Math.atan(a.y / Math.sqrt(a.x * a.x + a.z * a.z)))
                       , i = window._settings.tags.navigate.tiltTolerance 
                     return window._settings.insideLookLimitDown - i < t && t < window._settings.insideLookLimitUp + i
-                }, 
+                },
+                
                 (pano)=>{ // add
                     return player.checkHasNeighbor(pano) 
-                }
-     
-            ),
-            n.push(  function(t, i) {//scoreFunctions.distanceSquared
-                    return i = i || a.navigation.distanceFactor,
-                    function(e) {
-                        return t ? t.position.distanceToSquared(e.position) * i : 0
+                },
+                
+                (pano)=>{ // add
+                    return this.info.visiblePanos.includes(pano.id)
+                }    
+            )
+            n.push(
+                (function(hot, i) {   //scoreFunctions.distanceSquared
+                    return  function(pano) {
+                        //i = a.navigation.distanceFactor
+                        return hot ? hot.position.distanceToSquared(pano.position) * i : 0
                     }
-                }(this, -2));
+                })(this, -2)
+                ,
+                
+                (pano)=>{//尽量正对hot
+                    let dir = new THREE.Vector3(0,0,1).applyQuaternion(this.quaternion)
+                    let dir2 = new THREE.Vector3().subVectors(pano.position, this.position).normalize();
+                    let s = dir.dot(dir2) * 10;
+                    //console.log(pano.id + ":" + s)
+                    return s
+                } 
+            
+            );
+                
+                
             var s = t.model.panos.sortByScore(i, n);
-            /* if (s && window._settings.tags.navigate.lineOfSight) {
-                for (var l = 0; l < s.length; l++) {
-                    var c = s[l].pano
-                      , h = c.position.distanceTo(r);
-                    p.set(c.position, r.clone().sub(c.position).normalize());
-                    var u = p.intersectObjects(t.model.colliders);
-                    if (0 === u.length || u[0].distance > h)
-                        return console.log(l),
-                        c
-                }
-                return null
-            } */
+            console.log(s)
             return s && 0 < s.length && s[0].pano
         }
          
@@ -1110,9 +1123,9 @@ window.initHot = function(model){
                     exit.style["z-index"] = "3"
                     exit.onclick = ()=>{
                         $(div).remove()
-                        if(g_bgAudio && g_bgAudio.pauseByHot){
-                            manage.switchBgmState(true)
-                        }
+                        
+                        Hot.closePopup()
+                        
                     }  
                     
                     var myElement = document.createElement("iframe");
@@ -1126,12 +1139,8 @@ window.initHot = function(model){
                     div.appendChild(exit);
                     div.appendChild(myElement)
                     
+                    SoundManager.play('hot')
                     
-                    if(g_bgAudio && !g_bgAudio.paused){
-                        manage.switchBgmState(false); 
-                        g_bgAudio.pauseByHot = true
-                    } 
-                    if(g_tourAudio)g_tourAudio.pause()
                     
                 }
                 
@@ -1146,18 +1155,41 @@ window.initHot = function(model){
             var popup = document.getElementById("popup");
             
             if (openHot) {
-                if(g_bgAudio && !g_bgAudio.paused){
-                    manage.switchBgmState(false); 
-                    g_bgAudio.pauseByHot = true
-                } 
-                if(g_tourAudio)g_tourAudio.pause()
+                g_currentHot = this,
+                popup.style.display = "block",
+                popup.classList.add("wait");
+                var n = document.createElement("iframe");
+                 
+                SoundManager.play('hot')
+                
+                var src = getLink(this.info.link   )
+                n.src = src;
+                n.id = "id1",
+                n.allowTransparency = "true";
+                var a = document.getElementById("id1");
+                if (void 0 === a || null == a) {
+                    document.querySelector(".popup-content").appendChild(n);
+                    var s = !1;
+                    window.loaddingSuccess = function() {
+                        s = !0
+                    }
+                    ,
+                    setTimeout(function e() {
+                        if (s) {
+                            var t = document.querySelector("#id1").contentWindow.document;
+                            t.querySelector("video") && (t.querySelector("video").play(),
+                            !t.querySelector("video").paused && t.querySelector(".playPause") && t.querySelector(".playPause").classList.add("fa-pause")),
+                            t.querySelector("audio") && t.querySelector("audio").play()
+                        } else
+                            setTimeout(e, 300)
+                    }, 800)
+                }
             }
             
             
             
             var done = function() {
                 player.flyingToTag = !1;
-                openHot &&  window.player.emit('openHotspot', this.sid)
                 openHot && popup.classList.remove("wait")
             }.bind(this);
         
@@ -1167,7 +1199,7 @@ window.initHot = function(model){
                 return;
             }
         
-            var c = /* m.tags.navigate.nearestPano && */ this.closestPanoTowardTag(player.mode, player.currentPano) || player.currentPano
+            var c = this.closestPanoTowardTag(player.mode, player.currentPano) || player.currentPano
               , h = this.mesh.getWorldPosition();
             player.flyingToTag = !0;
             
@@ -1286,15 +1318,19 @@ window.initHot = function(model){
                 }
             }
         } 
+        
         changeBoxHelperDisplay(show){
-            this.visible_ = this.visible
             if(show){
+                this.visible_ = this.visible
                 this.visible = true
                 this.mesh.boxHelper.visible = true
             }else{
-                this.visible = this.visible_
+                if(this.visible_ != void 0){
+                    this.visible = this.visible_
+                } 
                 this.mesh.boxHelper.visible = false
             }
+            
         } 
         
         
@@ -1308,33 +1344,39 @@ window.initHot = function(model){
         
         requestDownload(type,callback) { 
             var plane = this.plane;
+             
             
             if(type == 'photo'){
                 if(this.photoHasRequestLoad || this.texType != 'photo')return;
-                console.log('overlay beginDownload : ' + this.sid)
-                this.material_.map = Texture.load(this.info.texSrc, (tex)=>{ 
+                //console.log('overlay beginDownload : ' + this.sid)
+                 
+                /* this.material_.map =  */Texture.load(this.info.texSrc, (tex)=>{ 
                     callback && callback()
                     if(!tex.image ){
                         return  //只是单纯用了相同src的tex，但image仍未加载完
                     }
                     if(!this._loadDones)return
+                    dealMap(tex)
                     
                     setTimeout(Hot.loadNext, 50) 
                     hotGroup.children.forEach(e=>{
-                        if(e.info.texSrc == this.info.texSrc){ 
+                        if(e.info.texSrc == this.info.texSrc && e.info.texType == type  ){ 
                             e.material_.color.set("#FFFFFF") 
                             e.material_.opacity = 1;
-                            console.log('overlay loaded: ' + e.sid) 
-                            e.hasRequestLoad = true
+                            console.log('overlay loaded: ' + e.sid + " - " + this.info.texSrc.split('/').pop());
+                        
+                        
+                             
                             e.texMedia = tex.image
 
                             {//animation不同致使的不能使用同一个texture 
-                                if(settings.isEdit){
+                                if(window.isEdit){
                                     if(animateTexSrcs[e.info.texSrc]){
-                                        e.material_.map = new THREE.Texture(); //编辑动画直接不用一个texture, 故而animation也不同
-                                        e.material_.map.image = tex.image
+                                        e.material_.map = tex.clone(); //编辑动画直接不用一个texture, 故而animation也不同
                                         e.material_.map.needsUpdate = true
+                                        
                                     }else{
+                                        e.material_.map = tex
                                         animateTexSrcs[e.info.texSrc] = 1
                                     } 
                                 }else{
@@ -1346,15 +1388,15 @@ window.initHot = function(model){
                                             }
                                         }
                                         if(!finded){
-                                            let tex = new THREE.Texture()  
-                                            animateTexSrcs[e.info.texSrc].set(e.info.animateInfo, tex)  
-                                            e.material_.map = tex
-                                            e.material_.map.image = tex.image  
+                                            let tex_ = tex.clone();
+                                            animateTexSrcs[e.info.texSrc].set(e.info.animateInfo, tex_)  
+                                            e.material_.map = tex_ 
                                         } 
                                     }else{
                                         let object = new Map(); 
                                         object.set(e.info.animateInfo, tex) 
                                         animateTexSrcs[e.info.texSrc] = object//注册第一个texSrc
+                                        e.material_.map = tex
                                     }
                                      
                                     
@@ -1374,16 +1416,17 @@ window.initHot = function(model){
                             {
                                 e._loadDones.forEach(a=>a())
                                 e._loadDones = null
+                                e.photoHasRequestLoad = true
                             }
                             e.material_.needsUpdate = true
+                            
+                         
+                            
                         }
                     })
                     
                 })
-                this.material_.map.wrapS = this.material_.map.wrapT = THREE.ClampToEdgeWrapping;
-                this.material_.map.minFilter = THREE.LinearFilter;
-                this.material_.map.magFilter = THREE.LinearFilter;
-                this.material_.map.generateMipmaps = true;
+                
 
                 this.photoHasRequestLoad = true
             
@@ -1420,7 +1463,7 @@ window.initHot = function(model){
     }
     
     Hot.beginShineHot = function(){  
-        if(!settings.isEdit && shineMats.length == 0)return
+        if(!window.isEdit && shineMats.length == 0)return
         
         
         transitions.trigger({
@@ -1549,7 +1592,54 @@ window.initHot = function(model){
     }  
      */
      
+    //判断是否是移动端，如果是给关闭按钮添加touchstart事件
+    
+    
+     
     
+    Hot.closePopup = ()=>{// 关闭热点页面
+        if(!g_currentHot) return;
+        g_currentHot = null;
+        var hotPop = document.getElementById('popup'); 
+            hotPop.style.display = "none";
+        document.querySelector(".popup-content").removeChild(document.getElementById("id1"));
+        $("#popup iframe:last").remove();
+         
+        
+        SoundManager.pause('hot', true)//自动播放被中断的音频 （bgm
+        
+         
+        return false
+    }  
+        
+ 
+    if(browser.isMobile()){
+        $('#closepop').on("touchstart",Hot.closePopup); 
+    }else{
+        $('#closepop').on("click",Hot.closePopup); 
+    }
+    
+    
+    
+    // Hot.createHotList = function() {
+    //     var docFragment = document.createDocumentFragment();
+    //     var hots = hotGroup.children.filter(hot=>hot.info.actionType.openHot);
+    //     hots = hots.sort((a,b)=>{return a.order - b.order});
+    //     hots.forEach((hot)=>{
+    //         var li = document.createElement('li');
+    //         var span = document.createElement('span');
+    //         span.innerHTML = hot.info.title || '热点';
+    //         // console.log(span.innerHTML);
+    //         li.hot = hot;   // 列表每一项对应一个热点
+    //         li.appendChild(span);
+    //         docFragment.appendChild(li);
+             
+    //     })  
+    //     var ul = document.querySelector('#hotListContent ul');
+    //     ul && ul.appendChild(docFragment);
+         
+    // }
+            
 
 }
 
@@ -1560,7 +1650,7 @@ window.initHot = function(model){
 
     保存 JSON.stringify(editTool.hotpoint.getSavingInfo())
 
-
+    可能需要再写一份保存到overlay 给旧场景项目使用
 
 
     最好后台有针对手机版的做一个压缩。压缩成几个档位。

web/public/static/js/SpecialScene.js

@@ -0,0 +1,68 @@
+//针对客户的需求，给不用的大场景修改
+var SpecialScene = function(){};
+
+SpecialScene.prototype.special = function() {
+    var num = manage.number("m"),that = this;
+    return {
+        //之前执行的代码
+        beforeImplement : function(){
+            
+        },
+        //之后执行的代码
+        afterImplement : function(){
+            switch(num)
+            {
+                case "391":
+                that.data391();
+                break;
+                case "409":
+                that.data412();
+                break;
+                case "410":
+                that.data412();
+                break;
+                case "411":
+                that.data412();
+                break;
+                case "412":
+                that.data412();
+                break;
+                case "413":
+                // that.data413();
+                break;
+                case "415":
+                that.data413();
+                break;
+            }
+        }
+    }
+
+};
+
+SpecialScene.prototype.data412 = function(){
+    $("#myCompany").addClass("JLogo");
+    $("#myCompany").empty().append("<img src=https://super.4dage.com/images/JLogo.png alt=logo style='height: 100%' />");
+    $("#loaderCoBrandName").hide();
+    $("[data-index=all]").text("All");
+    $("[data-index=0]").text("Floor 1");
+    $("[data-index=1]").text("Floor 2");
+}
+
+SpecialScene.prototype.data413 = function(){
+    var btn = '<div class="warpper-LY"><a  target="_blank"  href="http://model3d.4dage.com/3D/2018/model/LY4/index.html">精品鉴赏</a></div>';
+    $("body").append(btn);
+}
+
+SpecialScene.prototype.data391 = function(){
+    var safari = '<link rel="apple-touch-icon" sizes="180x180" href="images/icons/hnrd.jpg" />';
+    $("head").append(safari);
+}
+
+var specialScene = new SpecialScene()
+
+ 
+ 
+/* //本地场景替换前缀
+window.isLocal = true 
+settings.localPrefix =  "https://SUPER.4dage.com/"  
+ */

web/public/static/js/loadCAD.js

@@ -26,78 +26,24 @@ window.grendCAD = (function grendCAD() {
 
   function loadDOM($parent) {
     if (initDOM) return initDOM;
-    let $outerDiv = document.createElement('div')
     let $layer = document.createElement('div')
     let $cad = document.createElement('div')
-    let $jiantou = document.createElement('div')
-    let $jtimg = document.createElement('img')
-    $jtimg.src="static/images/phone_step_05.png"
-    $jiantou.id = 'cadimg'
-
-
 
     $layer.className = 'cad'
-    $jiantou.className = 'jiantou'
-    $outerDiv.className = 'cadouter'
-
     $cad.id = 'cad'
     $layer.appendChild($cad)
-    $jiantou.appendChild($jtimg)
-    $outerDiv.appendChild($layer)
-
-
-    let wh= 200
 
 
     let style = document.createElement('style')
     style.innerHTML = `
-      .jiantou{
-        display: none!important;
-        position: fixed;
-        width: 40px;
-        height: 50px;
-        right: 40px;
-        background: rgba(0, 0, 0, .6);
-        top: 46px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 0 5px 5px 0;
-        cursor: pointer;
-      }
-      .jiantou>img{
-        width:30%;
-      }
-      .jiantouactive{
-        right: 0;
-        transform: rotate(180deg);
-      }
-      .cadouter {
-        display: none!important;
-        position: absolute;
-        right: 80px;
-        top: 46px;
-        width: ${wh}px;
-        height: ${wh}px;
-        background: rgba(0, 0, 0, .6);
-        border-radius: 5px 0 5px 5px;
-        overflow: hidden;
-      }
-
-      .cadouteractive{
-        right: 200%;
-        
-      }
-
       .cad {
-        display: none!important;
         position: absolute;
-        left: 50%;
-        top: 50%;
-        right:unset;
-        transform: translate(-50%, -50%);
-        width: ${wh*1.4}px;
-        height: ${wh*1.4}px;
+        right: 80px;
+        top: 16px;
+        width: 200px;
+        height: 200px;
+        background: rgba(0, 0, 0, .3);
+        border-radius: 5px;
       }
 
       .cad > div {
@@ -106,13 +52,10 @@ window.grendCAD = (function grendCAD() {
       }
 
       @media only screen and (max-width: 600px) { 
-        .cadouter,.jiantou{
-          display: none!important;
-        }
         .cad {
             position: absolute;
-            left: 16px;
-            top: 65px;
+            right: 15px;
+            top: 50px;
             width: 100px;
             height: 100px;
             background: rgba(0, 0, 0, .3);
@@ -122,21 +65,10 @@ window.grendCAD = (function grendCAD() {
     `
 
     document.documentElement.appendChild(style)
-    document.documentElement.appendChild($outerDiv)
-    document.documentElement.appendChild($jiantou)
-
-    
+    $('body').append($layer)
     $parent.appendChild(style)
-    $parent.appendChild($outerDiv)
-    $parent.appendChild($jiantou)
-
-    $($jiantou).click(()=>{
-      $($jiantou).toggleClass('jiantouactive')
-      $($outerDiv).toggleClass('cadouteractive')
-
-      
-    })
-    return $outerDiv
+    $parent.appendChild($layer)
+    return $layer
   }
 
 
@@ -212,7 +144,7 @@ $.ajax({
       url: '//super.4dage.com/data/'+ window.number +'/floor.json', 
       method: 'GET',
       success(res) {
-        grendCAD(res, document.documentElement, data.cadSignColor, data.cadBorderColor, data.cadBorderWidth)
+        grendCAD(res, document.querySelector('body'), data.cadSignColor, data.cadBorderColor, data.cadBorderWidth)
       }
     })
   }

web/public/static/js/myShow.js

@@ -60,9 +60,29 @@ var g_weixinObj = {
 }
 
 var settings = {
-    overlay:{
-		width:1, height:0.5, depth:0.02
-	}  
+    hotClickEvent:{
+        video:{
+            playAndPause:true,
+            examine:false,
+            openHot:false 
+        },
+        photo:{
+            examine:false,
+            openHot:false 
+        },
+        shine:{
+            examine:true,
+            openHot:true  
+        }
+    },
+    //默认的：
+    teleportTime:  1500,//瞬间过渡的时间 
+    flytimeDistanceMultiplier:150, 
+    flyTime:750, 
+    
+    //dontExamHot:true  
+    transparentBg: false,
+    bgImg:  null 
 }
 if(window.number == '725'||window.number == '724'){
     settings.mobileNavHigh = true

web/public/static/js/overlay.js

@@ -1,550 +0,0 @@
-var MathLight = {};
-MathLight.RADIANS_PER_DEGREE = Math.PI / 180;
-MathLight.DEGREES_PER_RADIAN = 180 / Math.PI;
-
- 
- 
-
-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.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 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() {
-                    return false;
-                });
-                //禁止右键点击出
-
-                video.src = manage.dealURL(info.file);
-                info.media = video;
-                info.type = "video"
-
-                /* video.addEventListener('loadeddata', ()=>{
-                    console.log(this.sid + " loaded!!!")
-                }) */
-                
-                video.oncanplaythrough = function() {
-                    plane.material.map.needsUpdate = !0
-                   
-                    video.play()
-                        
-                     
-                }
-                
-                
-                video.volume = 0
-                video.muted = true
-                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;
-                
-                /* this.animateInfo = {
-                        cellXcount : 4,
-                        cellYcount : 2,
-                        loop : true,
-                        duration : 1000 
-                    }
-                */
-
-        
-            }
-            
-            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; 
-        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 = this.transformAtPanos[ getTransformSid()] || {}
-         
-        
-        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;
-                plane.material.map.needsUpdate = true
-            }
-                
-            this.file = info.file;
-        }
-        this.overlayType = info.type;
-
-        if (!!this.hasBox != !!info.hasBox) {
-            this.addBox(!this.hasBox);
-        }
-
-        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;
-        }
-        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.getVisiblePanos = function() {//在不同点还不一样
-        var depth = this.scale.z * settings.overlay.depth;
-        var getPos = function(position, quaternion, width, height){//每个overlay位置对应5个坐标，plane中心和四个角的位置
-            
-            var cornerPoint = [
-                new THREE.Vector3(0, 0, depth),
-                new THREE.Vector3(-width/2, height/2, depth),
-                new THREE.Vector3(width/2, height/2, depth),
-                new THREE.Vector3(width/2, -height/2, depth),
-                new THREE.Vector3(-width/2, -height/2, depth),
-            ]; 
-            
-            return cornerPoint.map(e=>{
-                return e.clone().applyQuaternion(quaternion).add(position)
-            }) 
-            
-        }
-        
-        var customPositions = getPos(this.posCustom, this.quaCustom, this.widthCustom, this.heightCustom)
-        var posAtPanos = {}
-        
-        for(let panoId in this.transformAtPanos){
-            if(panoId == 'outSide')continue;
-            posAtPanos[panoId] = getPos(this.transformAtPanos[panoId].pos, this.transformAtPanos[panoId].qua, this.transformAtPanos[panoId].width, this.transformAtPanos[panoId].height)
-            
-        }  
-        
-        
-        this.visiblePanos = common.getVisiblePano(customPositions, {
-            model: null , posAtPanos
-        });
-    }
-    
-    
-    
-    Overlay.prototype.updateVisible = function(panos, visibility) {
-        
-        if(settings.isEdit && EditOverlay.editPlane == this){
-            return true
-        }
-        
-        this.visible = visibility != void 0 ? visibility : !!panos.find(pano=>this.visiblePanos.includes(pano))
-        
-        if (this.overlayType == 'video'){
-            //this.switchPlay(this.visible,  this.visible ? null : 'stop' );//可见时不操作；不可见时停止
-            this.update()
-        }
-        
-        
-            
-        
-        /* if(this.animateInfo){ //在player.update里更新
-            if(this.visible){
-                GifTexDeal.start(this.animation)
-            }else{
-                GifTexDeal.stop(this.animation)
-            }
-        } */ 
-    }
-    
-    
-    Overlay.updateVisibles = function(panos) {
-        if (panos === true) {
-            player.overlayGroup.children.forEach(e=>e.updateVisible(null,true))
-        } else {
-            player.overlayGroup.children.forEach(e=>e.updateVisible(panos))
-        }
-    }
-
-
-    Overlay.prototype.switchPlay = function(state){//手动播放暂停 
-        this.pausedByUser = !state
-        
-        this.videoControl(state)
-       
-        
-    }
-    
-
-
-    Overlay.prototype.videoControl = function(state){
-        if(this.overlayType != "video")return
-        var video = this.plane.material.map.image
-        if(!state || state == 'stop'){
-            video.paused || video.pause()
-            if(state == 'stop'){
-                video.currentTime = 0;
-               
-            }
-             
-            //console.log("pause")
-        }else if(state){ 
-            video.paused && video.play()
-             
-            //console.log("play")
-        }
-    }     
-    
-    
-    
-    Overlay.prototype.inSight = function(){
-        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.update = function(){//实时监测播放
-        if(this.overlayType == "video"){
-            if(this.visible && !this.pausedByUser && this.inSight()){
-                this.videoControl(true) 
-            }else{
-                this.videoControl(false) 
-            }
-        }else if(this.animateInfo){ 
-            if(this.visible && this.inSight()){
-                GifTexDeal.start(this.animation)
-            }else{
-                GifTexDeal.stop(this.animation)
-            } 
-        }
-    }
-    
-    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 beginDownload : ' + this.sid)
-        var plane = this.plane;
-
-        plane.material.map = Texture.load(this.file, ()=>{
-            
-            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)
-            
-            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;
-        plane.material.map.magFilter = THREE.LinearFilter;
-        plane.material.map.generateMipmaps = true;
-
-        this.hasRequestLoad = true
-    }
-
-    Overlay.loadQueue = []; //等待下载的overlay，目前只针对photo
-    Overlay.maxLoadingCount = 3; //同时正在load图片的数量
-    Overlay.loadNext = ()=>{//继续requestDownload  loadQueue中前排的item
-
-        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.getNeedLoad = function() {//计算获取loadQueue，每次都重新计算，覆盖旧的
-        if (!player || !player.domElement || !player.mode)
-            return;
-
-        if (player.mode != 'panorama') {
-            if (!Overlay.loadWhenOutside)
-                return; 
-
-            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<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
-        }
-        ];
-        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 = 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);
-
-    }
-
-    Overlay.load = ()=>{//开始下载图片
-        Overlay.getNeedLoad() 
-        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;
-
-}
-
-

web/public/static/js/shiyou.js

@@ -0,0 +1,30 @@
+let SHIYOU = {
+  fn:{
+    clktofade(){
+      $('.welcome').fadeOut()
+    }
+  },
+  bindevents:()=>{
+    $('.welcome > video').bind('ended',()=>{
+      $('.welcome').fadeOut()
+    });
+    $('.jumpvideo').click(()=>{
+      $('.welcome').fadeOut()
+    })
+
+    $('.myBacImg').bind('mousewheel',()=>{
+      return false
+    });
+ 
+    $('.myBacImg').bind('pointermove touchmove',()=>{
+      return false
+    });
+
+    // e.addEventListener("pointermove", this.onPointerMove.bind(this)),
+  },
+  start(){
+    this.bindevents()
+  }
+}
+
+SHIYOU.start()

web/src/pages/Home.vue

@@ -9,12 +9,16 @@
 
     <!-- 主容器 -->
     <div id="player">
+      <!-- 后面加的图片 -->
+      <div class="myBacImg">
+        <div class="img"></div>
+      </div>
     </div>
     <div id="gui-parent">
       <!-- 进度条加载 -->
       <gui-loading />
       <div id="hot"></div>
-      <div id="gui" style="display: none;">
+      <div id="gui" style="display: none">
         <!-- 退出VR模式按钮 -->
         <div id="vrOff">
           <img id="vrOffImg" src="images/vrOffImg.png" alt="" />
@@ -35,7 +39,16 @@
         <!-- logo -->
         <div
           id="myCompany"
-          style="width:100%;position:absolute;bottom:0px;text-align:center;font-size:14px;font-family: '微软雅黑';font-weight:580;color: rgba(255, 255, 255, 0.8);"
+          style="
+            width: 100%;
+            position: absolute;
+            bottom: 0px;
+            text-align: center;
+            font-size: 14px;
+            font-family: '微软雅黑';
+            font-weight: 580;
+            color: rgba(255, 255, 255, 0.8);
+          "
         >
           <!-- 四维时代提供技术支持 -->
         </div>
@@ -45,7 +58,7 @@
       <web-vr />
 
       <!-- loading -->
-      <div id="gui-spinner" style="display: none;">
+      <div id="gui-spinner" style="display: none">
         <div class="gui-spinner-icon"></div>
       </div>
 
@@ -61,9 +74,9 @@
 
       <welcome @close="hideWelcome" v-if="showWelcome" />
 
-        <div class="loading" v-if="0">
-            <span>加载中...</span>
-        </div>
+      <div class="loading" v-if="0">
+        <span>加载中...</span>
+      </div>
     </div>
   </div>
 </template>
@@ -103,7 +116,7 @@ export default {
     return {
       showWelcome: true,
       hotspots: "",
-      loading: true
+      loading: true,
     };
   },
 
@@ -136,11 +149,11 @@ export default {
       window.evt = document.createEvent("HTMLEvents");
       window.evt.initEvent("loadfinish", false, false);
       window.addEventListener("loadfinish", () => {
-        this.loading=false
-        document.title = "珠海高新区中共党史学习教育园地线上展厅"
+        this.loading = false;
+        document.title = "珠海高新区中共党史学习教育园地线上展厅";
         this.getHotSpotList();
         window.player.on("openTips", () => {
-          this.$showTips()
+          this.$showTips();
         });
 
         window.player.on("openHotspot", (data) => {
@@ -150,6 +163,14 @@ export default {
         });
       });
     });
+    // 顶部俯视的时候禁止鼠标放大缩小和拖动
+        $('.myBacImg').bind('mousewheel', () => {
+            return false
+        });
+
+        $('.myBacImg').bind('pointermove touchmove', () => {
+            return false
+        });
   },
 };
 </script>
@@ -160,22 +181,53 @@ export default {
   height: 100%;
 }
 
-.loading{
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 10000;
-    background: #000;
-    >span{
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%,-50%);
-      color: #fff;
-      font-size: 16px;
-      display: inline-block;
-    }
+.loading {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  background: #000;
+  > span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 16px;
+    display: inline-block;
+  }
+}
+
+/* 后面追加的图片 */
+.myBacImg {
+  display: none;
+  z-index: 1;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.myBacImg .img {
+  position: fixed;
+  width: 60vw;
+  height: 48vw;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: url("../assets/myBacImg.png");
+  background-size: 100% 100%;
+}
+
+@media screen and (max-width: 600px) {
+  .myBacImg .img {
+  background: url("../assets/myBacImgMo.png");
+  background-size: 100% 100%;
+    width: 100vw;
+    height: 110vw;
   }
+}
 </style>