博主：_LJaXi Or 東方幻想郷
專欄： 數(shù)字孿生 | 3D可視化框架
開發(fā)工具：ThingJS在線開發(fā)工具
ThingJs 低代碼開發(fā)
注意點
有問題直接戳官網(wǎng): ThingJs 在線開發(fā)工具
對象拾取:只有物品編輯了UserIDName或者添加自定義屬性之后, 導(dǎo)入到ThingJs中才能成為獨立的管理對象,被程序讀取或修改
場景效果配置
燈光配置
app.lighting = {}
后期設(shè)置(美化效果)
app.postEffect = {}
天氣效果
app.fog = {} // 霧化效果
apep.create // 接口創(chuàng)建粒子，實現(xiàn)雨雪效果
例子類型：'ParticleSystem'
動態(tài)天空及天空盒
app.ksyEffect = {}
層級
層級常用API
app.level.change(object); // 層級切換到指定對象
app.level.back(); // 返回當(dāng)前層級的父物體層級
app.level.current; // 獲取當(dāng)前的層級對象
app.level.previous; // 獲取之前的層級對象
實例化 Thing，加載場景
var app = new THING.App({
url: '', // 場景url
background: '#00000', // 場景顏色
env： ‘Seaside' // 主題吧，忘了
})
load 加載函數(shù)
app.on('load', (ev) => {
app.level....
})
ThingJs 層級關(guān)系圖
查找層級
app.query('.Building'); // 查找物體類是 Building 的對象
app.query("car01")[0]; // 查詢名稱(name)是 car01 的對象
app.query("[alarm]"); // 有物體類型屬性的，無論值是什么
app.query('["userData/物體類型"="糧倉"]'); // 查詢物體類型屬性是糧倉的對象
app.query("[levelNum>2]"); // 查詢levelNum大于2的對象，支持 <=, <, =, >, >=
// 支持鏈?zhǔn)讲樵?/span>
app.query('.Building').query("[alarm]");
// 正則表達(dá)式(RegExp)對象
app.query(/car/);
/
var reg = new RegExp(/car/);
app.query(reg);
層級切換完成
complete() {
console.log("層級切換完成")
}
飛行完成
flyComplete() {
console.log("場景飛行完成")
}
樓層
層級事件常用API
EnterLevel; // 進(jìn)入層級事件 (包含4個內(nèi)置響應(yīng))
LeaveLevel; // 退出層級事件 (包含1個內(nèi)哭響應(yīng))
LevelFlyEnd; // 層級切換飛行結(jié)束事件
進(jìn)入層級時的場景控制
THING.EventTag.LevelSceneOperations,如進(jìn)入建筑時顯示所有樓層;進(jìn)入物體時，設(shè)置兄弟物體半透明進(jìn)入層級時的飛行控制
THING.EventTag.LevelFly,如進(jìn)入各個層級時的飛行控制 (飛行時間、視角等)進(jìn)入層級時背景熱制
THING.EventTag,LevelSetBackground,如進(jìn)入建筑后隱藏天空盒進(jìn)入層級時的 Pick 設(shè)置
THING.EventTag.LevelPickedResultFunc,如進(jìn)入建筑后是只能 Pick 樓層還是也能 Pick 樓層下的物體
退出層級時的場景控制
THING.EventTag.LevelSceneOperations,如從園區(qū)進(jìn)入建筑層級 (即退出園區(qū)) 后，園區(qū)隱藏
監(jiān)聽層級切換事件
//第二個參數(shù)可以輸入.Building/.Floor/.Thing，來監(jiān)聽是建筑、樓層、物體的層級切換，不輸入默認(rèn)監(jiān)聽所有層級
// 監(jiān)聽進(jìn)入樓層事件
app.on(THING.EventType.EnterLevel, '', function (ev) {
if (ev.current.name == '1樓') {
//進(jìn)入一樓顯示兩個設(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)入物體層級默認(rèn)行為
// 停止進(jìn)入物體層級的默認(rèn)行為
app.pauseEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);
在應(yīng)用程序中，
THING.EventType.EnterLevel事件代表進(jìn)入樓層的事件類型。當(dāng)用戶進(jìn)入某個樓層時，系統(tǒng)會默認(rèn)執(zhí)行一些與層級場景相關(guān)的操作，比如加載和顯示該樓層的模型、攝像機(jī)切換等使用
app.pauseEvent方法可以暫?；蛲Ｖ固囟ㄊ录哪J(rèn)行為。在您的代碼中，通過調(diào)用app.pauseEvent方法來停止 ‘THING.EventType.EnterLevel’ 事件與 ‘.Thing’ 類相關(guān)的默認(rèn)行為換句話說，當(dāng)用戶進(jìn)入樓層并且當(dāng)前對象是 ‘.Thing’ 類的實例時，通過停止默認(rèn)行為，您可以自定義處理事件并阻止系統(tǒng)默認(rèn)的操作
創(chuàng)建按鈕(兩種方法)
new THING.widget.Button('按鈕文本', function () {
// 寫邏輯
}, "方法描述(隨便寫)")
new THING.widget.Button('文本'，綁定方法(注意不是字符串))
添加攝像頭
// 視頻url地址，但是url必須是https協(xié)議的，
// 其本質(zhì)是將https協(xié)議的一個攝像頭html網(wǎng)頁引入一個iframe的panel面板中。
var panel2 = null;
// 將視頻嵌入到3D場景中
if (panel2) {
panel2.destroy();
panel2 = null;
} else {
// 將視頻頁面作2D界面元素 通過快捷界面庫 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 時，移除嵌入視頻的 iframe 頁面
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
})
文章來源：http://www.zghlxwxcb.cn/news/detail-668402.html
管線切換
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
})
文章來源地址http://www.zghlxwxcb.cn/news/detail-668402.html
鼠標(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)動作
function carmove(){
car.moveTo({
// position: [-8.967, 0.02, -2.714], // 移動到世界位置
offsetPosition: [0, 10, 0], // 相對自身 向后移動到 10m 處
time: 0.5 * 1000,
'complete': function () {
carinit();
}
// lerpType:null, // 插值類型 默認(rèn)為線性插值
});
}
function carinit(){
car.moveTo({
// position: [-8.967, 0.02, -2.714], // 移動到世界位置
offsetPosition: [0, -10, 0], // 相對自身 向后移動到 10m 處
time: 0 * 1000,
'complete': function () {
carmove();
}
// lerpType:null, // 插值類型 默認(rèn)為線性插值
});
}
到了這里，關(guān)于【ThingJS | 3D可視化】開發(fā)框架，一站式數(shù)字孿生的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
