vue 使用 bimface 添加三维标签

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) {

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】