threejs将文字贴到物体面

白酱酱

已于 2024-06-28 17:11:27 修改

阅读量661

点赞数

文章标签： css 前端 html

于 2022-11-28 14:11:51 首次发布

本文链接：https://blog.csdn.net/m0_65720832/article/details/128078739

版权

场景

new THREE.Scene()

相机

new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)

渲染器

new THREE.WebGLRenderer()

坐标轴

new THREE.AxesHelper(20)

平面

new THREE.PlaneGeometry(60, 20, 1, 1)

// 设置投影

plane.receiveShadow = true;

物体（三个）

new THREE.BoxGeometry(4, 4, 4)

new THREE.MeshLambertMaterial( { color: 0x00ff00} )

new THREE.Mesh( geometry, material )

// 设置投影

cube.castShadow = true;

光源

new THREE.SpotLight( 0xffffff )

// 设置投影

spotLight.castShadow = true;

  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 
    ];
.......
}