vr-photo/index2.js

var isUserInteracting = false,
onMouseDownMouseX = 0,
onMouseDownMouseY = 0,
lon = 0,
onMouseDownLon = 0,
lat = 0,
onMouseDownLat = 0,
phi = 0,
theta = 0;

const house ={
    idx:0,
    nextId:null,
    title:'南京世茂项目',
    descript:'世茂天誉为城市综合体项目，主要包括约15万方集八大主题亮点商业、11万方的顶级酒店服务式公寓、15万方5A超甲级写字楼+五星级酒店，以及13万方高端住宅。\
    NO.2016G11地块东至云锦路，南至国有空地，西至江东中路，北至集庆门大街，出让面积：62699.92㎡，地下出让面积4472.12㎡，规划用地性质：R21住宅用地，Bb商办混合用地。',
    // img:'./panosimages/0.png',
    src:[
    
        {id:1,name:"01frontGate",title:'01正门',thumb:"panos/01frontGate_b.jpg",descript:'简介:01正门于俄罗斯北部，波罗的海沿岸...'},
    {id:2,name:"02masterBedroom",title:'02主卧',thumb:"panos/02masterBedroom_b.jpg",descript:'简介:02主卧位于俄罗斯北部，波罗的海沿岸...'},
    {id:3,name:"03masterBedroom",title:'03主卧',thumb:"panos/03masterBedroom_b.jpg",descript:'简介:03主卧位于俄罗斯北部，波罗的海沿岸...'},
    {id:4,name:"04masterBedroom",title:'04主卧',thumb:"panos/04masterBedroom_b.jpg",descript:'简介:04主卧于俄罗斯北部，波罗的海沿岸...'},
    {id:5,name:"05masterBedroomToilet",title:'05主卧卫生间',thumb:"panos/05masterBedroomToilet_b.jpg",descript:'简介:05主卧卫生间位于俄罗斯北部，波罗的海沿岸...'},
    {id:6,name:"06masterBedroomPorch",title:'06主卧门廊',thumb:"panos/06masterBedroomPorch_b.jpg",descript:'简介:06主卧门廊位于俄罗斯北部，波罗的海沿岸...'},
    {id:7,name:"07masterBedroomCloakroom",title:'07主卧衣帽间',thumb:"panos/07masterBedroomCloakroom_b.jpg",descript:'简介:07主卧衣帽间位于俄罗斯北部，波罗的海沿岸...'},
    {id:8,name:"08AguestRoom",title:'08客房',home:{T:90,R:100},thumb:"panos/08AguestRoom_b.jpg",descript:'简介:08客房于俄罗斯北部，波罗的海沿岸...'},
    {id:9,name:"09guestRoomA",title:'09客房A',home:{T:80,R:90},thumb:"panos/09guestRoomA_b.jpg",descript:'简介:09客房A于俄罗斯北部，波罗的海沿岸...'},
    {id:10,name:"10guestRoomAToilet",title:'10客房卫生间',home:{T:70,R:100},thumb:"panos/10guestRoomAToilet_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:11,name:"11guestRoomB",title:'11客房B',home:{T:85,R:70},thumb:"panos/11guestRoomB_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:12,name:"12guestRoomB",title:'12客房B',home:{T:80,R:60},thumb:"panos/12guestRoomB_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:13,name:"13guestRoomB",title:'13客房B',home:{T:95,R:70},thumb:"panos/13guestRoomB_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:14,name:"14livingRoom",title:'14客厅',home:{T:20,R:70},thumb:"panos/14livingRoom_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:15,name:"15livingRoom",title:'15客厅',home:{T:30,R:50},thumb:"panos/15livingRoom_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:16,name:"16livingRoom",title:'16客厅',home:{T:20,R:50},thumb:"panos/16livingRoom_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:17,name:"17livingRoom",title:'17客厅',home:{T:8,R:60},thumb:"panos/17livingRoom_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:18,name:"18livingRoom",title:'18客厅',home:{T:8,R:40},thumb:"panos/18livingRoom_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:19,name:"19livingRoom",title:'19客厅',home:{T:8,R:50},thumb:"panos/19livingRoom_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:20,name:"20livingRoom",title:'20客厅',home:{T:40,R:45},thumb:"panos/20livingRoom_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:21,name:"21livingRoom",title:'21客厅',home:{T:42,R:55},thumb:"panos/21livingRoom_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:22,name:"22livingRoom",title:'22客厅',home:{T:23,R:20},thumb:"panos/22livingRoom_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:23,name:"23kitchen",title:'23厨房',home:{T:-5,R:65},thumb:"panos/23kitchen_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:24,name:"24laundry",title:'24洗衣间',home:{T:-5,R:40},thumb:"panos/24laundry_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
    {id:25,name:"25frontGatePorch",title:'25前门门廊',home:{T:65,R:75},thumb:"panos/25frontGatePorch_b.jpg",descript:'简介:圣彼得堡位于俄罗斯北部，波罗的海沿岸...'},
],

} 


init()


function init(){


    const queryString = window.location.search;

    const urlParams = new URLSearchParams(queryString);

    let pano_Id = urlParams.get('id')?urlParams.get('id'):-1

    let backurl= urlParams.get('backurl')?urlParams.get('backurl'):'../'

    let panoId = pano_Id>house.src.length?house.src.length-1:pano_Id

    const descriptContent=document.getElementById("descriptContent");
        descriptContent.innerHTML = limitWords(house.descript)
    

    if(panoId!==-1){
        // document.getElementById('descriptTitle').innerHTML = house.src[panoId].title
        // document.getElementById('descriptContent').innerHTML = limitWords(house.src[panoId].descript)

        // update conver
        const conver = document.getElementById('cover')
        // conver.src='./panos/'+house.src[panoId].name +"4k_f.jpg"
        conver.setAttribute('data-id',panoId)
        conver.setAttribute('data-backurl',backurl)
    }else{

        panoId  =0
        // const descriptTitle=document.getElementById("descriptTitle");
        // // descriptTitle.innerHTML = house.src[house.idx].title
        // descriptTitle.innerHTML = house.title

        const conver = document.getElementById('cover')
        // // conver.src='panos/'+house.src[house.idx].name +"4k_f.jpg"
        conver.setAttribute('data-id',panoId)
        conver.setAttribute('data-backurl',backurl)
    
    }

    house.idx = panoId

    console.log('panoId',panoId)



    const listTitle = document.getElementById('listTitle')
    listTitle.innerHTML = "剧集列表（"+ house.src.length +"集全）"


    var listContent=document.getElementById("listContent");
    while (listContent.firstChild) {
        listContent.removeChild(listContent.firstChild);
    }

    let mid = 0

    for(let item of house.src){


        const dpano = document.createElement("div");
        dpano.className = 'pano'

        if(item.id-1==pano_Id*1){
            dpano.className = 'panoSelect'
        }

        mid = item.id

        if(mid==1){
            dpano.style.marginLeft=0
        }
        

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

        img.src= './panos/'+item.name + '4k_f.jpg';

        thumb.appendChild(img);

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

        listContent.appendChild(dpano);
    }

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

    if(pano_Id!=-1){

        const offset = document.getElementsByClassName("thumb")
            const offset_width = offset.length>1&&offset[1].clientWidth?offset[1].clientWidth:180

            // document.getElementById('listContent').scrollLeft =offset_width*pano_select;
            const fromLeft = document.getElementById('listContent').scrollLeft
            const toLeft = offset_width*pano_Id

            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('listContent').scrollLeft = coords.x
                })
                .start() // Start the tween immediately.

    }

    


    document.addEventListener('keyup', onKeyUp);

    document.getElementById('play').addEventListener('click', enterPano);

    // const Jdoc=document.getElementById("Jdoc");
    // Jdoc.style.backgroundSize = "1280px 720px";

}



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

    if(is_down){
        const firstChild = document.getElementById('listContent').firstChild
        firstChild.className = 'panoSelect'

        const playdiv = document.getElementById('play')
        // playdiv.className = 'play'
        playdiv.style.backgroundImage='url("./nanimages/play4.png")'

        document.getElementById('listContent').scrollLeft =0;

        let panoId = 0

        // document.getElementById('descriptTitle').innerHTML = house.src[panoId].title
        // document.getElementById('descriptContent').innerHTML = limitWords(house.src[panoId].descript)

        // update conver
        // const conver = document.getElementById('cover')
        // conver.src='./panos/'+house.src[panoId].name +"4k_f.jpg"
        // conver.setAttribute('data-id',panoId)



    }else{
        const playdiv = document.getElementById('play')
        // playdiv.className = 'playSelect'
        playdiv.style.backgroundImage='url("./nanimages/play_click.png")'

    }
}

