做爲物聯網可視化平臺,ThingJS有着許多優秀的地方,初學者該如何快速利用ThingJS開發物聯網可視化項目?處處找視頻教程?求助各方大佬?不不不,只需學會ThingJS 的官方示例,便可着手開發物聯網項目!css
在製做項目過程當中,每每須要引用許多資源,諸如圖片、js、css或者本身製做/購買的特殊模型,那麼如何將這些資源上傳到ThingJS中呢?bootstrap
ThingJS上傳的文件夾是直接上傳到對應項目中去的,上傳完後,該項目須要刷新一下才看獲得新的文件夾。數組
ThingJS上傳文件也能夠經過上傳文件夾的方式,只不過須要咱們再上傳時選擇上傳文件,同時還有另外一種方式上傳文件:網絡
打開咱們要上傳文件的項目,在項目名右側有兩個按鈕:【新建文件】和【上傳文件】,咱們選擇上傳文件便可開始上傳咱們的文件。app
ThingJS將園區搭建和三維場景開發分開,因此咱們可以專一於開發項目,那麼咱們是如何去上傳咱們的模型呢?ThingJS園區搭建工具模模搭是用來搭建園區場景,主要是搭建室內結構,那麼特殊的模型如何上傳到ThingJS的園區搭建工具呢?兩種方式,可是ThingJS推薦使用3dsmax上傳插件將模型上傳至campusbuiler園區搭建工具,不推薦的則是使用campusbuiler中的obj模型上傳功能,其中如何使用3dsmax上傳插件將模型上傳至campusbuiler的文檔在【ThingJS資源中心-下載】頁面,相應插件下載地址也在此處ide
ThingJS是如何使用圖片、css、js的?右鍵上傳的資源,選擇引用路徑,會出現一個url連接,這個連接就是使用圖片的地址,使用該圖片時,選擇此地址便可。工具
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; }