vue使用BIMFACE添加标签和多个场景已经动态修改标签内容
太费劲了，直接上代码，一个demo而已，没多少东西。
<template>
<div style="height: 90%;">
<button class="button" id="btnAddFireEffect" @click="addFireEffect">添加火焰效果</button>
<button class="button" @click="setFireScale">调整火焰大小</button>
<button class="button" @click="setFireType">更改火焰类型</button>
<button class="button" @click="setSmokeConcentration()">调整烟雾浓度</button>
<!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 -->
<div id="domId" style="height: 100%;"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
viewToken: '24448941b05340968a92ae84a2a0812a',
viewer3D: '',
app: '',
viewAdded: false,
isFireEffectAdded: false,
fireEffect: '',
isAddCustomTagActivated: false,
cunstomItemContainer: null,
worldPos: '',
modelId: '123',
}
},
mounted() {
let loaderConfig = new BimfaceSDKLoaderConfig();
loaderConfig.viewToken = this.viewToken;
BimfaceSDKLoader.load(loaderConfig, this.successCallback, this.failureCallback);
},
methods: {
successCallback(viewMetaData) {
let dom4Show = document.getElementById('domId');
// 设置WebApplication3D的配置项
let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
webAppConfig.domElement = dom4Show;
webAppConfig.enableExplosion = true;
// 创建WebApplication3D，用以显示模型
this.app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
this.app.addView(this.viewToken);
this.viewer3D = this.app.getViewer();
// 增加加载完成监听事件
this.viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, () => {
this.viewAdded = true;
this.addCustomTag()
// 渲染场景
// this.viewer3D.render();
this.viewer3D.addView('405247cb3cdc4888935826bb06c18cff');
this.viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ModelAdded, () => {
this.viewer3D.getModel('1641597995361472').setModelTranslation({ x: 24000, y: 2500, z: 0 });
//自适应屏幕大小
window.onresize = () => {
this.viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
}
});
this.viewer3D.render();
});
},
failureCallback() {
},
// 自定义标签
createCustomItemContainer() {
if (!this.cunstomItemContainer) {
// 创建标签容器配置
let drawableContainerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
// 设置容器配置匹配的对象
drawableContainerConfig.viewer = this.viewer3D;
// 设置标签受剖切功能的影响，即该容器内的标签被剖切后不显示，默认开启该功能
drawableContainerConfig.affectedBySection = true;
// 创建标签容器
this.cunstomItemContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableContainerConfig);
}
},
// 添加标签
addCustomTag() {
// 定义标签坐标
var tagPosition = {
x: 228.4,
y: -4800.5,
z: 12400
}
this.createCustomItemContainer();
// 创建CustomItemConfig
var config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
var content = document.createElement('div');
// 自定义样式，支持HTML的任意DOM元素
// 设置标签的宽度和高度
content.style.width = '80px';
content.style.height = '25px';
// 设置标签样式
content.style.border = 'solid';
content.style.borderColor = '#FFFFFF';
content.style.borderWidth = '2px';
content.style.borderRadius = '5%';
content.style.background = '#11DAB7';
// 设置标签文字内容与样式
content.innerText = `温度：${Math.round(Math.random() * 5 + 20)}℃`;
content.style.color = '#FFFFFF';
content.style.textAlign = 'center';
content.style.lineHeight = '20px';
// 设置自定义标签配置
config.content = content;
config.opacity = 1;
config.offsetX = -40;
config.offsetY = -32;
config.viewer = this.viewer3D;
config.worldPosition = tagPosition;
// 创建自定义标签对象
var customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(config);
// 将自定义标签添加至标签容器内
this.cunstomItemContainer.addItem(customItem)
var tagPosition1 = {
x: 700.4,
y: -2654.5,
z: 8520
}
this.createCustomItemContainer();
// 创建CustomItemConfig
var config1 = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
var content1 = document.createElement('div');
// 自定义样式，支持HTML的任意DOM元素
// 设置标签的宽度和高度
content1.style.width = '100px';
content1.style.height = '25px';
// 设置标签样式
content1.style.border = 'solid';
content1.style.borderColor = '#FFFFFF';
content1.style.borderWidth = '2px';
content1.style.borderRadius = '5%';
content1.style.background = '#11DAB7';
// 设置标签文字内容与样式
content1.innerText = `光照：${Math.round(Math.random() * 100)} Lux`;
content1.style.color = '#FFFFFF';
content1.style.textAlign = 'center';
content1.style.lineHeight = '20px';
// 设置自定义标签配置
config1.content = content1;
config1.opacity = 1;
config1.offsetX = -40;
config1.offsetY = -32;
config1.viewer = this.viewer3D;
config1.worldPosition = tagPosition1;
config1.modelId = this.modelId;
// 创建自定义标签对象
var customItem1 = new Glodon.Bimface.Plugins.Drawable.CustomItem(config1);
// 将自定义标签添加至标签容器内
// console.log('---> ', customItem1)
this.cunstomItemContainer.addItem(customItem1)
setInterval(() => {
this.cunstomItemContainer._items.forEach(element => {
// console.log('---> ', element)
if (element.modelId == this.modelId) {
element._config.content.innerHTML = `温度：${Math.round(Math.random() * 5 + 20)}℃`
}
});
}, 3000)
},
setButtonText(btnId, text) {
var dom = document.getElementById(btnId);
if (dom != null && dom.nodeName == "BUTTON") {
dom.innerText = text;
}
},
addFireEffect() {
if (!this.isFireEffectAdded) {
let firePos = {
x: -2194.954,
y: -7739.213,
z: 6194
}
let fireConfig = new Glodon.Bimface.Plugins.ParticleSystem.FireEffectConfig();
fireConfig.position = firePos;
fireConfig.viewer = this.viewer3D;
this.fireEffect = new Glodon.Bimface.Plugins.ParticleSystem.FireEffect(fireConfig);
this.setButtonText("btnAddFireEffect", "销毁火焰效果");
this.viewer3D.render();
} else {
// 销毁火焰效果
this.fireEffect.destroy();
this.setButtonText("btnAddFireEffect", "添加火焰效果");
}
this.isFireEffectAdded = !this.isFireEffectAdded;
},
setFireScale() {
if (!this.isFireEffectAdded) {
window.alert("请先添加火焰效果");
} else {
let scale = this.fireEffect.getScale();
if (scale == 1) {
// 设置火焰粒子比例
this.fireEffect.setScale(0.5);
// 更新火焰参数配置
this.fireEffect.update();
} else {
// 设置火焰粒子比例
this.fireEffect.setScale(1);
// 更新火焰参数配置
this.fireEffect.update();
}
}
},
setFireType() {
if (!this.isFireEffectAdded) {
window.alert("请先添加火焰效果");
} else {
let type = this.fireEffect.getType();
if (type == "Fire") {
// 设置火焰类型
this.fireEffect.setType(Glodon.Bimface.Plugins.ParticleSystem.FireType.Smoke);
// 更新火焰参数配置
this.fireEffect.update();
} else {
// 设置火焰类型
this.fireEffect.setType(Glodon.Bimface.Plugins.ParticleSystem.FireType.Fire);
// 更新火焰参数配置
this.fireEffect.update();
}
}
},
setSmokeConcentration() {
if (!this.isFireEffectAdded) {
window.alert("请先添加火焰效果");
} else {
let concentration = this.fireEffect.getSmokeConcentration();
if (concentration == 0.6) {
// 设置烟雾浓度
this.fireEffect.setSmokeConcentration(0.2);
// 更新火焰参数配置
this.fireEffect.update();
} else {
// 设置烟雾浓度
this.fireEffect.setSmokeConcentration(0.6);
// 更新火焰参数配置
this.fireEffect.update();
}
}
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.buttons {
font-size: 0;
}
.button {
margin: 5px 0 5px 5px;
100px;
height: 30px;
border-radius: 3px;
border: none;
background: #32D3A6;
color: #FFFFFF;
}
.main {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
}
#domId {}
</style>
