vr-photo/yljq/js/ypano.js

var settings = {};
settings["onstart"] = "trace('on start...')";
settings["view.hlookat"] = 30;


const house ={
    // curr_id:2,
    idx:0,
    // direction:'D4',
    nextId:null,
    isLoading:false,
    numLoaded:0,
    mode:'menu',
    is_auto_play:false,
    texture:{
        id:-1,
        curr:null,
        next:null,
        isloading:false,
    },
    config:{
        lat_step:10,
        lon_step:10,
    },
    title:"瑶里景区",
    src:[
    {id:1,name:"guzhen",title:'千年古镇',view:{lat: -1.7857185363769528,lon: -25.542864990234374},
    direction:[
        {id:2,name:'F',angle:{lat: -10, lon: 16.3},offset:180},
        {id:3,name:'R',angle:{lat: -13.7, lon: 75.3},offset:-70},
        {id:6,name:'B',angle:{lat: -13.7, lon: 75.3},offset:-70},
        {id:7,name:'L',angle:{lat: -13.7, lon: 75.3},offset:-70}
    ],
    // D1:{id:2,angle:{lat: -10, lon: 16.3},offset:180},
    // D2:{id:3,angle:{lat: -13.7, lon: 75.3},offset:-70},
    // D3:{id:6,angle:{lat: -13.7, lon: 75.3},offset:-70},
    // D4:{id:7,angle:{lat: -13.7, lon: 75.3},offset:-70},
    spots:[
       {name:'按1跳转至仿明清古桥',position:{x:135.02634001646553,y: -18.541531481188343,z: -256},rotation:{x:0,y:0,z:0}},
       {name:'按2跳转至服务区',position:{x: 255.99999999999997, y: -2.243401100489121, z: 40.86223734613961},rotation:{x:Math.PI/2,y:-Math.PI/3,z:Math.PI/2}},
       {name:'按3跳转至古城墙',position:{x: -256, y: -28.249801117197098, z: -1.42468348463467},rotation:{x:Math.PI/2,y:-Math.PI/6,z:Math.PI/2}},
       {name:'按4跳转至古树',position:{x: -79.95672966662912, y: -44.97558105439687, z: 256},rotation:{x:0,y:0,z:0}}
    ]
},
    {id:2,name:"fangmingqingguqiao",title:'仿明清古桥',parent:1,view:{lat:-4.907144165039063,lon: 188.2071454},
    direction:[
        {id:null,name:'F'},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
     ]
},
    {id:3,name:"fuwuqu",title:'服务区',parent:1,view:{lat: -7.47857208 ,lon: 172.3500193},
    direction:[
        {id:4,name:'F',angle:{lat: -13.6, lon: 54},offset:180},
        {id:2,name:'B',angle:{lat: 2.7, lon: 16.7},offset:90},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],

    spots:[
        // {positio}
        {name:'按1跳转至程氏祠堂',position:{x: 255.99999999999997, y: -23.59033674128833, z: -13.384937948055738},rotation:{x:Math.PI/2,y:-Math.PI/6,z:Math.PI/2}},
        {name:'按2跳转至仿明清古桥',position:{x: -256, y: -28.566268036285038, z: -8.3744418975616},rotation:{x:Math.PI/2,y:-Math.PI/6,z:Math.PI/2}}
    ]
},
    {id:4,name:"chengshicitang",title:'程氏祠堂',parent:3,view:{lat: -5.6571446 ,lon: 181.8857138},
    // D1:{id:5,angle:{lat: 0, lon: 13.5},offset:0},
    direction:[
        {id:5,name:'F',angle:{lat: 0, lon: 13.5},offset:0},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
        {name:'按1跳转至陈毅居',position:{x: -255.99999999999997, y: -118.98430403698123, z: 4.6933538825472105},rotation:{x:Math.PI/2,y:-Math.PI/6,z:Math.PI/2}}
    ]
},
    {id:5,name:"chenyiju",title:'陈毅居',parent:4,view:{lat: -14.0142883 ,lon:12.064304},
    direction:[
        {id:null,name:'F'},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
    ]
},
    {id:6,name:"guchengqiang",title:'古城墙',parent:1,view:{lat: -3.7285663 ,lon: -122.8285818},
    direction:[
        {id:null,name:'F'},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
    ]
},
    {id:7,name:"gushu",title:'古树',parent:1,view:{lat: -5.22857 ,lon:136.4571441},
    direction:[
        {id:null,name:'F'},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
    ]
},
    {id:8,name:"shoupiaochu",title:'售票处',view:{lat: -3.1928558 ,lon: 166.885716},
    // D1:{id:9,angle:{lat: -4.5, lon: -48},offset:-90},
    direction:[
        {id:9,name:'F',angle:{lat: -4.5, lon: -48},offset:-90},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
        // {positio}
        {name:'按1跳转至仙人桥',position:{x: 32.05692316713218, y: -35.18905393081038, z: 256},rotation:{x:Math.PI/3,y:0,z:0}}
    ]
    
},
    {id:9,name:"xianrenqiao",title:'仙人桥',parent:8,view:{lat: -18.621429 ,lon: 113.74286},
    // D1:{id:10,angle:{lat: 3.8, lon: -15},offset:-90},
    // D2:{id:11,angle:{lat: 3.8, lon: -15},offset:-90},
    direction:[
        {id:10,name:'F',angle:{lat: 3.8, lon: -15},offset:-90},
        {id:11,name:'B',angle:{lat: 3.8, lon: -15},offset:-90},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
        {name:'按1跳转至南山瀑布',position:{x: -199.9938263054937, y: -59.49100505623731, z: 255.99999999999},rotation:{x:0,y:0,z:0}},
        {name:'按2跳转至仙女潭',position:{x: 130.25832756640813, y: -50.445126890140514, z: -256},rotation:{x:0,y:0,z:0}}
    ]
},
    {id:10,name:"nanshanpubu",title:'南山瀑布',parent:9,view:{lat: -17.6571424484 ,lon: 163.35000},
    direction:[
        {id:null,name:'F'},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
    ]
},
    {id:11,name:"xiannvtan",title:'仙女潭',parent:9,view:{lat: -19.157145 ,lon: 40.564288},
    // D1:{id:12,angle:{lat: -2.8, lon: 17},offset:180},
    direction:[
        {id:12,name:'F',angle:{lat: -2.8, lon: 17},offset:180},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
        {name:'按1跳转至开天辟地',position:{x: -209.73725040251847, y: -61.80104200737105, z: 256},rotation:{x:0,y:0,z:0}}
    ]
},
    {id:12,name:"kaitianpidi",title:'开天辟地',parent:11,view:{lat: -14.9785 ,lon:214.242847},
    direction:[
        {id:null,name:'F'},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[ 
    ]
},
    {id:13,name:"yaolihangpai",title:'瑶里航拍',view:{lat: -20.12143 ,lon: 121.24286255},
    // D1:{id:14,angle:{lat: 1.4, lon: 80},offset:180},
    // D2:{id:15,angle:{lat: 1.4, lon: 80},offset:180},
    // D3:{id:16,angle:{lat: 1.4, lon: 80},offset:180},
    // D4:{id:17,angle:{lat: 1.4, lon: 80},offset:180},
    direction:[
        {id:14,name:'F',angle:{lat: 1.4, lon: 80},offset:180},
        {id:15,name:'B',angle:{lat: 1.4, lon: 80},offset:180},
        {id:16,name:'L',angle:{lat: 1.4, lon: 80},offset:180},
        {id:17,name:'R',angle:{lat: 1.4, lon: 80},offset:180}
    ],
    spots:[
        {name:'按1跳转至瑶里航拍1',position:{x: -139.41044044624903, y: -68.33152420782919, z: 256},rotation:{x:0,y:0,z:0}},
        {name:'按2跳转至瑶里航拍2',position:{x: -256, y: -12.727990822231067, z: -110.34632793606},rotation:{x:Math.PI/2,y:-Math.PI/2,z:Math.PI/2}},
        {name:'按3跳转至瑶里航拍3',position:{x: 77.52461071027368, y: -31.160905545817563, z: -255.9999},rotation:{x:0,y:0,z:0}},
        {name:'按4跳转至瑶里航拍4',position:{x: 256, y: -46.42406470850259, z: 145.978111780317},rotation:{x:0,y:Math.PI/2,z:0}}
    ]
},
    {id:14,name:"yaolihangpai1",title:'瑶里航拍1',parent:13,view:{lat: -11.442856979 ,lon: 110.1},
    direction:[
        {id:null,name:'F'},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
    ]
},
    {id:15,name:"yaolihangpai2",title:'瑶里航拍2',parent:13,view:{lat: -8.55 ,lon: 245.52856979},
    direction:[
        {id:null,name:'F'},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
    ]
},
    {id:16,name:"yaolihangpai3",title:'瑶里航拍3',parent:13,view:{lat:-18.407143 ,lon: 319.1357},
    direction:[
        {id:null,name:'F'},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
    ]
},
    {id:17,name:"yaolihangpai4",title:'瑶里航拍4',parent:13,view:{lat:-25.15764 ,lon: 39},
    direction:[
        {id:null,name:'F'},
        {id:null,name:'B'},
        {id:null,name:'L'},
        {id:null,name:'R'}
    ],
    spots:[
    ]
}, 
],
direction:[
    {id:1,name:"F",at:{x:0,y:0,z:-1}},
    {id:2,name:"B",at:{x:0,y:0,z:1}},
    {id:3,name:"L",at:{x:-1,y:0,z:0}},
    {id:4,name:"R",at:{x:1,y:0,z:0}}
],
playList:{
    idx:0,
    orders:[
        {id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8},{id:9},{id:10},{id:11},{id:12},
        {id:13},{id:14},{id:15},{id:16},{id:17}
    ]
},
menuList:[
    {id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8},{id:9},{id:10},{id:11},{id:12},{id:13}
],
menu_control_select:-1,
zoom:{
    direction:0,
    step:30,
    is_selected:false,
    factor:1,
    status:'x0.9'
},
rotation:{
    is_auto:false,
}
} 



embedpano({ id: "krpanoSWFObject_",swf:"lib/tour.swf", xml:"js/tour.xml", target:"pano", html5:"auto", mobilescale:1.0, 
passQueryParameters:true, onready: krpanoReady, vars:settings});


function krpanoReady(krpano){
    // var krpano = document.getElementById('krpanoSWFObject_');
    window.krpano = krpano

    changeTourMode()

}


function changeTourMode(){
    if(house.mode==='menu'){
    }else{

    }
}

function onKeyEvent(e){
    console.log('dccc')
    console.log(e)
}


init();
animate();

function init() {

    const queryString = window.location.search;

    const urlParams = new URLSearchParams(queryString);

    const panoId = urlParams.get('id')?urlParams.get('id'):0

    house.idx = panoId

    const backurl = urlParams.get('backurl')?urlParams.get('backurl'):'yaoli.html'

    house.backurl = backurl


    const scene_name = 'scene_' + house.src[house.idx ].name

    changeScene(scene_name)


    initMenu()

    
    document.addEventListener('mousedown', onPointerStart, false);
    document.addEventListener('mousemove', onPointerMove, false);
    document.addEventListener('mouseup', onPointerUp, false);

    document.addEventListener('wheel', onDocumentMouseWheel, false);

    document.addEventListener('touchstart', onPointerStart, false);
    document.addEventListener('touchmove', onPointerMove, false);
    document.addEventListener('touchend', onPointerUp, false);

  
}

// function updateDirection(){

//     for(let d of house.src[house.idx].direction){
        
//             switch(d.name){
//                 case 'F':
//                     if(d.id!=null){
//                         document.getElementById("directionTop").innerHTML = house.src[d.id-1].title
//                         // document.getElementById("directionTop").style.visibility = true
//                         document.getElementById("direct_top").style.color = '#ffffff'
//                         document.getElementById("direct_top_img").src = './yaoimages/direction_top.png'
//                     }else{
//                         document.getElementById("directionTop").innerHTML = ''
//                         // document.getElementById("directionTop").style.visibility = false
//                         document.getElementById("direct_top").style.color = '#c1c1c1'
//                         document.getElementById("direct_top_img").src = './yaoimages/direction_top_disable.png'
//                     }
//                     break
//                 case 'B':
//                     if(d.id!=null){
//                         document.getElementById("directionLeft").innerHTML = house.src[d.id-1].title
//                         document.getElementById("direct_left").style.color = '#ffffff'
//                         document.getElementById("direct_left_img").src = './yaoimages/direction_left.png'
//                     }else{
//                         document.getElementById("directionLeft").innerHTML = ''
//                         document.getElementById("direct_left").style.color = '#c1c1c1'
//                         document.getElementById("direct_left_img").src = './yaoimages/direction_left_disable.png'
//                     }
//                     break
//                 case 'L':
//                     if(d.id!=null){
//                         document.getElementById("directionBottom").innerHTML = house.src[d.id-1].title
//                         document.getElementById("direct_bottom").style.color = '#ffffff'
//                         document.getElementById("direct_bottom_img").src = './yaoimages/direction_bottom.png'
//                     }else{
//                         document.getElementById("directionBottom").innerHTML = ''
//                         document.getElementById("direct_bottom").style.color = '#c1c1c1'
//                         document.getElementById("direct_bottom_img").src = './yaoimages/direction_bottom_disable.png'
//                     }
//                     break
//                 case 'R':
//                     if(d.id!=null){
//                         document.getElementById("directionRight").innerHTML = house.src[d.id-1].title
//                         document.getElementById("direct_right").style.color = '#ffffff'
//                         document.getElementById("direct_right_img").src = './yaoimages/direction_right.png'
//                     }else{
//                         document.getElementById("directionRight").innerHTML = ''
//                         document.getElementById("direct_right").style.color = '#c1c1c1'
//                         document.getElementById("direct_right_img").src = './yaoimages/direction_right_disable.png'
//                     }
//                     break
//                 default:
//                     break
//             }

//         }
//     // }

//     changeSpots()

// }

// function directionBack(){
//     const parent_id = house.src[house.idx].parent

//     if(parent_id){
//         const idx = getIdxFromId(parent_id)

//         changeTexture(idx)
//     }

// }

// function createText(textWord){
//     let canvas = document.getElementById('textCanvas')
//     // let canvas = document.createElement('canvas')
//     canvas.width = 320
//     canvas.height = 60

//     let ctx = canvas.getContext('2d')

//     ctx.fillStyle = "#fffff0";
//     // // ctx.font = 'normal 24pt "Microsoft Yahei"'
//     // // // const name = clientZhou.country[clientZhou.idx].name
//     // // ctx.fillText(name, 120, 60)
//     // // let textWord = clientZhou.country[clientZhou.idx].description
//     ctx.font = 'normal 24pt "Microsoft Yahei"'
//     let len = parseInt(textWord.length / 35)

//     const offset = (320 - 30*parseInt(textWord.length))/2

//     for (let i = 0; i < (len + 1); i++) {
//         let space =  (320 - 40*parseInt(textWord.length))/2
//         if (i === len) {
//             space = textWord.length - len * 35
//         }
//         let word = textWord.substr(i * 20, space)
//         ctx.fillText(word, offset, 15+35*(i+1))
//     }

//     let url = canvas.toDataURL('image/png')

//     let texture = new THREE.TextureLoader().load( url);
//     const tmaterial = new THREE.SpriteMaterial( {map:texture,transparent : true,opacity:1, side: THREE.DoubleSide} );
//     let text_plane2 = new THREE.Sprite( tmaterial );
//     text_plane2.scale.set(32,10,1);
//     // text_plane.position.set(30,30,30)
//     return text_plane2;

//  }



function initMenu(){
    var menu=document.getElementById("menu");
    while (menu.firstChild) {
        menu.removeChild(menu.firstChild);
    }

    let mid = 0

    for(let item of house.menuList){
        const dpano = document.createElement("div");
        dpano.className = 'pano'
        // dpano.attr({'data-id':item.id}) 
        for(let i in house.src){
            if(house.src[i].id===item.id){
                mid = i
                break
            }
        }

        dpano.setAttribute('data-id',mid);
        const title = document.createElement("div");
        title.className = 'title'
        title.innerHTML = house.src[mid].title
        const thumb = document.createElement("div");
        thumb.className = 'thumb'
        // thumb.innerHTML = house.src[i].name
        const img=document.createElement("img");

        img.src= './thumb1k/'+house.src[mid].name + '1k_f.jpg';

        thumb.appendChild(img);

        dpano.appendChild(title);
        dpano.appendChild(thumb);

        menu.appendChild(dpano);
    }

    const ddiv = document.createElement("div");
    ddiv.innerHTML='-'
    ddiv.className = 'panoEnd'
    menu.appendChild(ddiv);

    var menuTitle=document.getElementById("menuTitle");
    menuTitle.innerHTML = house.title

    displayMenuNone()

    // house.menu_control_select = 0
    // const firstChild = document.getElementById('menu').firstChild
    // firstChild.className = 'panoSelect'
    // document.getElementById('menu').scrollLeft = 0
}



function displayMenu(){
    house.mode  = 'menu'
    document.getElementById("menu").style.display='flex';

    // 
    document.getElementById("menuTitle").style.display='flex';
    document.getElementById("menuControl").style.display='flex';

    document.getElementById("wholeDirection").style.display='none';


    const control = krpano.get("control");
    control.keybaccelerate =0
    krpano.set("control",control);

}

function displayMenuNone(){
    house.mode = 'full'
    document.getElementById("menu").style.display='none';
    // document.getElementById("menuTip").style.display='none';
    document.getElementById("menuTitle").style.display='none';
    document.getElementById("menuControl").style.display='none';

    document.getElementById("wholeDirection").style.display='flex';

    document.getElementById("menuTip").style.display='flex';
    setTimeout( function(){
        document.getElementById("menuTip").style.display='none';
    }, 5000 );

    house.zoom.is_selected = false
    house.zoom.status = 'zoom'
    document.getElementById('zoom').src="./yaoimages/zoomin.png"
    document.getElementById('zoom_title').innerHTML='放大'

    const control = krpano.get("control");
    control.keybaccelerate =0.5
    krpano.set("control",control);

}

// function doubleDelay(doubleCallback,callback,p){
//     timeId = setTimeout( function(){
//         if(Date.now()-delta<400){
//             for(let i in timeIds){
//                 clearTimeout(timeIds[i])
//             }
//             // walkOn(d)
//             if(doubleCallback){
//                 // doubleCallback()
//             }
//         }else{
//             // lookDirection(2)
//             callback(p)
//         }
//     }, 400 );

//     timeIds.push(timeId)
// }

function onKeyDown(e){
    // key_down_frequency++

    // delta = Date.now() 

    // if(key_down_frequency>LONG_PRESS_TIMES){

    //     switch(e.keyCode){
    //         case 38://ArrowUp
    //             lat +=1.5
    //             break
    //         case 40: //ArrowDown
    //             lat -=1.5
    //             break
    //         case 37: //ArrowLeft
    //             lon -= 1.5
    //             break
    //         case 39://ArrowRight
    //             lon += 1.5
    //             break
    //         case 13://Enter
    //             house.is_auto_play = true
    //             break
    //         default:
    //             break
    //     }
    // }
}


function arrowUp(){
    if(house.mode==='full'){
        // doubleDelay(walkingCamera,lookDirection,2)
    }else if(house.mode==='menu'){

        const nodess = document.getElementById("menu").childNodes;
        for(let i =0;i<nodess.length-1;i++){
            if(nodess[i].className==='panoSelect'){
                nodess[i].className = 'pano'
            } 
        }

        switch(house.menu_control_select){
            case -1:
            case 0:
                // zoom
                house.menu_control_select = 1
                house.zoom.status = 'x1'

                house.zoom.is_selected = true

                document.getElementById('zoom').src="./yaoimages/zoomin_click.png"

                document.getElementById('zoom_title').innerHTML='x1'

                break
            case 1:
                // rotation
                console.log('house.zoom.status=',house.zoom.status)

                if(house.zoom.status==='zoom'||house.zoom.status==='x1'||house.zoom.status==='x0.9'){
                    house.menu_control_select = 2

                    house.rotation.is_auto = true
                    document.getElementById('auto_rotation').src="./yaoimages/auto_rotation_click.png"

                    house.zoom.is_selected = false
                    house.zoom.status = 'zoom'
                    document.getElementById('zoom').src="./yaoimages/zoomin.png"
                    document.getElementById('zoom_title').innerHTML='放大'
                }
                

                break
            default:
                break
        }
    }
}

function arrowDown(){
    if(house.mode==='full'){
        // doubleDelay(null,lookDirection,1)
    }else if(house.mode==='menu'){

        if(house.rotation.is_auto==true){
            house.rotation.is_auto==false
            document.getElementById('auto_rotation').src="./yaoimages/auto_rotation.png"
        }

        const nodess = document.getElementById("menu").childNodes;
        for(let i =0;i<nodess.length-1;i++){
            if(nodess[i].className==='panoSelect'){
                nodess[i].className = 'pano'
            } 
        }
        switch(house.menu_control_select){
            case -1:
            case 1:
                // menu
                if(house.zoom.status==='zoom'||house.zoom.status==='x0.9'||house.zoom.status==='x1'){

                    house.menu_control_select = 0
                    const firstChild = document.getElementById('menu').firstChild
                    firstChild.className = 'panoSelect'
                    document.getElementById('menu').scrollLeft = 0

                    house.zoom.is_selected = false
                    house.zoom.status = 'zoom'
                    document.getElementById('zoom').src="./yaoimages/zoomin.png"
                    document.getElementById('zoom_title').innerHTML='放大'
                }

                break
            case 2:
                // zoom
                house.menu_control_select = 1
                house.zoom.is_selected = true
                house.zoom.status = 'x1'

                document.getElementById('zoom').src="./yaoimages/zoomin_click.png"
                document.getElementById('zoom_title').innerHTML='x1'
                break
            default:
                break
        }
    }
}

function arrowLeft(){
    if(house.mode==='full'){


    }else if(house.mode==='menu'){
        let pano_select = -1
        const nodess = document.getElementById("menu").childNodes;
        for(let i =0;i<nodess.length-1;i++){
            if(nodess[i].className==='panoSelect'){
                pano_select=i===0?nodess.length -2:i-1
                nodess[i].className = 'pano'
                nodess[pano_select].className = 'panoSelect'

                const fromLeft = document.getElementById('menu').scrollLeft
                const toLeft = 270*pano_select;

                const coords = {x: fromLeft, y: 0} // Start at (0, 0)
                const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
                    .to({x: toLeft, y: 200}, 1000) // Move to (300, 200) in 1 second.
                    .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
                    .onUpdate(() => {
                        // Called after tween.js updates 'coords'.
                        // Move 'box' to the position described by 'coords' with a CSS translation.
                        document.getElementById('menu').scrollLeft = coords.x
                    })
                    .start() // Start the tween immediately.

                i = nodess.length
                
            } 
        }
    }
}

function arrowRight(){
    if(house.mode==='full'){


    }else if(house.mode==='menu'){
        let pano_select = -1
        const nodess = document.getElementById("menu").childNodes;
        for(let i =0;i<nodess.length-1;i++){
            if(nodess[i].className==='panoSelect'){
                pano_select=nodess.length-2===i?0:i+1
                // document.getElementById('menu').scrollLeft =270*pano_select;

                const fromLeft = document.getElementById('menu').scrollLeft
                const toLeft = 270*pano_select;

                const coords = {x: fromLeft, y: 0} // Start at (0, 0)
                const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
                    .to({x: toLeft, y: 200}, 1000) // Move to (300, 200) in 1 second.
                    .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
                    .onUpdate(() => {
                        // Called after tween.js updates 'coords'.
                        // Move 'box' to the position described by 'coords' with a CSS translation.
                        document.getElementById('menu').scrollLeft = coords.x
                    })
                    .start() // Start the tween immediately.

                nodess[i].className = 'pano'
                nodess[pano_select].className = 'panoSelect'
                i = nodess.length
            } 
        }
    }
}

window.onMenuEvent= function(){

    changeMode()
    // if(model==='full'){



    // }else if(model==='menu'){



    // }  
}


function onKeyUp(e){
    // if(key_down_frequency<LONG_PRESS_TIMES){

   
    // }

    // key_down_frequency = 0
}





function onPointerStart(event) {

    // isUserInteracting = true;

    // if(is_pc){
    //     // pauseEvent(event)
    // }

    // var clientX = event.clientX || event.touches[0].clientX;
    // var clientY = event.clientY || event.touches[0].clientY;

    // onMouseDownMouseX = clientX;
    // onMouseDownMouseY = clientY;

    // onMouseDownLon = lon;
    // onMouseDownLat = lat;

}

function onPointerMove(event) {

    // if (isUserInteracting === true) {
    //     var clientX = event.clientX || (typeof(event.touches)!=='undefined'?event.touches[0].clientX:0);
    //     var clientY = event.clientY || (typeof(event.touches)!=='undefined'?event.touches[0].clientY:0);

    //     // lon = (onMouseDownMouseX - clientX) * 0.1 + onMouseDownLon;
    //     // lat = (clientY - onMouseDownMouseY) * 0.1 + onMouseDownLat;

    //     if(model==='full'){
    //         lon = (onMouseDownMouseX - clientX) * 0.075 + onMouseDownLon;
    //         lat = (clientY - onMouseDownMouseY) * 0.075 + onMouseDownLat;

    //     }else if(model==='menu'){

    //         const deltaX = (onMouseDownMouseX - clientX) * 0.031 
    //         const fromLeft = document.getElementById('menu').scrollLeft
    //         const toLeft = fromLeft + deltaX

    //         document.getElementById('menu').scrollLeft = toLeft

    //     }
    // }

}

function onPointerUp() {

    // isUserInteracting = false;

    // mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    // mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    
    // onRay()
}

function onRay() {

	// update the picking ray with the camera and mouse position
	// raycaster.setFromCamera( mouse, camera );

	// // calculate objects intersecting the picking ray
	// const intersects = raycaster.intersectObjects( scene.children );

    // if(intersects.length>0){
    //     // console.log(intersects[0])

    // }

}


function onDocumentMouseWheel(event) {

    // var fov = camera.fov + event.deltaY * 0.05;

    // camera.fov = THREE.MathUtils.clamp(fov, 15, 75);

    // camera.updateProjectionMatrix();

}

function IsPC(){  
    var userAgentInfo = navigator.userAgent;
    var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
    var flag = true;  
    for (var v = 0; v < Agents.length; v++) {  
        if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }  
    }  
    return flag;  
 }

