zoukankan      html  css  js  c++  java
  • KRPano多屏互动原理

    KRPano可以实现多个屏幕之间的同步显示,主要应用到Websocket技术进行通信。

    在控制端,我们需要发送当前KRPano场景的实时的视角和场景信息,可以使用如下的代码:

                embedpano({
                    swf: "tour.swf",
                    xml: "tour.xml",
                    target: "pano",
                    html5: "auto",
                    mobilescale: 1.0,
                    passQueryParameters: true,
                    onready: krpanoReady
                });
    
                function krpanoReady(krpano) {
                    krpano.call("trace(krpano is ready...)");
                    krpano.call("loadscene(scene_04, null, MERGE);")
                    initialWebSocket();
                }
                //实时发送KRPano的视角信息
                function IntervalSendMessage() {
                    var krpano = document.getElementById("krpanoSWFObject");
    
                    if (krpano && krpano.get) {
                        var hlookat = krpano.get("view.hlookat");
                        var vlookat = krpano.get("view.vlookat");
                        var fov = krpano.get("view.fov");
                        var scene = krpano.get("xml.scene");
    
                        var krObj = {
                            hlookat: hlookat,
                            vlookat: vlookat,
                            fov: fov,
                            scene: scene
                        }
    
                        ws.send(JSON.stringify(krObj));
                    }
                }
                var ws;
                var WebSocketsExist;
    
                function initialWebSocket() {
                    WebSocketsExist = true;
                    try {
                        ws = new WebSocket("ws://localhost:8989/");
                    } catch (ex) {
                        try {
                            ws = new MozWebSocket("ws://localhost:8989/");
                        } catch (ex) {
                            WebSocketsExist = false;
                        }
                    }
                    if (WebSocketsExist) {
                        console.log("The current browser support websocket!");
                    } else {
                        console.log("The current browser not support websocket!")
                        return;
                    }
                    ws.onopen = WSonOpen;
                    ws.onmessage = WSonMessage;
                    ws.onclose = WSonClose;
                    ws.onerror = WSonError;
                }
    
                function WSonOpen() {
                    console.log("websocket opened success!");
                    setInterval(IntervalSendMessage, 50);
                };
    
                function WSonMessage(event) {
                    console.log(event.data);
                };
    
                function WSonClose() {
                    console.log("Websocket closed.");
                };
    
                function WSonError() {
                    console.log("Websocket error occur.");
                };

    在被控制端,我们需要实时接收控制端传过来的视角信息,并周期性更新当前的视角和场景。

                embedpano({
                    swf: "tour.swf",
                    xml: "tour.xml",
                    target: "pano",
                    html5: "auto",
                    mobilescale: 1.0,
                    passQueryParameters: true
                });
    
                const WebSocket = require('ws');
    
                const wss = new WebSocket.Server({
                    port: 8989
                });
    
                wss.on('connection', function connection(ws) {
                    ws.on('message', function incoming(message) {
                        console.log('received: %s', message);
                        krObj = JSON.parse(message);
                        var hlookat = krObj.hlookat;
                        var vlookat = krObj.vlookat;
                        var fov = krObj.fov;
                        var scene = krObj.scene;
                        var krpano = document.getElementById("krpanoSWFObject");
                        if (krpano && krpano.set) {
                            krpano.call("loadscene(get(" + "scene_04" + "), null, MERGE);")
                            krpano.set("view.hlookat", hlookat);
                            krpano.set("view.vlookat", vlookat);
                            krpano.set("view.fov", fov);
                            if (krpano.get("xml.scene") !== scene) {
                                //loadscene(get(startscene), null, MERGE);
                                krpano.call("loadscene(" + scene + ", null, MERGE);")
                            }
                        }
                    });
    
                    ws.send('something');
                });

    如果被控制端(如网页)无法直接创建WebSocket.Server,可以使用中间服务器进行中转,控制端和被控制端都连接至中间服务器,中间服务器负责把控制端的状态信息发送给被控制端。

    本博文发表于:http://www.krpano.tech/archives/534

    发布者:屠龙

    转载请注明出处,谢谢!

  • 相关阅读:
    2020.10.23 19级training 补题报告
    2020.10.17 天梯赛练习 补题报告
    2020.10.16 19级training 补题报告
    2020.10.9 19级training 补题报告
    2020.10.10 天梯赛练习 补题报告
    2020.10.3 天梯赛练习 补题报告
    2020.10.2 19级training 补题报告
    第十届山东省ACM省赛复现补题报告
    VVDI Key Tool Plus Adds VW Passat 2015 Key via OBD
    Xhorse VVDI Prog Software V5.0.3 Adds Many MCUs
  • 原文地址:https://www.cnblogs.com/reachteam/p/7152942.html
Copyright © 2011-2022 走看看