博主：_LJaXi Or 東方幻想郷
專欄： 數(shù)字孿生 | 3D可視化框架
開發(fā)工具：ThingJS在線開發(fā)工具

ThingJs 低代碼開發(fā)

注意點(diǎn)

有問(wèn)題直接戳官網(wǎng): ThingJs 在線開發(fā)工具

對(duì)象拾取: 只有物品編輯了 UserID Name 或者添加 自定義屬性 之后, 導(dǎo)入到 ThingJs 中才能成為獨(dú)立的管理對(duì)象,被程序讀取或修改

場(chǎng)景效果配置

燈光配置

app.lighting = {}

后期設(shè)置(美化效果)

app.postEffect = {}

天氣效果

app.fog = {} // 霧化效果
apep.create // 接口創(chuàng)建粒子，實(shí)現(xiàn)雨雪效果
例子類型：'ParticleSystem'

動(dòng)態(tài)天空及天空盒

app.ksyEffect = {}

層級(jí)

層級(jí)常用API

app.level.change(object); // 層級(jí)切換到指定對(duì)象

app.level.back(); // 返回當(dāng)前層級(jí)的父物體層級(jí)

app.level.current; // 獲取當(dāng)前的層級(jí)對(duì)象

app.level.previous; // 獲取之前的層級(jí)對(duì)象

實(shí)例化 Thing，加載場(chǎng)景

var app = new THING.App({url: '', // 場(chǎng)景urlbackground: '#00000', // 場(chǎng)景顏色env： ‘Seaside' // 主題吧，忘了
})

load 加載函數(shù)

app.on('load', (ev) => {app.level....
})

ThingJs 層級(jí)關(guān)系圖

查找層級(jí)

app.query('.Building'); // 查找物體類是 Building 的對(duì)象
app.query("car01")[0]; // 查詢名稱(name)是 car01 的對(duì)象
app.query("[alarm]"); // 有物體類型屬性的，無(wú)論值是什么
app.query('["userData/物體類型"="糧倉(cāng)"]'); // 查詢物體類型屬性是糧倉(cāng)的對(duì)象
app.query("[levelNum>2]"); // 查詢levelNum大于2的對(duì)象，支持 <=, <, =, >, >=// 支持鏈?zhǔn)讲樵?/span>
app.query('.Building').query("[alarm]");// 正則表達(dá)式(RegExp)對(duì)象
app.query(/car/); 
/
var reg = new RegExp(/car/);
app.query(reg);

層級(jí)切換完成

complete() {console.log("層級(jí)切換完成")
}

飛行完成

flyComplete() {console.log("場(chǎng)景飛行完成")
}

樓層

層級(jí)事件常用API

EnterLevel; // 進(jìn)入層級(jí)事件 (包含4個(gè)內(nèi)置響應(yīng))
LeaveLevel; // 退出層級(jí)事件 (包含1個(gè)內(nèi)哭響應(yīng))
LevelFlyEnd; // 層級(jí)切換飛行結(jié)束事件

進(jìn)入層級(jí)時(shí)的場(chǎng)景控制 THING.EventTag.LevelSceneOperations,如進(jìn)入建筑時(shí)顯示所有樓層;進(jìn)入物體時(shí)，設(shè)置兄弟物體半透明

進(jìn)入層級(jí)時(shí)的飛行控制 THING.EventTag.LevelFly,如進(jìn)入各個(gè)層級(jí)時(shí)的飛行控制 (飛行時(shí)間、視角等)

進(jìn)入層級(jí)時(shí)背景熱制 THING.EventTag,LevelSetBackground,如進(jìn)入建筑后隱藏天空盒

進(jìn)入層級(jí)時(shí)的 Pick 設(shè)置 THING.EventTag.LevelPickedResultFunc,如進(jìn)入建筑后是只能 Pick 樓層還是也能 Pick 樓層下的物體

退出層級(jí)時(shí)的場(chǎng)景控制 THING.EventTag.LevelSceneOperations,如從園區(qū)進(jìn)入建筑層級(jí) (即退出園區(qū)) 后，園區(qū)隱藏

監(jiān)聽層級(jí)切換事件

//第二個(gè)參數(shù)可以輸入.Building/.Floor/.Thing，來(lái)監(jiān)聽是建筑、樓層、物體的層級(jí)切換，不輸入默認(rèn)監(jiān)聽所有層級(jí)
// 監(jiān)聽進(jìn)入樓層事件
app.on(THING.EventType.EnterLevel, '', function (ev) {if (ev.current.name == '1樓') {//進(jìn)入一樓顯示兩個(gè)設(shè)備數(shù)據(jù)//todo//...}else{//todo//...}
}, '進(jìn)入樓層顯示面板')

獲取當(dāng)前選中的物體

app.on(THING.EventType.EnterLevel, '.Thing', function (ev) {var object = ev.object;
}, 'customEnterThingOperations')

停止進(jìn)入物體層級(jí)默認(rèn)行為

// 停止進(jìn)入物體層級(jí)的默認(rèn)行為
app.pauseEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);