function limitWords(txt){
    var str = txt;
    if(str.length>180){
        str = str.substr(0,180) + '...';
    }
    
    return str;
}

function selectLeftnRight(is_right){

    const nodess = document.getElementById("listContent").childNodes;

    for(let i =0;i<nodess.length;i++){

        if(nodess[i].className==='panoSelect'){
            nodess[i].className = 'pano'

            let pano_select = -1

            if(is_right){
                pano_select = i===nodess.length -1? 0:i+1
            }else{
                pano_select = i===0? nodess.length -1:i-1
            }

            house.idx = pano_select

            nodess[pano_select].className='panoSelect'

            // update description
            
            // document.getElementById('descriptTitle').innerHTML = house.src[house.idx].title
            // document.getElementById('descriptContent').innerHTML = limitWords(house.src[house.idx].descript)

            // update conver
            const conver = document.getElementById('cover')
            // conver.src='./panos/'+house.src[pano_select].name +"4k_f.jpg"
            conver.setAttribute('data-id',pano_select)

            // const descriptTitle=document.getElementById("descriptTitle");
            // descriptTitle.innerHTML = house.src[house.idx].title

            // const descriptContent=document.getElementById("descriptContent");
            // descriptContent.innerHTML = house.src[house.idx].descript

            const offset = document.getElementsByClassName("thumb")
            const offset_width = offset.length>1&&offset[1].clientWidth?offset[1].clientWidth:180

            // document.getElementById('listContent').scrollLeft =offset_width*pano_select;

            const fromLeft = document.getElementById('listContent').scrollLeft
            const toLeft = offset_width*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('listContent').scrollLeft = coords.x
                })
                .start() // Start the tween immediately.
    


            i = nodess.length
        } 
    } 
}

