threejs 模型添加文字的几种方式

在给几何体或者导入的模型表面添加文字时，可以用如下方式

1 将文字绘制到canvas中，并将其用作Texture

给正方体某个表面添加文字为例；如下创建一个正方体

// ---------------------------------------------------------------------
// 添加模型
// ---------------------------------------------------------------------
var geometry = new THREE.BoxGeometry( 30,30, 30 );
var materials = [ 
    new THREE.MeshBasicMaterial( { color: 'blue' } ), // right
    new THREE.MeshBasicMaterial( { color: 'yellow' } ), // left
    new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(getTextCanvas1()) } ), // top
    new THREE.MeshBasicMaterial( { color: 'black' } ), // bottom
    new THREE.MeshBasicMaterial( { color: 'green' } ), // back
    new THREE.MeshBasicMaterial( { color: 'red' } ) // front 
    ];
var cube = new THREE.Mesh( geometry, materials );
scene.add(cube);

其中正方体顶部表面,使用CanvasTexture作为材质，如下该材质可以用canvas或者img或者视频元素作为贴图，下面以canvas为例；

在canvas中绘制文本，可以通过filltext绘制文本，遍历可以实现换行的效果

// CanvasTexture
function getTextCanvas1(){ 
    let texts=[{
        name:"北京",
        value:323
    },{
        name:"杭州"