//------------------------------------------

function walkOn(d){

//     // const arr = ['F','B','L','R']
//     let next_d = d
//     if(typeof(d)  == 'string'){
//         for(let dd  of house.src[house.idx].direction){
//             if(dd.name===d){
//                 next_d = dd
//                 break
//             }
//         }
//     }

//     const nextId = next_d

//     if(nextId&&!house.isLoading){
//         const idx = getIdxFromId(nextId.id)

//         // changeTexture(idx)
//         preChangeTexture(idx)
//     }else{
//         moveNull()
//     }
}

//------------------------------------------------------
function preChangeTexture(idx){

    // if(idx>=0){
    //     for(let i=spotGroup.children.length-1;i>=0;i--){
    //         spotGroup.remove(spotGroup.children[i])
    //     }   
    
    //     house.numLoaded = 0
    //     house.isLoading = true
    //     // document.getElementById('tip').style.display = 'flex'
    
    //     preUpdateFaceTexture(idx,'f')
    //     preUpdateFaceTexture(idx,'b')
    //     preUpdateFaceTexture(idx,'l')
    //     preUpdateFaceTexture(idx,'r')
    //     preUpdateFaceTexture(idx,'u')
    //     preUpdateFaceTexture(idx,'d')
    // }

}

function preUpdateFaceTexture(idx, face){

    // const imgPath = house.src[idx].name +"1k_"+face+'.jpg'

    // // load a resource
    // loader.load(
    //     // resource URL
    //     imgPath,
    //     // onLoad callback
    //     function ( texture ) {

    //         house.numLoaded++

    //         updateFaceMaterial(texture,face)

    //         if(house.numLoaded===mesh.material.length){

    //             house.numLoaded = 0
    //             // updateFaceCamera(texture,idx,face)
    //             // changeTexture(idx)
    //             changeTexture2k(idx)
    //         }
    //     },
    //     // onProgress callback currently not supported
    //     undefined,
    //     // onError callback
    //     function ( err ) {
    //         console.error( 'An error happened.' );
    //     }
    // );
}

