关于three.js中添加文字的方式

网上资料大部分是通过引入外部font库进行文字效果的载入，但是在实际运行的时候发现非常占用资源。于是不得不想另一种方法。

于是想到了three.js中的粒子系统。这当中有个很gay的骚操作是下面这个函数。

var particleMaterial = new THREE.SpriteCanvasMaterial( {

            color: 0x000000,
            program: function ( context ) {

                context.beginPath();
                context.font="bold 20px Arial";
                context.fillStyle="#058";
                context.transform(-1,0,0,1,0,0);
                context.rotate(Math.PI);
                context.fillText( wordFont , 0, 0 );

            }

上面的函数当中，可以传入一个canvas对象。恩，对。如果你想载入文字，写到canvas里就够啦，你还可以画小h图哦。

附上源代码：

ps:代码中最后的注释部分是外部加载字体的方式。有知道的大神请告诉我这么loader为啥贼卡。还有为什么context中文字fillText初始是镜像倒转的？又费了一点劲给它倒腾回来。可能涉及到坐标的原因，同样希望大神告知。

效果如下：

博客才开始写没多久，风格还没统一。先凑合着看呗