1. 使用材質(zhì)制作標(biāo)簽

使用材質(zhì)制作標(biāo)簽的特點(diǎn)是它不會隨著鏡頭旋轉(zhuǎn)而跟隨，也就是不會跟著鏡頭旋轉(zhuǎn)，如下圖：

正面

反面

具體代碼如下：

      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. 使用精靈圖制作標(biāo)簽

使用精靈圖制作標(biāo)簽的特點(diǎn)是它會一直面朝著鏡頭，無論鏡頭怎么旋轉(zhuǎn)，它始終以正面面對鏡頭，如圖：

精靈圖

具體代碼如下：

      // 標(biāo)簽使用精靈圖 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);

全部代碼：

<template>
  <div ref="container"></div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import TWEEN from "@tweenjs/tween.js"; // 動畫插件
export default {
  name: "testLabel",
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      resize: null,
    };
  },
  methods: {
    init() {
      // 透視攝像機(jī)
      this.camera = new THREE.PerspectiveCamera(
        40,
        window.innerWidth / window.innerHeight,
        0.1,
        100
      );

      this.camera.position.set(4.25, 1.4, -4.5);

      // 場景
      this.scene = new THREE.Scene();

      // 柵格
      let grid = new THREE.GridHelper(20, 40, 0xffffff, 0xffffff);
      grid.material.opacity = 0.2;
      grid.material.depthWrite = false;
      grid.material.transparent = true;
      this.scene.add(grid);

      // 標(biāo)簽使用 MeshBasicMaterial
      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);

      // 標(biāo)簽使用精靈圖 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);

      // renderer
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth, window.innerHeight, false);
      this.renderer.shadowMap.enabled = true;
      this.$refs.container.appendChild(this.renderer.domElement);

      // 控制
      const controls = new OrbitControls(this.camera, this.renderer.domElement);
      controls.listenToKeyEvents(window); // optional

      // 控制角度
      controls.maxPolarAngle = 1.6;

      controls.update();

      this.resize = window.addEventListener("resize", () => {
        this.onWindowResize();
      });
    },

    animate() {
      requestAnimationFrame(this.animate);
      this.render();
    },

    render() {
      TWEEN.update();
      this.renderer.clear();
      this.renderer.render(this.scene, this.camera);
    },

    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight, false);
    },
  },

  mounted() {
    this.init();
    this.animate();
  },
};
</script>