首页 前端知识 基于vue与three.js给模型添加标签(CSS2DRenderer与CSS2DObject)

基于vue与three.js给模型添加标签(CSS2DRenderer与CSS2DObject)

2024-02-05 11:02:29 前端知识 前端哥 430 498 我要收藏

第一步,引入

import {
  CSS2DRenderer,
  CSS2DObject,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";

第二步,创建渲染器

this.tagRenderer = new CSS2DRenderer();
      this.tagRenderer.setSize(this.w, this.h);
      this.tagRenderer.domElement.style.position = "absolute";
      this.tagRenderer.domElement.style.zIndex = 9999999;
      this.tagRenderer.domElement.style.top = "0px";
      this.tagRenderer.domElement.style.pointerEvents = "none";
      this.$refs.three_container.appendChild(this.tagRenderer.domElement);

this.$refs.three_container为3D渲染的容器,注意zindex必须足够高

animate方法:

 animate() {
      if (!this.renderer) {
        return;
      }
      requestAnimationFrame(this.animate);
      this.controls.update(); // 更新控制器状态
      TWEEN.update();
      this.renderer.render(this.scene, this.camera);
      if (!this.tagRenderer) {
        return;
      }
      this.tagRenderer.render(this.scene, this.camera);
    },

第三步,创建dom

 this.options.forEach((item) => {
        if (item.position) {
          let domEle = document.createElement("div");
          domEle.className = "tag";
          domEle.innerHTML = `<div>${item.label}</div>
          <div>今日电耗:1892.01kwh</div>
          `;
          let domEleObj = new CSS2DObject(domEle);
          domEleObj.position.set(
            item.position.x,
            item.position.y,
            item.position.z
          );

          this.scene.add(domEleObj);
        }
      });
::v-deep .tag {
  box-shadow: 0 0 2px #00ffff inset;
  background: linear-gradient(#00ffff, #00ffff) left top;
  background-repeat: no-repeat;
  background-size: 1px 6px, 6px 1px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  font-size: 12px;
  padding: 4px 10px;
  position: absolute;
  z-index: 9;
  display: inline;

}

得用deep,不然容易不生效 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1377.html
标签
评论
发布的文章

Web10--jQuery进阶

2024-02-19 09:02:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!