function changeTexture2k(idx){

    // for(let i=spotGroup.children.length-1;i>=0;i--){
    //     spotGroup.remove(spotGroup.children[i])
    // }   

    // house.numLoaded = 0
    // house.isLoading = true
    // // document.getElementById('tip').style.display = 'flex'

    // updateFaceTexture2k(idx,'f')
    // updateFaceTexture2k(idx,'b')
    // updateFaceTexture2k(idx,'l')
    // updateFaceTexture2k(idx,'r')
    // updateFaceTexture2k(idx,'u')
    // updateFaceTexture2k(idx,'d')

}

function updateFaceTexture2k(idx, face){

    // const imgPath = house.src[idx].name +"2k_"+face+'.jpg'

    // // load a resource
    // loader.load(
    //     // resource URL
    //     imgPath,
    //     // onLoad callback
    //     function ( texture ) {

    //         house.numLoaded++

    //         updateFaceMaterial(texture,face)

    //         if(house.numLoaded===mesh.material.length){

    //             house.numLoaded=0

    //             // updateFaceCamera(texture,idx,face)
    //             changeTexture(idx)
    //         }
    //     },
    //     // onProgress callback currently not supported
    //     undefined,
    //     // onError callback
    //     function ( err ) {
    //         console.error( 'An error happened.' );
    //     }
    // );
}



