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

前言

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

實(shí)現(xiàn)

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

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

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

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

//面板相關(guān)
//************************************************************************************/
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頁。寫完記得將這個(gè)頁面和圖片上傳到頁面資源，資源 => 頁面資源 => 按鈕（上傳） 。

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

//事件相關(guān)
//************************************************************************************/
var currentModule = null;

//點(diǎn)擊事件
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,
    });
}

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

完整代碼

    //加載場景代碼
var app = new THING.App({
    // 場景地址
    "url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/Campus04",
});
//場景相關(guān)
//************************************************************************************/
app.on("load", function () {
    app.camera.flyTo({
        "position": [36.357131498969785, 61.953024217074265, 69.12160670337104],
        "target": [-1.3316924326803257, -4.9370371421622625, 33.619521849828544],
        "time": 2000,
    });
});
//面板相關(guān)
//************************************************************************************/
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/平面圖導(dǎo)航/ifram.html"
};
var iframe = panel.addIframe(dataObj, "iframe").caption("").setHeight("290px");

//事件相關(guān)
//************************************************************************************/
var currentModule = null;

//點(diǎn)擊事件
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,
    });
}