sdsd

index2.js

@@ -0,0 +1,427 @@
+
+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 
+        
+        
+    }
+});

tip.html

@@ -86,8 +86,8 @@
 
         setTimeout( function(){
             
-            // window.location.replace(url) 
-            window.location.href = url  
+            window.location.replace(url) 
+            // window.location.href = url  
 
         }, 5000 );