function changeTexture(idx){

    // for(let i=spotGroup.children.length-1;i>=0;i--){
    //     spotGroup.remove(spotGroup.children[i])
    // }   

    // house.numLoaded = 0
    // house.isLoading = true
    // // document.getElementById('tip').style.display = 'flex'

    // updateFaceTexture(idx,'f')
    // updateFaceTexture(idx,'b')
    // updateFaceTexture(idx,'l')
    // updateFaceTexture(idx,'r')
    // updateFaceTexture(idx,'u')
    // updateFaceTexture(idx,'d')

}

function updateFaceTexture(idx, face){

    // const imgPath = house.src[idx].name +"8k_"+face+'.jpg'

    // // load a resource
    // loader.load(
    //     // resource URL
    //     imgPath,
    //     // onLoad callback
    //     function ( texture ) {

    //         house.numLoaded++

    //         updateFaceMaterial(texture,face)

    //         if(house.numLoaded===mesh.material.length){

    //             updateFaceCamera(texture,idx,face)
    //         }
    //     },
    //     // onProgress callback currently not supported
    //     undefined,
    //     // onError callback
    //     function ( err ) {
    //         console.error( 'An error happened.' );
    //     }
    // );
}

function updateFaceMaterial(texture,face){
    // for(let i=0;i<mesh.material.length;i++){
    //     if(mesh.material[i].name===face){
    //         mesh.material[i].map.dispose()
    //         mesh.material[i].map = texture
    //         mesh.material[i].map.needsUpdate = true;
    //         i=mesh.material.length
    //     }
    // }
}


