ThingJS官方示例教程（一）

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;
}