[ThreeJs学习笔记] 精灵与canvas结合动态生成伪三维文字

精灵与canvas结合动态生成伪三维文字

介绍

由于三维文字太过占用内存，但是项目中又需要，参考在CSDN各路大佬的相关代码，研究出了另一种创建三维文字的方法，这种方法可以创建伪三维文字

####创建过程如下

1.使用canvas画布，并在画布上写入自己想要创建的三维文字

  let canvas = document.createElement('canvas');
          canvas.width = 256 ;
          canvas.height = 256 ;
          //画布建议使用正方形，长宽像素值使用2的次方数
        let ctx = canvas.getContext('2d');
        ctx.fillStyle = "rgb(58,255,250)";//设定画布颜色
        ctx.font = "bolder 24px Arial ";//设定字体属性，和css语法一致
        ctx.fillText("示例文字",0,60);//添加文字，并设置文字的位置
        ctx.globalAlpha =1;//设定canvas透明

2.将canvas生成的图片，作为 three.js的材质，使用new THREE.Texture(canvas)来读取该材质

  //将画布生成的图片作为贴图给精灵使用，并将精灵创建在设定好的位置
        let texture = new THREE.Texture(canvas);
        texture.needsUpdate = true; //告诉threejs材质需要更新
        let spriteMaterial = new THREE.PointsMaterial({ 
          map:texture, //贴图
          sizeAttenuation:true,  //开启尺寸衰减
          size:300, //衰减尺寸
          transparent:true, //允许透明
          opacity:1, //设置不透明度
        });

3.创建精灵，将该材质赋予给创建的精灵

 //创建点3D对象
  let geometry = new THREE.BufferGeometry();
        let vertices = [0,0,0];
        geometry.addAttribute('position',new THREE.Float32BufferAttribute(vertices,3));
        let sprite = new THREE.Points(geometry,spriteMaterial);//将材质赋给点实体

4.调整好精灵的位置

sprite.position.set( 100,150, 0);

5.将该点添加到场景中

scene.add(sprite);

##效果图

该文字不会因为旋转，移动而改变大小和方向，始终会面向屏幕，如果使用orbit的中键缩放，会影响该文字的大小

##示例代码