function range360(a){
    while(a>180){
        a -=360
    }
    while(a<-180){
        a +=360
    }
    return a
}





function moveNull(){

    // const coords = {x: camera.fov, y: 0} // Start at (0, 0)
    // const fov = camera.fov-5

    // const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
    //     .to({x:fov,y:0}, 400) // Move to (300, 200) in 1 second.
    //     .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
    //     .onUpdate((e,t) => {
    //         camera.fov = coords.x
    //         camera.updateProjectionMatrix();
    //     })
    //     .onComplete(()=>{

    //         moveNullBack()
    //     })
    //     .start() // Start the tween immediately.
}

function moveNullBack(){
    // lookZoom(5,400)
}

function lookZoom(z=5,t=600){
    // const fromX = camera.fov
    // const coords = {x: fromX, y: 0} // Start at (0, 0)
    // const toX = camera.fov + z
    // const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
    //     .to({x:toX,y:0}, t) // Move to (300, 200) in 1 second.
    //     .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
    //     .onUpdate((e,t) => {
    //         camera.fov = coords.x 
    //         camera.updateProjectionMatrix();
    //     })
    //     .start() // Start the tween immediately.
}

// direction 1/up 2/down 3/left 4/right
function lookDirection(d=1){
    // const fromX = d===1||d===2?lat:lon
    // const coords = {x: fromX, y: 0} // Start at (0, 0)
    // const toX = d===1?lat-house.config.lat_step:d===2?lat+house.config.lat_step:d===3?lon-house.config.lon_step:lon+house.config.lon_step
    // const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
    //     .to({x:toX,y:0}, 600) // Move to (300, 200) in 1 second.
    //     .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
    //     .onUpdate((e,t) => {
    //         if(d===1||d===2){
    //             lat = coords.x
    //         }else{
    //             lon = coords.x
    //         }
            
    //     })
    //     .start() // Start the tween immediately.
}


