ThingJS官方示例教程(一)

ThingJS官方示例教程(一)

做爲物聯網可視化平臺,ThingJS有着許多優秀的地方,初學者該如何快速利用ThingJS開發物聯網可視化項目?處處找視頻教程?求助各方大佬?不不不,只需學會ThingJS 的官方示例,便可着手開發物聯網項目!css

學會使用ThingJS上傳資源

在製做項目過程當中,每每須要引用許多資源,諸如圖片、js、css或者本身製做/購買的特殊模型,那麼如何將這些資源上傳到ThingJS中呢?bootstrap

ThingJS上傳文件夾

ThingJS上傳的文件夾是直接上傳到對應項目中去的,上傳完後,該項目須要刷新一下才看獲得新的文件夾。數組

 

ThingJS上傳文件

ThingJS上傳文件也能夠經過上傳文件夾的方式,只不過須要咱們再上傳時選擇上傳文件,同時還有另外一種方式上傳文件:網絡

打開咱們要上傳文件的項目,在項目名右側有兩個按鈕:【新建文件】和【上傳文件】,咱們選擇上傳文件便可開始上傳咱們的文件。app

 

 

 

 

ThingJS上傳模型

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

 

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;
}
相關文章
相關標籤/搜索