three.js 动态标签

1. 使用材质制作标签

使用材质制作标签的特点是它不会随着镜头旋转而跟随，也就是不会跟着镜头旋转，如下图：

正面

反面

具体代码如下：

      let img = new THREE.TextureLoader().load("static/texture/sprite1.png");
      const basicMesh = new THREE.Mesh(
        new THREE.PlaneGeometry(1, 1),
        new THREE.MeshBasicMaterial({
          transparent: true,
          depthWrite: true,
          map: img,
          side: 2,
        })
      );
      this.scene.add(basicMesh);

2. 使用精灵图制作标签

使用精灵图制作标签的特点是它会一直面朝着镜头，无论镜头怎么旋转，它始终以正面面对镜头，如图：

精灵图

具体代码如下：

      // 标签使用精灵图 sprite (精灵图)
      let texture = new THREE.TextureLoader().load(
        "static/texture/sprite1.png"
      );
      let spriteMaterial = new THREE.SpriteMaterial({
        map: texture,
        sizeAttenuation: false,
      });
      let sprite = new THREE.Sprite(spriteMaterial);
      sprite.scale.set(0.15, 0.15, 0.15);
      sprite.position.set(-2, 0, 0);
      this.scene.add(sprite);

全部代码：