function updateMapPoint(){
    // const idx = house.idx
    // let id = -1
    // var points=document.getElementById("redPoints");
    // while (points.firstChild) {
    //     points.removeChild(points.firstChild);
    // }
    // // points.remove();
    // if(house.src[idx].D1){
    //     id = house.src[idx].D1.id - 1
    //     createMapPoint(id)
    // }
    // if(house.src[idx].D2){
    //     id = house.src[idx].D2.id - 1
    //     createMapPoint(id)
    // } 
    // if(house.src[idx].D3){
    //     id = house.src[idx].D3.id - 1
    //     createMapPoint(id)
    // }
    // if(house.src[idx].D4){
    //     id = house.src[idx].D4.id - 1

    //     createMapPoint(id)
    // } 

}


function createMapPoint(id){
    // const top = house.src[id].home.T
    // const right = house.src[id].home.D2  
    
    // const img=document.createElement("img");
    // img.src="panos/redPoint.png";

    // img.style.position = 'absolute'
    // img.style.top = top +15+ 'px';
    // img.style.right = right-5+ 'px';
    // img.style.width = 8+ 'px';
    // img.style.height = 8+ 'px';

    // const points=document.getElementById("redPoints");

    // points.appendChild(img);
}

function getIdxFromId(id){
    let idx = -1
    for(const item in house.src){
        if(house.src[item].id===id){
            idx = item
            break
        }
    }

    return idx
}


function animate() {
    requestAnimationFrame(animate);

    TWEEN.update()
    // update();
}

