Threejs pastes the text on the object surface

  methods: {
    getTextCanvas(text) {
      var width = 512, height = 256;
      var canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = '#C3C3C3';
      ctx.fillRect(0, 0, width, height);
      ctx.font = 50 + 'px " bold';
      ctx.fillStyle = '#2891FF';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(text, width / 2, height / 2);
      return canvas;
    },
  },
  mounted() {
......
    this.material = [
      new THREE.MeshBasicMaterial({ color: '#fff' }), // right
      new THREE.MeshBasicMaterial({ map: texture, }), // left
      new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(this.getTextCanvas('Leo Test Label')) }), // top
      new THREE.MeshBasicMaterial({ color: 'black' }), // bottom
      new THREE.MeshBasicMaterial({ map: texture, }), // back
      new THREE.MeshBasicMaterial({ color: 'red' }) // front 
    ];
.......
}

Guess you like

Origin blog.csdn.net/m0_65720832/article/details/128078739