vue 使用 bimface 添加三维标签
自己写的demo，按照官方文档改的，但是感觉有点小瑕疵。
https://bimface.com/developer-jsdemo#829
<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();
let drawableContainerConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainerConfig();
// 设置容器配置匹配的对象
drawableContainerConfig.viewer = this.viewer3D;
// 设置标签受剖切功能的影响，即该容器内的标签被剖切后不显示，默认开启该功能
drawableContainerConfig.affectedBySection = true;
// 创建标签容器
// this.cunstomItemContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableContainerConfig);
this.cunstomItemContainer = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainer(drawableContainerConfig);
}
},
// 添加标签
addCustomTag() {
// 定义标签坐标
var tagPosition = {
x: 228.4,
y: -4800.5,
z: 4400
}
this.createCustomItemContainer()
let canvas = this.createCanvas();
let marker3dConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DConfig();
marker3dConfig.canvas = canvas;
marker3dConfig.size = 100;
marker3dConfig.worldPosition = tagPosition;
let marker3d = new Glodon.Bimface.Plugins.Marker3D.Marker3D(marker3dConfig);
this.cunstomItemContainer.addItem(marker3d);
this.viewer3D.clearSelectedComponents();
this.viewer3D.render();
},
createCanvas() {
let width = 3000;
let height = 800;
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
ctx.fillStyle = "#32D3A6";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(35, 35, width, height);
ctx.fillStyle = '#32D3A6';
ctx.font = "500px Arial bolder";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('开发BIM应用', canvas.width / 2, canvas.height / 2 - 80);
return canvas;
},
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>
