2021-10-25 Threejs标签

div

1,定义一个div，存放将要显示得标签内容

<div class="title one">
     <span style="color:white;font-size: 18px;padding: 5px">xxxx</span>
</div>

2，需要在render中将div框渲染到页面，此处得cube指的是，在哪个模型上显示标签，此处得cube指的就是哪个模型的位置

render() {
    let _this=this;
        //获取到窗口的一半高度和一半宽度
        let halfWidth = window.innerWidth / 2;
        let halfHeight = window.innerHeight / 2;
         let vector;
        if(_this.cube){
             vector = _this.cube.position.clone().project(_this.camera);
             $(".one").css({
	            left:vector.x * halfWidth + halfWidth,
	            top:-vector.y * halfHeight + halfHeight
	        });
        }
}

cavans

1，先定义一个canvas，存放将要显示得标签

 <canvas id="canvas1" style="display: none">你的浏览器不支持canvas</canvas>在这里插入代码片

2，将canvas内容渲染到页面中

      //用canvas生成图片
      let canvas1 = document.getElementById("canvas1");
      let ctx = canvas1.getContext("2d");
      canvas1.width = 300;
      canvas1.height =300;
      //制作矩形
      ctx.fillStyle = "rgba(25,25,112,0)";
      ctx.fillRect(0, 0, 300,130);
      //设置文字
      ctx.font="25px Arial";
      ctx.fillStyle = "white";
      ctx.fillText('xxxx', 19, 20)
      
      ctx.fillStyle = "#00ffff";
      ctx.font = 'normal bold 25px "楷体"';
      ctx.fillText('xxx', 19, 50);
    
      //生成图片
      let url = canvas1.toDataURL("image/png");

      //将图片构建到纹理中
      let geometry1 = new THREE.PlaneGeometry(30,30);
      let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {});

      let material1 = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide,
        opacity: 1,
        transparent: true,
      });

      let rect = new THREE.Mesh(geometry1, material1);
      rect.position.set(-130,7,7);
      _this.scene.add(rect);

css2drender

1，引入组件

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

2，先定义一个div

//可以自定义需求样式
 <div id="labeldiv" class="labeldiv" style="display: none"></div> 

3，增加css2drenderer渲染器

      this.labelRenderer = new CSS2DRenderer();
      this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
      // this.labelRenderer.domElement.style.position = "absolute";
      // this.labelRenderer.domElement.style.top = "0px";
      this.labelRenderer.domElement.style =
        "pointer-events: auto;position: absolute;top: 0px;"; // 处理新的渲染器
      const container = document.getElementById("container");
      container.appendChild(this.renderer.domElement);
    container.appendChild(this.labelRenderer.domElement);

4，定义div时，不显示，运行js时才显示

      let labelCSS2D = this.scene.getObjectByName("labeldiv");
      if (labelCSS2D === undefined) {
        let labelDiv = document.getElementById("labeldiv");
        // labelDiv.style.display = 'block'
        // labelDiv.style.pointerEvents = "none";
        labelCSS2D = new CSS2DObject(labelDiv);
        labelCSS2D.name = "labeldiv";
        labelCSS2D.position.set(-130, 20, 8);
        this.scene.add(labelCSS2D);
      } else {
        labelCSS2D.visible = true;
      }

5，需要时刻进行渲染，在animate函数中添加css2drenderer

 this.labelRenderer.render(this.scene, this.camera);

css3drender

1，css3drenderer与css2drenderer做法步骤完全一致，只要将上述2drenderer的2改为3即可，其他全部不更改。
2，css3drender标签好处是：它可以跟随模型放大缩小，而进行放大缩小，但是css2drenderer则不可，除非将controls控制器的参数中再添加一个参数（this.camera, this.labelRenderer.domElement）,但是这样你只能将鼠标放在标签上整个场景才可以控制旋转等。。

有啥不足或有更好的办法，可以随时交流啊。。