function update() {

    // // controls.update();
    // if (isUserInteracting === false) {
    //     // lon += 0.1;
    // }

    // if(house.is_auto_play){
    //     // if(lon>360&&!house.texture.isloading){
    //     if(lon>360&&!house.isloading){
    //         lon = 0
    //         // house.idx++
    //         // if(house.idx>=house.src.length){
    //         //     house.idx = 0
    //         // }
    //         house.playList.idx++
    //         if(house.playList.idx>=house.playList.orders.length){
    //             house.playList.idx = 0
    //         }

    //         for(let i in house.src){
    //             if(house.src[i].id===house.playList.orders[house.playList.idx].id){
    //                 house.idx = i
    //                 break
    //             }
    //         }

    //         // house.idx = house.playList.orders[house.playList.idx].id-1

    //         autoUpdateMaterial(house.idx)
    //     }else{
    //         lon += 0.2;
    //     }
    // }

    // lat = Math.max(-85, Math.min(85, lat));
    // phi = THREE.MathUtils.degToRad(90 - lat);
    // theta = THREE.MathUtils.degToRad(lon);

    // camera.target.x = 512 * Math.sin(phi) * Math.cos(theta);
    // camera.target.y = 512 * Math.cos(phi);
    // camera.target.z = 512 * Math.sin(phi) * Math.sin(theta);

    // // updateHome()

    // camera.lookAt(camera.target);

    

    // renderer.render(scene, camera);

}



window.onBackEvent= function(){
    
}

var btn = new tvSysBtnBind({
    id: "Jdoc",
    className: "ctrlBtn",
    currentClass: "current",
    keyRemoveDefault: false,
    effect: "base",
    currentIndex: 0,
    onLoad: function(e) {
    //   console.log(e);
    },
    onPress:function() {
        var keyCode = this.event.keyCode;
        // console.log('keyCode:'+keyCode)

        switch (keyCode) {
            case 37: // left
            // reloadData();
                arrowLeft()
            break;
            case 39: // right
                arrowRight()
            break;
            case 38: //up
                arrowUp()
            break;
            case 40: //down
                arrowDown()
            break;
            // case 13: //enter
            
            // break;
            case 33: //chanel +
            
            break;
            case 34: //chanel -
            
            break;
            case 48: //0
            // console.log('ddddd')
            //     displayMenu()
            break;

            case 49://1
                walkingOn('F')
                break
            case 50://2
                walkingOn('B')
                break
            case 51://3
                walkingOn('L')
                break
            case 52://4
                walkingOn('R')
            case 52: //4

            break;
            case 53: //5
               
            break;
            case 54: //6

            break;
            case 55: //7

            break;
            case 57: //9
                changeMode()
            break;
            default:
                break;
        }

        playAudio()
    },
    onEnterPress: function() {
        changeMode()
    },
    onBack: function() {
        if(house.is_auto_play){
            house.is_auto_play = false
       }else{
            if(house.mode==='menu'){
    
                displayMenuNone()
            }else{  
                  // window.location.href="index2.html?id="+house.idx
                const url = "index.html?id="+house.idx +"&backurl="+house.backurl 
                window.location.href = url
                // VrBrowserToJS.vrBrowerExit()
            }
       }
       
    }
});

//----------------------------------------------
function makeZoom(tfov){
    var fov = Number( krpano.get("view.fov") );
    const t_fov = tfov
    // krpano.set("view.fov", fov);
    console.log('fov',fov,'tfov',tfov)

    const coords= {x:fov}
    const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
    .to({x:t_fov}, 500) // Move to (300, 200) in 1 second.
    .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
    .onUpdate((e,t) => {
        // camera.fov = coords.x
        // camera.updateProjectionMatrix();

        krpano.set("view.fov", coords.x);
    })
    .onComplete(()=>{
    })
    .start() // Start the tween immediately.

}

// function zoomOut(){
//     makeZoom(75)
// }

// function zoomIn(){
//     makeZoom(30)
// }



function makeRotationAuto(is_auto){
    krpano.set('autorotate.enabled',is_auto)
}

function changeScene(scene_name){

    krpano.call("loadscene("+scene_name+",null,MERGE,BLEND(1));");

    updateDirection()

    changeAudio()
}



function changeMode(){
    if(house.mode==='full'){
        fullMode()
    }else{
        menuMode()
    }
}

function menuMode(){
    if(house.mode=='menu'){
        if(house.menu_control_select==0||house.menu_control_select == -1){

            displayMenuNone()

            let pano_select = -1
            const nodess = document.getElementById("menu").childNodes;
            for(let i =0;i<nodess.length;i++){
                if(nodess[i].className==='panoSelect'){
                    pano_select=nodess[i].getAttribute('data-id')
                    i = nodess.length

                    house.idx = pano_select
                } 
            }

            // autoUpdateMaterial(house.idx)
            const scene_name = 'scene_'+house.src[house.idx].name
            changeScene(scene_name)

        }else if(house.menu_control_select==1){ // zoom

                let zoom_title = 0
                let zoom_image = 0

                switch(house.zoom.status){
                    case 'zoom':
                        zoom_title = '放大'
                        house.zoom.status = 'x0.9'
                        house.zoom.direction = 1
                        house.zoom.factor = 1 // 1.5
                        zoom_image="./yaoimages/zoomin.png"
                        house.menu_control_select=0
                        break
                    case 'x0.9':
                        zoom_title = 'x1'
                        house.zoom.status = 'x1'
                        house.zoom.direction = 1
                        house.zoom.factor = 1 // 1.5
                        zoom_image="./yaoimages/zoomin_click.png"
                        break
                    case 'x1':
                        zoom_title = 'x1.5'
                        house.zoom.status = 'x1.5'
                        house.zoom.direction = 1
                        house.zoom.factor = 1.5  // 1.5
                        zoom_image="./yaoimages/zoomin_click.png"
                        break
                    case 'x1.5':
                        zoom_title = 'x2'
                        house.zoom.status = 'x2'
                        house.zoom.direction = 1
                        house.zoom.factor = 2  
                        house.zoom.is_selected = false                       // 1
                        zoom_image="./yaoimages/zoomout_click.png"
                        break
                    case 'x2':
                        zoom_title = 'x1.5'
                        house.zoom.status = 'x-1.5'
                        house.zoom.direction = -1
                        house.zoom.factor = 1.5   
                        house.zoom.is_selected = false                       // 1
                        zoom_image="./yaoimages/zoomout_click.png"
                        break
                    case 'x-1.5':
                        zoom_title = 'x1'
                        house.zoom.status = 'zoom'
                        house.zoom.direction = -1
                        house.zoom.factor = 1  
                        house.zoom.is_selected = false                       // 1
                        zoom_image="./yaoimages/zoomout_click.png"
                        break
                    case 'x-1':
                        zoom_title = 'zoom'
                        house.zoom.status = 'zoom'
                        house.zoom.direction = 0
                        house.zoom.factor = 1   
                        house.zoom.is_selected = false                       // 1
                        zoom_image="./yaoimages/zoomout_click.png"
                        break
                    default:
                        break
                }
                
                document.getElementById('zoom_title').innerHTML=zoom_title
                document.getElementById('zoom').src=zoom_image



                let fov = house.zoom.factor==1?120:house.zoom.factor==2?30:75

                console.log('fov',fov)

                makeZoom(fov)

        }else if(house.menu_control_select==2){ //rotation

            displayMenuNone()

            house.is_auto_play = true

            house.menu_control_select=0

            makeRotationAuto(true)

        }else{

        }

        
    }

}