function enterPano(){
    const conver = document.getElementById('cover')

    const panoId = conver.getAttribute('data-id')
    const backurl = conver.getAttribute('data-backurl')

    // window.location.href="pano3.html?id="+panoId

    const url = "tip.html?id="+panoId + '&backurl='+backurl

    console.log('url',url)
     window.location.replace(url)  
    //  window.location.href = url 

    //  Var param = “{"vrUrl":"http://112.18.251.84:8090/tv/h5v2/activity2/vtour/tour.html"}”
    // const param = '{"vrUrl":"http://112.18.251.84:8090/tv/h5v2/activity2/vtour/tour.html"}'

    // UtilToJS.startVrBrowser(param);

}





function onKeyUp(e){
    switch(e.keyCode){
        case 38://ArrowUp
            selectUpnDown(false)
            break
        case 40://ArrowDown
            selectUpnDown(true)
            break
        case 37: //ArrowLeft
            selectLeftnRight(false)
            break
        case 39://ArrowRight
            selectLeftnRight(true)
            break
        case 13://Enter
            enterPano()
        case 48: // auto play
            break
        case 49:
            break
        default:
            break
    }
}


animate()

function animate() {
	requestAnimationFrame(animate)

	TWEEN.update()

}


var btn = new tvSysBtnBind({
    id: "Jdoc",
    className: "ctrlBtn",
    currentClass: "current",
    keyRemoveDefault: false,
    effect: "base",
    currentIndex: 0,
    onLoad: function(e) {

    },
    onPress:function() {
        var keyCode = this.event.keyCode;
        // alert('tvSysBtnBind:'+keyCode+" - " + this.event.key)
        switch (keyCode) {
            case 37: // left
            // reloadData();
            break;
            case 39: // right
            
            break;
            case 38: //up
            
            break;
            case 40: //down
            
            break;
            // case 13: //enter
            
            // break;
            case 33: //chanel +
            
            break;
            case 34: //chanel -
            
            break;
            case 48: //0
            
            break;
            default:
                break;
        }
    },
    onEnterPress: function() {

    },
    onBack: function() {
    //    enterPano()
    // console.log(window.UtilToJS)
        // if(typeof(VrBrowserToJS)!=='undefined'){
        //     // UtilToJS.appExit();
        //     // VrBrowserToJS.vrBrowerExit();
        //     VrBrowserToJS.vrBrowserExit();

        //     // VrBrowserToJS.appExit()
        // }

        const conver = document.getElementById('cover')

        const backurl = conver.getAttribute('data-backurl')

        console.log('backurl')

        // window.location.href = url
        window.location.replace(backurl) 
        // window.location.href = backurl 
        
        
    }
});