摘要：接下來我們就用平面導航圖來解決這一問題。第二部分我會給頁加上鼠標懸停事件讓頁的標簽和我們場景中的一起動起來完整代碼加載場景代碼場景地址場景相關面板相關平面圖導航事件相關點擊事件返回事件

前言

利用CampusBuilder來搭建自己的虛擬世界過程有這樣一個問題:如何快速聚焦到虛擬場景的某一位置。當然我們可以創建幾個按鈕對應查找我們需要去的位置（參照物）并聚焦，但是按鈕并不是很炫酷也不能很好的反饋給我們一些信息。接下來我們就用平面導航圖來解決這一問題。

實現

第一步，使用CampusBuilder搭建模擬場景，CampusBuilder操作簡單，分分鐘就可以上手。這里為每一個房間都創建一個小球作為視點參照物體并勾選預覽時隱藏，這樣不會對我們的場景造成影響，也便于我們聚焦到指定房間。注意：要將我們每個房間中的設備框選之后組合在一起，為下一階段的做準備。

第二步，把我們編輯好的場景加載到ThingJS中。

//加載場景代碼
var app = new THING.App({
    // 場景地址
    "url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/Campus04",
});
//場景相關
//************************************************************************************/
app.on("load", function () {
    app.camera.flyTo({
        "position": [36.357131498969785, 61.953024217074265, 69.12160670337104],
        "target": [-1.3316924326803257, -4.9370371421622625, 33.619521849828544],
        "time": 2000,
    });
});

第三步，為平面圖創建一塊面板，并調整一下面板的位置以及大小。
圖片下載地址：
鏈接：https://pan.baidu.com/s/1gmNj... 提取碼：i0c1

//面板相關
//************************************************************************************/
var panel = new THING.widget.Panel({
    closeIcon: false,
    dragable: false, 
    retractable: true,
    opacity: 0.9,
    hasTitle: true,
});
panel.width = 600;
panel.position = [0, 200];
var dataObj = {
    iframe: ""
};
var iframe = panel.addIframe(dataObj, "iframe").caption("").setHeight("290px");

第四步，編寫iframe頁。寫完記得將這個頁面和圖片上傳到頁面資源，資源 => 頁面資源 => 按鈕（上傳） 。

第五步，完成onClick()和initViewPoint()方法。

//事件相關
//************************************************************************************/
var currentModule = null;

//點擊事件
function onClick(targetObj, viewPoint) {
    currentModule = app.query(targetObj)[0];
    currentModule.position = [0, 0, 0];
    currentModule.style.opacity = 1;
    app.camera.flyTo({
        "object": app.query(viewPoint)[0],
        "offset": [0, 13, 7],
        "time": 1000,
        complete: function () {
            currentModule.brothers.style.opacity = 0.3;
        }
    });
}
//返回事件
function initViewPoint() {
    currentModule.brothers.style.opacity = 1;
    currentModule = null;
    app.camera.flyTo({
        "position": [36.357131498969785, 61.953024217074265, 69.12160670337104],
        "target": [-1.3316924326803257, -4.9370371421622625, 33.619521849828544],
        "time": 1000,
    });
}

小結
第一部分我們主要完成了iframe與我們的3D場景的簡單交互，這里也沒有做什么特效只是做了一個點擊事件。這里值得一提的是currentModule這個全局變量，開始我沒有創建這個變量只是將我當前點擊的物體obj.style.opacity = 1;obj.brothers.style.opacity = 0.3, 但是執行initViewPoint(){app.query(’.Thing’).style.opacity=1}無法將場景的opacity 屬性還原（自己可以試一下，或者有解決方案留言）。第二部分我會給iframe頁加上鼠標懸停事件讓iframe頁的img標簽和我們場景中的obj一起動起來！

完整代碼

    //加載場景代碼
var app = new THING.App({
    // 場景地址
    "url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/Campus04",
});
//場景相關
//************************************************************************************/
app.on("load", function () {
    app.camera.flyTo({
        "position": [36.357131498969785, 61.953024217074265, 69.12160670337104],
        "target": [-1.3316924326803257, -4.9370371421622625, 33.619521849828544],
        "time": 2000,
    });
});
//面板相關
//************************************************************************************/
var panel = new THING.widget.Panel({
    closeIcon: false,
    dragable: false, 
    retractable: true,
    opacity: 0.9,
    hasTitle: true,
});
panel.width = 600;
panel.position = [0, 200];
var dataObj = {
    iframe: "/uploads/wechat/S2Vyd2lu/file/平面圖導航/ifram.html"
};
var iframe = panel.addIframe(dataObj, "iframe").caption("").setHeight("290px");

//事件相關
//************************************************************************************/
var currentModule = null;

//點擊事件
function onClick(targetObj, viewPoint) {
    currentModule = app.query(targetObj)[0];
    currentModule.position = [0, 0, 0];
    currentModule.style.opacity = 1;
    app.camera.flyTo({
        "object": app.query(viewPoint)[0],
        "offset": [0, 13, 7],
        "time": 1000,
        complete: function () {
            currentModule.brothers.style.opacity = 0.3;
        }
    });
}
//返回事件
function initViewPoint() {
    currentModule.brothers.style.opacity = 1;
    currentModule = null;
    app.camera.flyTo({
        "position": [36.357131498969785, 61.953024217074265, 69.12160670337104],
        "target": [-1.3316924326803257, -4.9370371421622625, 33.619521849828544],
        "time": 1000,
    });
}