function fullMode(){
        if(house.is_auto_play){
            house.is_auto_play = false
            if(house.rotation.is_auto==true){
                house.rotation.is_auto==false
                document.getElementById('auto_rotation').src="./yaoimages/auto_rotation.png"
            }

            makeRotationAuto(false)
        }

        const nodess = document.getElementById("menu").childNodes;
        for(let i =0;i<nodess.length-1;i++){

            if(nodess[i].getAttribute('data-id')===house.idx){

                nodess[i].className = 'panoSelect'

                const fromLeft = document.getElementById('menu').scrollLeft
                const toLeft = 270*i;

                const coords = {x: fromLeft, y: 0} // Start at (0, 0)
                const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
                    .to({x: toLeft, y: 200}, 1000) // Move to (300, 200) in 1 second.
                    .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
                    .onUpdate(() => {
                        // Called after tween.js updates 'coords'.
                        // Move 'box' to the position described by 'coords' with a CSS translation.
                        document.getElementById('menu').scrollLeft = coords.x
                    })
                    .start() // Start the tween immediately.

                
            } else{
                nodess[i].className = 'pano'
            }
        }

        displayMenu()

}

function updateDirection(){


    for(let d of house.src[house.idx].direction){
        
            switch(d.name){
                case 'F':
                    if(d.id!=null){
                        document.getElementById("directionTop").innerHTML = house.src[d.id-1].title
                        document.getElementById("direct_top").style.color = '#ffffff'
                        document.getElementById("direct_top_img").src = './yaoimages/direction_top.png'
                    }else{
                        document.getElementById("directionTop").innerHTML = ''
                        document.getElementById("direct_top").style.color = '#c1c1c1'
                        document.getElementById("direct_top_img").src = './yaoimages/direction_top_disable.png'
                    }
                    break
                case 'B':
                    if(d.id!=null){
                        document.getElementById("directionLeft").innerHTML = house.src[d.id-1].title
                        document.getElementById("direct_left").style.color = '#ffffff'
                        document.getElementById("direct_left_img").src = './yaoimages/direction_left.png'
                    }else{
                        document.getElementById("directionLeft").innerHTML = ''
                        document.getElementById("direct_left").style.color = '#c1c1c1'
                        document.getElementById("direct_left_img").src = './yaoimages/direction_left_disable.png'
                    }
                    break
                case 'L':
                    if(d.id!=null){
                        document.getElementById("directionBottom").innerHTML = house.src[d.id-1].title
                        document.getElementById("direct_bottom").style.color = '#ffffff'
                        document.getElementById("direct_bottom_img").src = './yaoimages/direction_bottom.png'
                    }else{
                        document.getElementById("directionBottom").innerHTML = ''
                        document.getElementById("direct_bottom").style.color = '#c1c1c1'
                        document.getElementById("direct_bottom_img").src = './yaoimages/direction_bottom_disable.png'
                    }
                    break
                case 'R':
                    if(d.id!=null){
                        document.getElementById("directionRight").innerHTML = house.src[d.id-1].title
                        document.getElementById("direct_right").style.color = '#ffffff'
                        document.getElementById("direct_right_img").src = './yaoimages/direction_right.png'
                    }else{
                        document.getElementById("directionRight").innerHTML = ''
                        document.getElementById("direct_right").style.color = '#c1c1c1'
                        document.getElementById("direct_right_img").src = './yaoimages/direction_right_disable.png'
                    }
                    break
                default:
                    break
            }

        }
    // }

}

function walkingOn(d){

    let next_d = d

    if(typeof(d)  == 'string'){
        for(let dd  of house.src[house.idx].direction){
            if(dd.name===d){
                next_d = dd
                break
            }
        }
    }
    if(next_d&&typeof(next_d.id)!='undefined'&&next_d.id){
        house.idx = next_d.id - 1
        const scene_name = 'scene_' +  house.src[house.idx].name

        changeScene(scene_name)
    }else{
        console.log('no walking')
    }
}

function changeAudio(){
    const bgAudio = document.getElementById('bgAudio')

    switch(house.src[house.idx].name){
        case 'fangmingqingguqiao':
            bgAudio.src="./audio/fangmingqingshigongqiao.mp3"
            break
        case 'chengshicitang':
            bgAudio.src="./audio/chenshizongci.mp3"
            break
        default:
            bgAudio.src="./audio/bg.mp3"
            break

    }
}

function playAudio(){
    const bgAudio = document.getElementById('bgAudio')
    if(bgAudio.paused){
        bgAudio.play() 
    }
}