在應(yīng)用程序中，THING.EventType.EnterLevel 事件代表進(jìn)入樓層的事件類型。當(dāng)用戶進(jìn)入某個(gè)樓層時(shí)，系統(tǒng)會(huì)默認(rèn)執(zhí)行一些與層級(jí)場(chǎng)景相關(guān)的操作，比如加載和顯示該樓層的模型、攝像機(jī)切換等

使用 app.pauseEvent 方法可以暫停或停止特定事件的默認(rèn)行為。在您的代碼中，通過(guò)調(diào)用 app.pauseEvent 方法來(lái)停止 ‘THING.EventType.EnterLevel’ 事件與 ‘.Thing’ 類相關(guān)的默認(rèn)行為

換句話說(shuō)，當(dāng)用戶進(jìn)入樓層并且當(dāng)前對(duì)象是 ‘.Thing’ 類的實(shí)例時(shí)，通過(guò)停止默認(rèn)行為，您可以自定義處理事件并阻止系統(tǒng)默認(rèn)的操作

創(chuàng)建按鈕(兩種方法)

new THING.widget.Button('按鈕文本', function () {// 寫邏輯
}, "方法描述(隨便寫)")

new THING.widget.Button('文本'，綁定方法(注意不是字符串))

添加攝像頭

// 視頻url地址，但是url必須是https協(xié)議的，
// 其本質(zhì)是將https協(xié)議的一個(gè)攝像頭html網(wǎng)頁(yè)引入一個(gè)iframe的panel面板中。
var panel2 = null;
// 將視頻嵌入到3D場(chǎng)景中
if (panel2) {panel2.destroy();panel2 = null;
} else {// 將視頻頁(yè)面作2D界面元素 通過(guò)快捷界面庫(kù) panel 的iframe組件進(jìn)行添加panel2 = new THING.widget.Panel({titleText: "視頻監(jiān)控",dragable: true,hasTitle: true,width: "400px",closeIcon: true});var iframe = panel2.addIframe({ url: 'https://jiafei.imdo.co/test2/play.html?serial=34020000001320001293&code=34020000001320000001' }, 'url').caption("").setHeight('400px');panel2.position = [50, 50];// 關(guān)閉 panel 時(shí)，移除嵌入視頻的 iframe 頁(yè)面panel2.on("close", function() {// panel.remove(iframe);panel2.destroy();panel2 = null;});
}

創(chuàng)建管線

var pos = [[10.298, 3, -6.635], [-8.702, 3, -6.635], [-8.702, 3, 3.365], [-5.702, 3, 3.365], [-5.702, 3, 1.365]];
// 創(chuàng)建管線
line1 = app.create({type: 'PolygonLine',points: pos,width: 0.15,style: {image:'https://www.thingjs.com/static/images/poly_line_01.png', // 管線中的紋理資源}
});
line1.scrollUV = true;
app.query('.PolygonLine').style.alwaysOnTop = true;
line1.play({time: 8000
})

管線切換

var pos = [[10.298, 3, -6.635], [-8.702, 3, -6.635], [-8.702, 3, 3.365], [-5.702, 3, 3.365], [-5.702, 3, 1.365]];
// 創(chuàng)建管線
line1 = app.create({type: 'PolygonLine',points: pos,width: 0.1,style: {image: 'https://www.thingjs.com/static/images/line01.png', // 管線中的紋理資源}
});
line1.scrollUV = true;
app.query('.PolygonLine').style.alwaysOnTop = true;
line1.play({time: 8000
})

鼠標(biāo)操作

app.on(THING.EventType.MouseEnter,'.Deploy',(ev)=>{//觸發(fā)事件后執(zhí)行的操作ev.object.hoverState();
},'mouseEnterDeploy');app.on(THING.EventType.MouseLeave,'.Deploy',(ev)=>{//觸發(fā)事件后執(zhí)行的操作ev.object.hoverState();
},'mouseLeaveDeploy');app.on(THING.EventType.Click,'.Deploy',(ev)=>{//觸發(fā)事件后執(zhí)行的操作ev.object.hoverState();
});

設(shè)置物體樣式

/*** 獲取當(dāng)前樓層的屋頂*/
function getFloorRoof() {var floor = app.level.current; // 當(dāng)前樓層var roof = floor.roof; // 樓層屋頂roof.style.opacity = 0.8; // 設(shè)置屋頂透明度roof.style.color = '#0000ff'; // 設(shè)置屋頂顏色roof.visible = true;
}

循環(huán)動(dòng)作

function carmove(){car.moveTo({// position: [-8.967, 0.02, -2.714], // 移動(dòng)到世界位置offsetPosition: [0, 10, 0], // 相對(duì)自身 向后移動(dòng)到 10m 處time: 0.5 * 1000,'complete': function () {carinit();}// lerpType:null, // 插值類型 默認(rèn)為線性插值});
}function carinit(){car.moveTo({// position: [-8.967, 0.02, -2.714], // 移動(dòng)到世界位置offsetPosition: [0, -10, 0], // 相對(duì)自身 向后移動(dòng)到 10m 處time: 0 * 1000,'complete': function () {carmove();}// lerpType:null, // 插值類型 默認(rèn)為線性插值});
}