ThingJS官方示例教程（一）

作為物聯網可視化平台，ThingJS有着許多優秀的地方，初學者該如何快速利用ThingJS開發物聯網可視化項目？到處找視頻教程？求助各方大佬？不不不，只需學會ThingJS 的官方示例，即可着手開發物聯網項目！

學會使用ThingJS上傳資源

在制作項目過程中，往往需要引用許多資源，諸如圖片、js、css或者自己制作/購買的特殊模型，那么如何將這些資源上傳到ThingJS中呢？

ThingJS上傳文件夾

ThingJS上傳的文件夾是直接上傳到對應項目中去的，上傳完后，該項目需要刷新一下才看得到新的文件夾。

 

ThingJS上傳文件

ThingJS上傳文件也可以通過上傳文件夾的方式，只不過需要我們再上傳時選擇上傳文件，同時還有另一種方式上傳文件：

打開我們要上傳文件的項目，在項目名右側有兩個按鈕：【新建文件】和【上傳文件】，我們選擇上傳文件即可開始上傳我們的文件。

 

 

 

 

ThingJS上傳模型

ThingJS將園區搭建和三維場景開發分開，所以我們能夠專注於開發項目，那么我們是如何去上傳我們的模型呢？ThingJS園區搭建工具模模搭是用來搭建園區場景，主要是搭建室內結構，那么特殊的模型如何上傳到ThingJS的園區搭建工具呢？兩種方式，但是ThingJS推薦使用3dsmax上傳插件將模型上傳至campusbuiler園區搭建工具，不推薦的則是使用campusbuiler中的obj模型上傳功能，其中如何使用3dsmax上傳插件將模型上傳至campusbuiler的文檔在【ThingJS資源中心-下載】頁面，相應插件下載地址也在此處

 

ThingJS使用圖片資源

ThingJS是如何使用圖片、css、js的？右鍵上傳的資源，選擇引用路徑，會出現一個url鏈接，這個鏈接就是使用圖片的地址，使用該圖片時，選擇此地址即可。

 

 

ThingJS使用css、js資源

ThingJS使用css、js需要按照官方示例引用css、js的方式來使用，同樣是引用路徑，詳細如下：

/**
 * 說明：引用 js、css 資源
 *     默認js腳本和css樣式會帶上時間戳，且按urls數組中的順序加載
 *     更多關於 引用 js 和 css 資源的相關內容請參考教程
 *      twitter-bootstrap, moment均為外部資源，因網絡原因拷貝到了thingjs網站目錄
 * 教程：ThingJS教程——>在線開發——>引用js和css
 * 難度：★★☆☆☆
 */
THING.Utils.dynamicLoad([
    '/static/vendor/twitter-bootstrap/3.3.7/css/bootstrap.min.css',
    '/static/vendor/twitter-bootstrap/3.3.7/js/bootstrap.min.js',
    '/static/vendor/moment/moment.js'],
function () {
    // 創建App
    var app = new THING.App({
        url: 'https://www.thingjs.com/static/models/storehouse'
    });
        // 加載場景后執行
    app.on('load', function (ev) {
        var btn = createButton();
        btn.on('click', function () {
            // 使用 moment 庫獲取當前時間
            var now = moment().format('YYYY-MM-DD HH:mm:ss');
            console.log(now);
        })
    });
})

function createButton() {
    // 使用 bootstrap 樣式
    var template =
        `<button class="btn btn-default" type="button" style="position:absolute;left:20px;top:20px;z-index:2">當前時間</button>`;
    var btn = $('#div2d').append($(template));

    return btn;
}