cd_mingrenguan/js/Hot.js

 
//合并热点和展览 


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, 12)
        _boxGeometry.setIndex(new THREE.BufferAttribute(new Uint16Array(newIndex),1))
    }
    var originPhotoCount = photoLoaded = originModelCount = modelLoaded = 0;
    
    var defaultTex1 = Texture.load(g_HotImage.point);
    var defaultTex2 = Texture.load(g_HotImage.point2)    
    
    /* var _boxMat = new THREE.MeshBasicMaterial({ 
        color: "#eeeeee",
        transparent: !0,
        opacity: 0.8
    }) */
    var _boxMat = new THREE.MeshPhongMaterial({ 
        color: "#eeeeee",
        transparent: !0,
        opacity: 0.8,
        side:THREE.DoubleSide
    })
    

    var hotGroup = new THREE.Object3D;  hotGroup.name = "hotGroup"
    model.add(hotGroup);   model.hotGroup = hotGroup
    
    var animateTexSrcs = {}        
    
    var getLink = function(link){
        var src = '';
        var r = link.substring(link.indexOf("html") + 4)
          , 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 
    }
    var removeSrcPostMark = function(url){//去除texture.load时自动加上的'?'
        var index = url.indexOf('?')
        if(index>-1){
            return url.slice(0, index)
        }else return url
    }
    
    
    {//get plane Bound
        var planeBound = new THREE.Box3() 
        var cornerPoint = [
            new THREE.Vector3(-0.5, 0.5, 0),
            new THREE.Vector3(0.5, 0.5, 0),
            new THREE.Vector3(0.5, -0.5, 0),
            new THREE.Vector3(-0.5, -0.5, 0),
        ]
        cornerPoint.forEach(e=>{
            planeBound.expandByPoint(e)
        })
        
    }
 
    var shineMats = [];  
    var getShineMat = function(texture1, texture2){
        var mat = shineMats.find(e=>e.uniforms.texture1.value == texture1 &&  e.uniforms.texture2.value == texture2)
        if(mat) return mat
        else{
            var mat = new THREE.ShaderMaterial({ 
                uniforms: {
                    color: {
                        type: "c",
                        value: new THREE.Color(16720384)
                    },
                    opac: {
                        type: "f",
                        value: 0
                    },
                    texture1: {
                        type: "t",
                        value: texture1
                    },
                    texture2: {
                        type: "t",
                        value: texture2
                    }
                }, 
                vertexShader: "varying vec2 vUv;\n\nvoid main() {\n\n vUv =  uv ;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n}\n",
                fragmentShader: "varying vec3 vNormal;\n\nvarying vec2 vUv;\n\nuniform float opac;\n\nuniform vec3 color;\n\nuniform sampler2D texture1;\n\nuniform sampler2D texture2;\n\nvoid main() {\n\nvec4 tcolor1 = texture2D( texture1, vUv );\n\nvec4 tcolor2 = texture2D( texture2, vUv );\n\ngl_FragColor = mix(tcolor1,tcolor2 ,opac) + tcolor2*0.2; }\n"
                ,transparent: !0
            })
            shineMats.push(mat)
            return mat
        }
        
    }





    var modelGeos = [];
    var getModelGeo = function(url){
        var geo = modelGeos.find(e=>e.url = url )
        if(geo) return geo
        else{
            
            var geo = null;
     
            geo.url = url
        }
    }









    
    class Hot extends THREE.Object3D{
        constructor(info, source){    
            super()
            
            
            this.sid = info.sid;
            this.preDeal(info, source)// source:来源
            
            this.info = info
            this.cornerPoints = []
            
            
            this.build(info);
            this.name = "hot_" + this.sid   ;
            
            model.hots[info.sid] = this
            
        }
         


        build(info) {
            /* this.changeMaterial(new THREE.MeshBasicMaterial({ 
                color: "#00c8af",
                opacity: 0.4,
                transparent: !0,
                polygonOffset: true,
                //是否开启多边形偏移		//ie不开启时blank也不会闪烁
                polygonOffsetFactor: -0.9,
                //多边形偏移因子
                polygonOffsetUnits: -4.0,
                //多边形偏移单位  
            })) 
          
            if(!info.objSrc){
                this.addPlane() 
                if (info.hasBox)   this.addBox(true)  
            }else{ 
                this.addModel(new THREE.Mesh())//暂时创建个空的
                 
            }     */
            
             
            hotGroup.add(this)
            this.setTitleElem()          
            this.setFromInfo(info)
        }
        
        
        
        
        
        setFromInfo(info, media, objObject) {
            //1 恢复到编辑之前 2 初始加载 
            var plane = this.plane; 
            /* var transformAtPanos = {}
            for(var i in info.transformAtPanos){
                transformAtPanos[i] = {//只保留一个位移，主要原因是大小变化和热点大小设置冲突了, isSprite和qutaernion衝突
                    pos : info.transformAtPanos[i].pos && info.transformAtPanos[i].pos.clone(),
                    //qua : info.transformAtPanos[i].qua && info.transformAtPanos[i].qua.clone(),
                }      
            } 
            
            this.transformAtPanos = transformAtPanos */
            //在每个漫游点独立设置的position。 
            var curPanoTransform = this.info.transformAtPanos[ getTransformSid()] || {}
              
        
            //没有单独设置position的漫游点使用的position
            this.position.copy(curPanoTransform.pos || info.position)
            this.rotation.copy(info.rotation) 
            this.scale.copy(info.scale)
            
            this.changeTexType(info.texType, media) 
            
            if(!info.objSrc){
                this.addPlane() 
                if (!!this.hasBox != !!info.hasBox) {
                    this.addBox(!this.hasBox);
                }  
            }else{ 
                this.addModel(objObject || new THREE.Mesh())//暂时创建个空的
                 
            } 
            

            this.updateMatrixWorld()
            
            /* if(!this.info.visiblePanos){//移到model.build时，在collider建好之后
                this.getVisiblePanos()
            } */
            
            
            
            {//gif
                if(this.animation){
                    GifTexDeal.remove(this.animation)
                }
              
                if(this.info.animateInfo && this.material_.map){
                    this.animation = GifTexDeal.addAnimation(this.material_.map, this, this.info.animateInfo, this.sid )
                    this.visible && this.inSight() && GifTexDeal.start(this.animation)
                }    
            }
            
            
            
            /*  if(this.info.modelBound){
                this.mesh.updateMatrixWorld()
                this.mesh.boxHelper2 = new THREE.Box3Helper( new THREE.Box3().copy(this.info.modelBound.bound).applyMatrix4(this.mesh.matrixWorld),  new THREE.Color("#00aaee"));
                model.add(this.mesh.boxHelper2)  
                
            }else{
                var bound = new THREE.Box3()
                
                var cornerPoint = [
                    new THREE.Vector3(-0.5, 0.5, 0),
                    new THREE.Vector3(0.5, 0.5, 0),
                    new THREE.Vector3(0.5, -0.5, 0),
                    new THREE.Vector3(-0.5, -0.5, 0),
                ]
                cornerPoint.forEach(e=>{
                    bound.expandByPoint(e)
                })
                
                this.mesh.updateMatrixWorld()
                this.mesh.boxHelper2 = new THREE.Box3Helper( bound.applyMatrix4(this.mesh.matrixWorld),  new THREE.Color("#00aaee"));
                model.add(this.mesh.boxHelper2)
                
            }   */
        }

        
        
        
        
        changeTexType(texType, media){
            
            var plane = this.plane; 
            
            if( this.texType != texType || media == 'clear'){
                //删除旧的
                if(this.texType == 'shine'){
                    /* this.material_.uniforms.texture1.value.dispose() 
                    this.material_.uniforms.texture2.value.dispose()  */ //为了恢复 不删
                }else{ 
                    //this.material_.map.dispose()
                    
                    if(this.texType == 'video'){
                        this.texMedia && this.texMedia.pause()
                    }else{
                      
                    }
                        
                }
                
                if(this.material_ && !hotGroup.children.find(e=>e!=this && e.material_ == this.material_ )){
                    this.material_.dispose()
                }
                
                //添加新的
                if(texType == 'shine'){
                    
                }else{
                     
                    this.changeMaterial(new THREE.MeshBasicMaterial({ 
                        color: "#00c8af",
                        opacity: 0.4,
                        transparent: !0,
                        polygonOffset: true,
                        //是否开启多边形偏移		//ie不开启时blank也不会闪烁
                        polygonOffsetFactor: -0.9,
                        //多边形偏移因子
                        polygonOffsetUnits: -4.0,
                        //多边形偏移单位  
                    }))
                    
                    
                    if(texType == 'video'){
                    
                    }else{
                        
                    }
                        
                }
            
                
            }
            
            
            
            this.texType = texType 
            if(media == 'clear'){
                this.material_.opacity = 0.4;
                this.texMedia = null 
                return
            }
            
            
                
            if(texType == 'video'){//视频不能共用一个，否则会一起播放暂停
                var video
                if(media){
                    video = media
                }else{
                    if(!this.info.texSrc)return
                    var video = $(`<video  controls="controls" loop autoplay x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"></video>`)[0]
                    video.src = manage.dealURL(this.info.texSrc);
                    video.name = this.info.fileName
                } 
                
                
                
                video.setAttribute("crossOrigin", 'Anonymous')//要在src设置好前解决跨域
                
                $(video).on('contextmenu', function() {
                    return false;
                });//禁止右键点击出
                

                this.texMedia = video;
                  
                video.oncanplaythrough = ()=> {
                    if(this.texMedia == video){
                        this.material_.map.needsUpdate = !0 
                        video.play() 
                    } 
                }
                
                
                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;
                
                this.material_.map.generateMipmaps = true;
                
            }else if(texType == 'photo'){
                
                if(media){
                    this.texMedia = media;
                    this.info.texSrc = media.src;
                    this.material_.map = new THREE.Texture();   //texture也不能共用一个，因为有的会有动画，就不一样
                    this.material_.map.image = media //image可以共用
                    this.material_.map.needsUpdate = !0  
                    
                }else{
                    if(!this.info.texSrc)return
                    this._loadDones = []
                    this.material_.opacity = 0.1;
                }
            }else if(texType == 'shine'){ 
                if(media){
                    this.changeShineTex(media)
                }else{
                    this.styleImg = /* this.styleImg || */ [];
                    if(this.info.styleImg){
                        this.styleImg = this.info.styleImg.map((src)=>{  
                            return {src:/* manage.dealURL( */src } //如果要dealURL,在predeal里
                        }) 
                    }
                    this.changeShineTex(this.styleImg)
                }
            }
            if(this.material_.map){
                /*  this.material_.map.minFilter = THREE.LinearFilter;
                this.material_.map.magFilter = THREE.LinearFilter; */
                dealMap(this.material_.map);
                this.material_.color.set("#FFFFFF");
                this.material_.opacity = 1
                this.material_.needsUpdate = true
            }
             
            
            
            
            
        } 

        
        changeShineTex(styleImg){ 
            
            styleImg = styleImg || this.styleImg
            var tex1, tex2
            if(styleImg.length){
                tex1 = Texture.load(styleImg[0].src);
                tex2 = Texture.load(styleImg[1]&&styleImg[1].src || styleImg[0].src); 
                
            }else{
                tex1 = defaultTex1;
                tex2 = defaultTex2; 
            } 
            this.changeMaterial(getShineMat(tex1, tex2)) 
            this.styleImg = styleImg
            
            this.info.styleImg = styleImg.map(img=>img.src)
            
        }
        
        
        
        
        
        
        changeMaterial(mat){
            this.material_ = mat;
            this.mesh && this.mesh.traverse((mesh)=>{
                if(mesh.material && !(mesh instanceof THREE.Box3Helper)){
                    mesh.material = this.material_;
                } 
            })  
        }
        
        
        
        
        
        
        /* 
        actionType: "common"
        infoAttribute: {images: [], styleImg: [], model: [], video: [], bgName: "background", iframe: [], title: "11",…}
        bgName: "background"
        content: "111"
        iframe: []
        images: []
        model: []
        styleImg: []
        title: "11"
        video: []
        isSprite: 0
        link: "https://www.4dmodel.com/SuperTwo/hot_online1/index.html#/?m=EDwn769489868"
        linkType: "common"
        noAction: 0
        order: 4
        position: {x: -4.238, y: 1.32, z: -0.648}
        rotation: {x: 0, y: 0.018105110200249575, z: 0}
        transformAtPanos: {}
        IO4Kq7494332: {actionTy


        depth: 0.08
        file: "https://super.4dage.com/data/TEST/edit/20200805_172635119.mp4"
        hasBox: 1
        height: 0.7289
        media: ["video"]
        pos: [-5.562, 1.349, 1.994]
        qua: [0, 0.70672, 0, 0.70749]
        sid: "1596619585929"
        transformAtPanos: {,…} */
     
        preDeal(info, source){// source:来源
        
            var convertValue = function(v ,Type){
                var value; 
                if(v instanceof Array){
                    v.forEach((v1)=>{v1 = parseFloat(v1)})
                    value = new Type().fromArray(v);
                }else{
                    
                    if(!(v instanceof Type)){
                        for(let i in v){v[i] = parseFloat(v[i])}
                        value = new Type().copy(v);
                    }else{
                        value = v
                    }
                    
                }
                return value
            } 
            
            
            if (!info.transformAtPanos) info.transformAtPanos = {}
            
            
            if(source == 'byHot'){
                var infoAttribute =  info.infoAttribute || {} 
                info.title = infoAttribute.title || info.title 
                info.model = infoAttribute.model || info.model || []     //模型链接
                info.images = infoAttribute.images || info.images  || [] 
                info.video = infoAttribute.video || info.video  || [] 
                info.bgName = infoAttribute.bgName || info.bgName 
                info.backgroundMusic = info.backgroundMusic || info.backgroundMusic 
                info.iframe = infoAttribute.iframe || info.iframe || [] 
                info.styleImg = infoAttribute.styleImg || info.styleImg || [] 
                info.content =  infoAttribute.content || info.content 
             
                
                {
                    let action = CloneObject(settings.hotClickEvent.shine);
                    if(info.actionType == 'noAction' || info.noAction){
                        action.examine = false,
                        action.openHot = false 
                    }else if(info.actionType == 'dontExam'){
                        action.examine = false 
                    }
                    info.actionType = action
                }
               
                
                if(info.quaternion){
                    info.rotation = new THREE.Euler().setFromVector3(convertValue(info.quaternion, THREE.Quaternion )) 
                }else{
                    info.rotation = new THREE.Euler().setFromVector3(convertValue(info.rotation, THREE.Vector3 ))  //热点的旧数据很多是字符串 
                }
                 
                var s = Hot.getDefaulScale(info.hotIconScale)
                info.scale = new THREE.Vector3(s,s,0.02)    
               
              
                delete info.infoAttribute;
                /* for (let i in this.transformAtPanos) {
                    info.transformAtPanos[i].pos = new THREE.Vector3().fromArray(info.transformAtPanos[i].pos)
                    info.transformAtPanos[i].qua && (info.transformAtPanos[i].qua = new THREE.Quaternion().fromArray(info.transformAtPanos[i].qua))
                } */
                
                info.texType = "shine"
              
            }else{
                if(source == 'byOverlay'){
                    info.texType = info.media[0] 
                    //info.title = info.texType == 'video'?'视频':'图片'
                    
                    info.texSrc = info.file 
                    info.actionType = CloneObject(settings.hotClickEvent[info.texType]);//给一个默认
                      
                    delete info.media
                    
                    info.rotation = new THREE.Euler().setFromQuaternion(convertValue(info.qua, THREE.Quaternion )) 
                    info.position = info.pos
                    delete info.pos;
                    delete info.qua;
                    
                    
                    let a = info.texSrc.split('/');
                    info.fileName = a.pop()
                    
                    info.scale = new THREE.Vector3(
                        info.width,
                        info.height,
                        info.depth
                    )    
                    delete info.width; delete info.height; delete info.depth;
                    delete info.file
                }else{
                    
                    info.rotation = new THREE.Euler().fromArray(info.rotation)//.setFromVector3(info.rotation) 

                }                    
                
                
                
                info.model = info.model || []     //模型链接
                info.images = info.images  || [] 
                info.video = info.video  || [] 
                info.iframe = info.iframe || [] 
                info.styleImg = info.styleImg || [] 
                
            }    
            
            if(info.texSrc){
                info.texSrc = manage.removeSrcPostMark(info.texSrc)
            }
                         
                
            //whole:
        
            //为了兼容旧数据，尽量和hot的数据靠近，最后保存在hot里
            info.position = convertValue(info.position, THREE.Vector3) 
            info.scale = convertValue(info.scale, THREE.Vector3) 
            delete info.quaternion
            
            info.linkType = info.linkType || "common"


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

            

        } 
        
        
        
        
        
        
        
        
        
        addBox(state) {
            if (state == !!this.hasBox) {
                return;
            }
            if (state) {
                var box = new THREE.Mesh(_boxGeometry,_boxMat)
                box.position.set(0, 0, 1 / 2);
                box.renderOrder = 3
                this.plane.position.set(0, 0, 1);
                this.add(box);
                this.box = box;

            } else {
                this.plane.position.set(0, 0, 0);
                this.remove(this.box);
                this.box = null;
            }
            this.hasBox = this.info.hasBox = state
        }

        /* getSizeByScale() {
            return {
                width: settings.defaultOverlaySize[0] * this.scale.x,
                height: settings.defaultOverlaySize[1] * this.scale.y
            }
        } 
        
        getScaleBySize(width, height) {
            return {
                x: width / settings.defaultOverlaySize[0],
                y: height / settings.defaultOverlaySize[1],
            }
        }*/
        
        setVisiblePanos(visibleData){
            if(visibleData)this.info.visiblePanos = visibleData  
            else if(!this.info.visiblePanos) this.getVisiblePanos() 
        } 
        
        getVisiblePanos(){//在不同点还不一样  
            var depth = this.hasBox ? this.scale.z  : 0;
            var width = this.scale.x, height = this.scale.y
            
            var cornerPoint

            if(this.plane){
                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),
                ]  
            }else{
                var bound = new THREE.Box3().copy(this.info.modelBound.bound)
                var center = bound.center()
                cornerPoint = [
                    new THREE.Vector3(center.x,center.y,center.z),
                    new THREE.Vector3(bound.min.x, bound.min.y, bound.min.z ),
                    new THREE.Vector3(bound.min.x, bound.min.y, bound.max.z ), 
                    new THREE.Vector3(bound.min.x, bound.max.y, bound.min.z ),
                    new THREE.Vector3(bound.max.x, bound.min.y, bound.min.z ),
                    new THREE.Vector3(bound.max.x, bound.max.y, bound.min.z ),
                    new THREE.Vector3(bound.max.x, bound.min.y, bound.max.z ),
                    new THREE.Vector3(bound.min.x, bound.max.y, bound.max.z ),
                    new THREE.Vector3(bound.max.x, bound.max.y, bound.max.z ),
                ]; 
                
            }

    
            var getPos = (position)=>{//每个overlay位置对应5个坐标，plane中心和四个角的位置
                if(this.plane){  
                    return cornerPoint.map(e=>{
                        return e.clone().applyEuler(this.info.rotation).add(position)
                    })
                    
                }else{ 
                    var matrixWorld = new THREE.Matrix4().compose(position, this.quaternion, this.scale)
                    matrixWorld.multiplyMatrices(matrixWorld, this.mesh.matrix) 
                     
                    return cornerPoint.map(e=>{
                        return e.clone().applyMatrix4(matrixWorld);
                    }) 
                }
                
                
            }
            
            this.info.visiblePanos = [] 
            var customPositions = getPos(this.info.position )
            var posAtPanos = {}
        
            for(let panoId in this.info.transformAtPanos){
                if(panoId == 'outSide')continue;
                posAtPanos[panoId] = getPos(this.info.transformAtPanos[panoId].pos ) 
            }   
            
                    
            
             
            let maxCount = browser.isMobile() ? 2000 : 5000
            let c = model.panos.list.length * model.colliders.length
            if(settings.isEdit || c < maxCount){  
                this.info.visiblePanos = common.getVisiblePano(customPositions,  model.panos.list, {
                    model: model.colliders , posAtPanos  
                })  
                
            }else{
                let start = 0
                let interval = setInterval(()=>{
                    let end = start + Hot.visiPanosCountSlice; 
                    end = Math.min(end, model.panos.list.length)
                    let i = start
                    start = end 
                    let panos = model.panos.list.slice(i,end)
                    
                    
                    this.info.visiblePanos = this.info.visiblePanos.concat( common.getVisiblePano(customPositions,  panos, {
                        model: model.colliders , posAtPanos  
                    }));
                    
                    if(end>=model.panos.list.length){
                        console.log(window.hotsi ?(++window.hotsi): (window.hotsi = 1))
                        clearInterval(interval)
                    }
                }, Hot.visiEveryDurSlice ) 
            }
            
        }
        
            
        updateVisible(panos, visibility) { 
            if(settings.isEdit && editTool.hotpoint.editSpot == this){
                return true
            }
            
            this.visible = visibility != void 0 ? visibility : (!this.info.visiblePanos || !!panos.find(pano=>this.info.visiblePanos.includes(pano.id)))
            
            if (this.texType == 'video'){
                //this.switchPlay(this.visible,  this.visible ? null : 'stop' );//可见时不操作；不可见时停止
                this.update(player)
            } 
        }
        
        
        getCornerPoint(){//获取在每个漫游点上的视觉边界点  可以打开boxHelper和addBall来观测是否准确
            if(this.cornerPoints[player.currentPano.id]){
                return this.cornerPoints[player.currentPano.id]
            }else{
                var boundPoint,  cornerPoint
                if(this.plane){ 
                    var center = this.plane.position.clone()
                    boundPoint = [
                        center,
                        new THREE.Vector3(-0.5, 0.5, 0),
                        new THREE.Vector3(0.5, 0.5, 0),
                        new THREE.Vector3(0.5, -0.5, 0),
                        new THREE.Vector3(-0.5, -0.5, 0),
                    ]  
                    
                }else{
                  
                    var bound = new THREE.Box3().copy(this.info.modelBound.bound)  
                    boundPoint = [  
                        new THREE.Vector3(bound.min.x, bound.min.y, bound.min.z ),
                        new THREE.Vector3(bound.min.x, bound.min.y, bound.max.z ), 
                        new THREE.Vector3(bound.min.x, bound.max.y, bound.min.z ),
                        new THREE.Vector3(bound.max.x, bound.min.y, bound.min.z ),
                        new THREE.Vector3(bound.max.x, bound.max.y, bound.min.z ),
                        new THREE.Vector3(bound.max.x, bound.min.y, bound.max.z ),
                        new THREE.Vector3(bound.min.x, bound.max.y, bound.max.z ),
                        new THREE.Vector3(bound.max.x, bound.max.y, bound.max.z ),
                    ];
                    
                }
                 
                
                var maxLon = -Infinity
                var minLon = +Infinity
                var maxLat = -Infinity
                var minLat = +Infinity
                var pos1 = player.currentPano.position.clone();
                var pos2 = this.position.clone()
                var dir = pos2.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()
                    var dirInfo = { } 
                    player.cameraControls.controls.panorama.lookAt.call( dirInfo , null, dir )
                    var diffLon = (dirInfo.lon-centerDirInfo.lon) % 360
                    
                    
                    if(Math.abs(diffLon)>180){//因为有时需要根据符号判断是在中心的左边还是右边，所以限制在180内
                        diffLon += (diffLon>0 ? -360 : 360)
                    }
                    
                    var diffLat = dirInfo.lat-centerDirInfo.lat
                     
                    maxLon = Math.max(diffLon, maxLon)
                    minLon = Math.min(diffLon, minLon)
                    maxLat = Math.max(diffLat, maxLat)
                    minLat = Math.min(diffLat, minLat)
                     
                })    
                
                var diffLon = maxLon - minLon
                var diffLat = maxLat - minLat
                
                
                if(diffLat>180) {//可能是到了反面。不好算，直接返回所有boundPoint
                    
                    cornerPoint = boundPoint
                    
                }else{                       
                    //读取lon lat的最大最小值，勾勒出一个没有倾斜的矩形 。它比boundPoint看起来范围更大些
                    maxLon = maxLon +  centerDirInfo.lon  
                    maxLat = maxLat +  centerDirInfo.lat
                    minLon = minLon +  centerDirInfo.lon  
                    minLat = minLat +  centerDirInfo.lat
                    
                    var dirs = [
                        math.getDirByLonLat(maxLon, maxLat),
                        math.getDirByLonLat(minLon, minLat),
                        math.getDirByLonLat(maxLon, minLat),
                        math.getDirByLonLat(minLon, maxLat),
                    ]
 
                    cornerPoint = dirs.map(e=>{
                        return e.clone().add(pos1) 
                    })
                       
                
                
                }
                
                if(this.objObject){
                    cornerPoint = [pos2, ...cornerPoint]
                }
                
                
                //addPoints(cornerPoint)
                
                
                this.cornerPoints[player.currentPano.id] = {cornerPoint, diffLon, diffLat}
                
                return this.cornerPoints[player.currentPano.id]
            }
            
                
                 
            
            
            
            
             
        }
        
        
        inSight(){
            //return true
            if(settings.isEdit)return true // 太容易move了
             
            if(player.mode == 'panorama'){
                if(!player.camera) return
                  
                var cornerPointInfo = this.getCornerPoint(); 
                var cornerPoint
                if(cornerPointInfo.diffLon < 15 && cornerPointInfo.diffLat < 15){//当很小的时候，只判断中心点即可
                    cornerPoint = [cornerPointInfo.cornerPoint[0]];
                }else{
                    cornerPoint = cornerPointInfo.cornerPoint
                }
                                           
                for(let i=0,j=cornerPoint.length;i<j;i++){//只要有一点可见就算看见 
                    var pos2d = math.getPos2d(cornerPoint[i], player.camera, $("#player")[0])
                    
                    if(pos2d.trueSide && pos2d.inSight)  return true
                    
                }
                 
            }else{//飞出要判断模型阻挡，有点耗时就算了
                return true
            }
        }
                
                
                
        update(player){
         
            if(player.mode == 'panorama'){//实时监测播放
                if(this.texType == "video"){
                    if(this.visible && !this.pausedByUser && this.inSight()){
                        this.videoControl(true) 
                    }else{
                        this.videoControl(false) 
                    }
                }else if(this.info.animateInfo){ 
                    if(this.visible && this.inSight()){
                        GifTexDeal.start(this.animation)
                    }else{
                        GifTexDeal.stop(this.animation)
                    } 
                }
            }    
            
            if(this.info.isSprite){
                this.quaternion.copy(player.camera.quaternion)
            }
            
            
        }
                    
                    


        switchPlay(state){//手动播放暂停 
            this.pausedByUser = !state
            
            this.videoControl(state)
           
        }
        


        videoControl(state){
            if(this.texType != "video" || !this.material_.map)return
            var video = this.material_.map.image
            if(!state || state == 'stop'){
                if(!video.paused){
                    video.pause()
                    //console.log("pause " + this.sid)
                }
               
                if(state == 'stop'){
                    video.currentTime = 0; 
                }
                 
                 
            }else if(state){
                if(video.paused){
                    video.play()
                    //console.log("play " + this.sid)                    
                }                    
                  
            }
        }     
        
        
                    
                
            
            
        /* setDefaultHotScale = function(){//设置成默认热点大小
            var w = DATA.hotIconScale) * g_HotMeshSize.g_HotMeshWidth
            this.scale.set( w, w, this.scale.z)
        }   */   
             
            
        
        setTitleElem(){
            var root = $("#hot");
            var title = this.info.title;
            if(title){
                if(!this.titleElem){
                    var elem = $(`<div></div>`)
                    root.append(elem);
                    this.titleElem = elem;
                } 
                this.titleElem.text(title)
            }else{
                if(this.titleElem){
                    this.titleElem.remove()
                    this.titleElem = null;
                }
            }
        } 
        
        
        showTitle(){
            if(!this.titleElem)return;
            var pos = math.getPos2d(this.position, player.camera, $("#player")[0])
            if(pos.trueSide){//inSight
                this.titleElem.css( { "left" : `${pos.pos.x}px`,  "top": `${pos.pos.y}px ` });
                this.titleElem.css("display","block");
            }else{
                this.titleElem.css("display","none");
            }                
        } 
        
        hideTitle(){
            if(!this.titleElem)return;
            this.titleElem.css("display","none");
        }
        
        
       
        closestPanoTowardTag(e, t) {
            var i = []
              , n = []
              , r = this.mesh.getWorldPosition();
            if (e === "panorama") {
                var o = t.position.clone().sub(r).normalize();
                n.push(function(t, i) {//scoreFunctions.direction
                    return function(e) {
                        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) {
                    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
                    }
                }(this, -2));
            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
            } */
            return s && 0 < s.length && s[0].pano
        }
         
        
        
        
        
        examine(options={}) {
            var openHot = this.info.link && this.info.actionType.openHot && !options.dontOpen
            var needExamine = options.examine || (!settings.dontExamHot && this.info.actionType.examine)  
            if(!openHot && !needExamine)return;
            
            
            if(openHot && this.info.linkType!="common" && this.info.iframe && this.info.iframe[0]){
                var src = getLink(this.info.iframe[0]);
                
                if(this.info.linkType=="jumpLink"){
                    var newPage = window.open(src, "_blank" ); 
                    newPage.focus();  
                    
                }else if(this.info.linkType=="iframeDiv"){
                    
                    var div = document.createElement("div");
                    div.style.position = 'fixed';
                    div.style.width = div.style.height = "100%";
                    div.style.left = div.style.top = '0';
                    div.style["z-index"] = "999"
                    
                    var exit = document.createElement("div");
                    exit.style["background-image"] = "url(images/vrOffImg.png)";
                    exit.style.position = 'absolute';
                    exit.style.width = exit.style.height = "50px";
                    exit.style.left = '17px';   exit.style.top = "20px"
                    exit.style.cursor = "pointer";
                    exit.style["background-repeat"] = "no-repeat";
                    exit.style["background-size"] = "25%"; 
                    exit.style["background-position"] = "center center"; 
                    exit.style["background-color"] = "rgba(0, 0, 0, 0.2)"; 
                    exit.style["border-radius"] = "50%";
                    exit.style["z-index"] = "3"
                    exit.onclick = ()=>{
                        $(div).remove()
                        if(g_bgAudio && g_bgAudio.pauseByHot){
                            manage.switchBgmState(true)
                        }
                    }  
                    
                    var myElement = document.createElement("iframe");
                    myElement.style.position = 'absolute';
                    myElement.style.width = myElement.style.height = "100%";
                    myElement.style.left = myElement.style.top = '0';
                     
                    myElement.src = src
                     
                    $("body").append(div);
                    div.appendChild(exit);
                    div.appendChild(myElement)
                    
                    
                    if(g_bgAudio && !g_bgAudio.paused){
                        manage.switchBgmState(false); 
                        g_bgAudio.pauseByHot = true
                    } 
                    if(g_tourAudio)g_tourAudio.pause()
                    
                }
                
                
                return;
            }
            
            
            if(!player.currentPano)return;   

            
            var popup = document.getElementById("popup");
            
            if (openHot) {
                g_currentHot = this,
                popup.style.display = "block",
                popup.classList.add("wait");
                var n = document.createElement("iframe");
                if(g_bgAudio && !g_bgAudio.paused){
                    manage.switchBgmState(false); 
                    g_bgAudio.pauseByHot = true
                } 
                if(g_tourAudio)g_tourAudio.pause()
                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 && popup.classList.remove("wait")
            }.bind(this);
        
            
            if(!needExamine){ 
                done()
                return;
            }
        
            var c = /* m.tags.navigate.nearestPano && */ this.closestPanoTowardTag(player.mode, player.currentPano) || player.currentPano
              , h = this.mesh.getWorldPosition();
            player.flyingToTag = !0;
            
            
            
            if (player.mode === 'panorama') {
                var d = {
                    pano: c,
                    lookAtPoint: h,
                    duration:  options.duration,
                    maxDistanceOverride: null,
                    skipWarpingCheck: !1,
                    aimDuration: options.aimDuration,
                    
                };
                player.flyToPano(d, done)
            } else {
                var p = {
                    pano: c
                };
                if (h) {
                    var f = (new THREE.Matrix4).lookAt(c.position, h, new THREE.Vector3(0,1,0));
                    p.quaternion = (new THREE.Quaternion).setFromRotationMatrix(f)
                }
                p.callback = done,
                p.duration = options.duration || 1500,
                p.mode = 'panorama',
                p.aimDuration = options.aimDuration
                player.flyToNewMode(p)
            }
        }
        
        
        
        addModel(object){ 
            if(this.objObject){
                this.remove(this.objObject)
            }
            this.objObject = object;
             
            /* object.traverse((mesh)=>{
                if(mesh.material && mesh.type == "hotSprite"){
                    mesh.material = this.material_;
                } 
            }) */
             
            object.name = this.info.objName;
            object.src = this.info.objSrc 
            
            
            
            this.info.hasBox = false
            this.addBox(false) 
            this.remove(this.plane);
            this.plane = null; 
            
         
            this.setMesh(this.objObject)
            //this.adjustModelAuto()
            if(this.info.modelBound){//应该不会改变
                var s = this.info.modelBound.scaleRatio
                this.mesh.scale.set(s,s,s)
                this.mesh.position.fromArray(this.info.modelBound.position)
                this.mesh.modelBound = this.info.modelBound 
 
            }
            this.material_.side = THREE.FrontSide
            this.changeBoxHelperDisplay(false)
            //this.mesh.boxHelper.visible = true
            
        }
        
        
        addPlane(){//换成plane
            if(this.plane)return
            this.plane = new THREE.Mesh(_planeGeometry, this.material_) 
            this.remove(this.objObject)
            this.objObject = null
            delete this.info.objSrc 
            delete this.info.objName
            delete this.info.modelBound     

            this.setMesh(this.plane)
            //this.material_.side = THREE.DoubleSide  //双面的话飞出来会看到悬空的
            
        }
        
        
        setMesh(mesh){
            this.mesh = mesh
            this.add(this.mesh);  
            this.mesh.renderOrder = 3  
            this.changeMaterial(this.material_) //re applyTo every mesh
            
            this.mesh.traverse((mesh)=>{
                mesh.type = "hotSprite"    //raycaster use
            })
            
            if(!this.mesh.boxHelper){ 
                var boxHelper = this.mesh.children.find(e=>e instanceof THREE.Box3Helper)
                if(boxHelper){
                    this.mesh.boxHelper = boxHelper
                }else{  
                    var bound 
                    if(this.objObject){
                        bound = new THREE.Box3().copy(this.info.modelBound.bound) 
                    }else{
                        bound = planeBound 
                    } 
                    bound.expandByVector(new THREE.Vector3(0.0001,0.0001,0.0001))
                    this.mesh.boxHelper = new THREE.Box3Helper( bound,  new THREE.Color( "#00ffff"));
                    this.mesh.add(this.mesh.boxHelper) 
                    this.mesh.boxHelper.material.depthTest = false;
                    this.mesh.boxHelper.material.transparent = true
                    this.mesh.boxHelper.visible = false
                }
            }
        } 
        changeBoxHelperDisplay(show){
            this.visible_ = this.visible
            if(show){
                this.visible = true
                this.mesh.boxHelper.visible = true
            }else{
                this.visible = this.visible_
                this.mesh.boxHelper.visible = false
            }
        } 
        
        
        /* addToLoadQueue() {
            if (this.texType == 'photo') {
                Hot.loadQueue.includes(this) || Hot.loadQueue.push(this)

            }
        } */
        
        
        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)=>{ 
                    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){ 
                            e.material_.color.set("#FFFFFF") 
                            e.material_.opacity = 1;
                            console.log('overlay loaded: ' + e.sid + " - " + this.info.texSrc.split('/').pop());
                        
                        
                             
                            e.texMedia = tex.image

                            {//animation不同致使的不能使用同一个texture 
                                if(settings.isEdit){
                                    if(animateTexSrcs[e.info.texSrc]){
                                        e.material_.map = tex.clone(); //编辑动画直接不用一个texture, 故而animation也不同
                                        e.material_.map.needsUpdate = true
                                        
                                    }else{
                                        e.material_.map = tex
                                        animateTexSrcs[e.info.texSrc] = 1
                                    } 
                                }else{
                                    if(animateTexSrcs[e.info.texSrc]){//已有该texSrc 
                                        let finded = false
                                        for(let i of animateTexSrcs[e.info.texSrc]){
                                            if(ifSame(i[0], e.info.animateInfo)){
                                                e.material_.map = i[1]; finded = true;  break;
                                            }
                                        }
                                        if(!finded){
                                            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
                                    }
                                     
                                    
                                }
                                
                            }
                            if(e.info.animateInfo && !e.animation){
                                e.animation = GifTexDeal.addAnimation(e.material_.map, e, e.info.animateInfo, e.sid )
                                e.visible && e.inSight() && GifTexDeal.start(e.animation)
                            }
                            
                            if(++photoLoaded == originPhotoCount){//data2.js中的所有photo加载完毕
                                Hot.allPhotoLoaded = true; 
                                Hot.whenAllFileLoaded && Hot.allModelLoaded && Hot.whenAllFileLoaded()
                            }
                             
                            {
                                e._loadDones.forEach(a=>a())
                                e._loadDones = null
                                e.photoHasRequestLoad = true
                            }
                            e.material_.needsUpdate = true
                            
                         
                            
                        }
                    })
                    
                })
                

                this.photoHasRequestLoad = true
            

            }else if(type == 'model'){
                if(this.modelHasRequestLoad || !this.info.objSrc)return;
                
                 //需要处理重复？ 
                objLoader.load(this.info.objSrc, (object)=>{
                    this.remove(this.mesh)
                    this.addModel(object)
                    
                    callback && callback()
                    if(++modelLoaded == originModelCount){//data2.js中的所有photo加载完毕
                        Hot.allModelLoaded = true; 
                        Hot.whenAllFileLoaded && Hot.allPhotoLoaded && Hot.whenAllFileLoaded()
                    }
                })
                
                
                
                this.modelHasRequestLoad = true
            }
        }            

    }
    
    Hot.updateVisibles = function(panos) {
        if (panos === true) {
            model.hotGroup.children.forEach(e=>e.updateVisible(null,true))
        } else {
            model.hotGroup.children.forEach(e=>e.updateVisible(panos))
        }
    }
    
    Hot.beginShineHot = function(){  
        if(!settings.isEdit && shineMats.length == 0)return
        
        
        transitions.trigger({
            func: function(e) {
                var opa = e <= .5 ? 2 * e : -2 * e + 2
                shineMats.forEach(mat=>{
                    mat.uniforms.opac.value = opa; 
                })   
            },
            cycling: !0,
            duration: 3e3,
            name: "hotShine"
        }) 
    }
    
    Hot.getDefaulScale = function(hotIconScale){ 
        return (hotIconScale || DATA.hotIconScale) * g_HotMeshSize.g_HotMeshWidth 
    }
    var loadings = [];
    Hot.loadQueue = []; //等待下载的overlay，目前只针对photo
    Hot.maxLoadingCount = 3; //同时正在load图片的数量
    Hot.loadNext = ()=>{//继续requestDownload  loadQueue中前排的item
        let count = Hot.maxLoadingCount - loadings.length
        Hot.loadQueue.slice(0, count).forEach(e=>{
            loadings.push(e) 
            //console.log(e)
            e.hot.requestDownload(e.type, ()=>{
                var i = loadings.indexOf(e)
                loadings.splice(i,1)
            })
        })
        Hot.loadQueue.splice(0, count) 
    }

    Hot.getNeedLoad = function() {//计算获取loadQueue，每次都重新计算，覆盖旧的
        if (!player || !player.domElement || !player.mode)
            return;
        var hots1, hots2
        if (player.mode != 'panorama') {
             

            if (Hot.loadQueue.length == 0) {
                hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad )
                hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad )
                Hot.loadQueue = hots1.map(e=>{return {hot:e, type:"photo"}}).concat(
                    hots2.map(e=>{return {hot:e, type:"model"}})
                )
            }
            return
        } 
        
        

        //Hot.loadWhenOutside = true
        
        hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad && (!e.info.visiblePanos || e.info.visiblePanos.includes(player.currentPano.id)))
        hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad && (!e.info.visiblePanos || e.info.visiblePanos.includes(player.currentPano.id)))
        if(hots1.length+hots2.length == 0){
            hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad )
            hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad )
        }    
            
          
        
        var cameraDir = player.getDirection()

        Hot.loadQueue = hots1.map(e=>{return {hot:e, type:"photo"}}).concat(
            hots2.map(e=>{return {hot:e, type:"model"}})
        )
        
        var request = [(item)=>{
            return true
        }];
        var rank = [(item)=>{
            var dis = item.hot.mesh.getWorldPosition().distanceTo(player.position);
            return -dis
        }
        , (item)=>{
            var tagDir = item.hot.mesh.getWorldPosition().sub(player.position)
            var angle = tagDir.angleTo(cameraDir)
            return -angle * 20
        }]
        var result = common.sortByScore(Hot.loadQueue, request, rank);
        //Hot.loadQueue = result ? result.slice(0, 5).map(e=>e.item) : model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.hasRequestLoad).slice(0, 2);
        Hot.loadQueue = result ? result.slice(0, 5).map(e=>e.item) : []
    }

    Hot.load = ()=>{//开始下载图片
        Hot.getNeedLoad() 
        Hot.loadNext()
        var hots1 = model.hotGroup.children.filter(e=>e.texType == 'photo' && !e.photoHasRequestLoad )
        var hots2 = model.hotGroup.children.filter(e=>e.info.objSrc && !e.modelHasRequestLoad )
        
        if (hots1.length+hots2.length > 0) {
            setTimeout(Hot.load, 200)
        } else {
            Hot.allRequestLoad = true
            console.log('allRequestLoad')
        }
    }
    Hot.startLoad = ()=>{ 
        originPhotoCount = hotGroup.children.filter(e=>e.texType == 'photo').length
        originModelCount = hotGroup.children.filter(e=>!!e.info.objSrc).length 
        if(originPhotoCount == 0 )Hot.allPhotoLoaded = true
        if(originModelCount == 0) Hot.allModelLoaded = true; 
        if(Hot.allModelLoaded && Hot.allPhotoLoaded) Hot.whenAllFileLoaded && Hot.whenAllFileLoaded()//所有加载完毕
        else{ 
            Hot.load()
        }
    }
    window.Hot = Hot   
        
     /* var ball = new THREE.Mesh(new THREE.SphereBufferGeometry(0.01),new THREE.MeshBasicMaterial({color:"#f00",depthTest:false,transparent:true}))
    var balls = []
    var addPoint = function(point){
        console.log(point)
        var ball1 = ball.clone()
        model.add(ball1);
        ball1.position.copy(point)
        balls.push(ball1)
    }
    var addPoints =  function(points){ 
        balls.forEach(e=>model.remove(e))
        balls = []
        points.forEach(e=>addPoint(e))
    }  
     */
     
    

}



/* 


    保存 JSON.stringify(editTool.hotpoint.getSavingInfo())

    可能需要再写一份保存到overlay 给旧场景项目使用


    最好后台有针对手机版的做一个压缩。压缩成几个档位。
    安卓手机firefox出现过视频mesh不可见或者闪烁的情况。
    
    
    视频最容易导致崩溃， 模型还好
    
    数据速率为4064kbps，1920*1080px  时测试部门电脑崩溃
    数据速率为1824kbps，720 *576px   时正常
    所以尽量降到2000以下 同时播放个数最好不超过2个 可能需要将src归零  并延迟加载、不自动播放
    
     */