three.js 精灵模型Sprite作为标签

效果：

 

<template>
  <div>
    <el-container>
      <el-main>
        <div class="box-card-left">
          <div
            id="threejs"
            style="border: 1px solid red; position: relative"
          ></div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 效果制作器
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
// 渲染通道
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
// 发光描边OutlinePass
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import {
  CSS2DObject,
  CSS2DRenderer,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
import {
  CSS3DObject,
  CSS3DSprite,
  CSS3DRenderer,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";

export default {
  data() {
    return {
      name: "",
      scene: null,
      camera: null,
      renderer: null,
      css3DRenderer: null,
      effectComposer: null,
      mesh: null,
      geometry: null,
      group: null,
      material: null,
      texture: null,
      position: null,
      outlinePass: null,
      canvasWidth: 1000,
      canvasHeight: 800,
      color: [],
      meshArr: [],
    };
  },
  created() {},
  mounted() {
    this.name = this.$route.query.name;
    this.init();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    init() {
      // 创建场景对象
      this.scene = new this.$three.Scene();
      const axesHelper = new this.$three.AxesHelper(50);
      this.scene.add(axesHelper);
      // 形状缓冲几何体（ShapeGeometry）
      const pointers = [
        new this.$three.Vector2(0,0),
        new this.$three.Vector2(10,0),
        new this.$three.Vector2(0,10),
      ]
      const shape = new this.$three.Shape(pointers);
      // 创建形状缓冲几何体对象，ShapeGeometry 只能是自定义二维的几何体，参数是Shape类型
      this.geometry = new this.$three.ShapeGeometry(shape);
      this.material = new this.$three.MeshBasicMaterial({
        color: 0xff99aa,
        side: this.$three.DoubleSide
      });
      this.mesh = new this.$three.Mesh(this.geometry, this.material);
      this.scene.add(this.mesh);
      // 创建盒模型对象
      const geometry = new this.$three.BoxGeometry(5,20,10);
      const boxMesh = new this.$three.Mesh(geometry, this.material);
      this.scene.add(boxMesh);
      // 创建textLoader加载器对象
      const textureLoader = new this.$three.TextureLoader();
      const texture = textureLoader.load('/img/threejs.jpeg')
      const spriteMaterial = new this.$three.SpriteMaterial({
        map: texture
      })
      // 创建精灵模型对象
      const sprite = new this.$three.Sprite(spriteMaterial);
      sprite.position.y += 12.2;
      sprite.scale.set(5,5,5);
      // 网格模型中添加精灵模型对象
      this.mesh.add(sprite);

      // 创建相机对象
      this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);
      this.camera.position.set(20,15,20);
      this.camera.lookAt(0,0,0);
      // 创建渲染器对象
      this.renderer = new this.$three.WebGLRenderer();
      this.renderer.setSize(1000,800);
      this.renderer.render(this.scene, this.camera);
      window.document.getElementById("threejs").appendChild(this.renderer.domElement);
      
      // 创建空间轨道控制器对象
      const controls = new OrbitControls(this.camera, this.renderer.domElement);
      controls.addEventListener("change", e => {
        this.renderer.render(this.scene, this.camera);
      })
      this.renderFun();
    },
    renderFun() {
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.renderFun);
    }
  },
};
</script>
<style lang="less" scoped>
.box-card-left {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  position: relative;
  width: 100%;

  .box-right {
    img {
      width: 500px;
      user-select: none;
    }
  }
}
</style>