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);

全部代码：

<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() {
      // 透视摄像机
      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);

      // 标签使用 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);

      // 标签使用精灵图 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>