• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue使用BIMFACE添加标签和多个场景已经动态修改标签内容

开发技术 开发技术 3周前 (04-21) 8次浏览

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;
    width: 100px;
    height: 30px;
    border-radius: 3px;
    border: none;
    background: #32D3A6;
    color: #FFFFFF;
  }

  .main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
  }

  #domId {}
</style>

vue使用BIMFACE添加标签和多个场景已经动态修改标签内容


喜欢 (0)