threejs精灵(Sprite)

Sprite精灵

Sprite叫精灵，计算机图形学中，精灵指包含于场景中的二维图像或动画（wiki）。在threejs中，这样说明Sprtite（doc） :

 A sprite is a plane that always faces towards the camera , 
 generally with a partially transparent texture applied.Sprites do not cast shadows.

即Sprite是一个永远面向相机的平面，通常用来加载纹理，并且，sprite不接受阴影。要直观看体会Sprite,可以点击Sprite例子。

使用Sprite创建2D形状

Sprite叫精灵，计算机图形学中，精灵指包含于场景中的二维图像或动画（wiki）。在threejs中，可以使用Sprite加载图像纹理，当然也包括用canvas创建的纹理，因此，canvas能创建什么图像，Sprite就能创建什么形状。下面的例子使用Sprite创建了一个圆：

function createSpriteShape(){
       /*1、创建一个画布，记得设置画布的宽高，否则将使用默认宽高，有可能会导致图像显示变形*/
        let canvas = document.createElement("canvas");
        canvas.width = 120;
        canvas.height = 120;
        /*2、创建图形，这部分可以去看w3c canvas教程*/
        let ctx = canvas.getContext("2d");
        ctx.fillStyle = "#ff0000";
        ctx.arc(50,50,50,0,2*Math.PI);
        ctx.fill();
        /*3、将canvas作为纹理，创建Sprite*/
        let texture = new THREE.Texture(canvas);
        texture.needsUpdate = true; //注意这句不能少
        let material = new THREE.SpriteMaterial({map:texture});
        let mesh = new THREE.Sprite(material);
        /*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/
        mesh.scale.set(100,100,1);
        return mesh;
}

使用Sprite创建文字

function createSpriteText(){
        //先用画布将文字画出
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        ctx.fillStyle = "#ffff00";
        ctx.font = "Bold 100px Arial";
        ctx.lineWidth = 4;
        ctx.fillText("ABCDRE",4,104);
        let texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;

        //使用Sprite显示文字
        let material = new THREE.SpriteMaterial({map:texture});
        let textObj = new THREE.Sprite(material);
         textObj.scale.set(0.5 * 100, 0.25 * 100, 0.75 * 100);
        textObj.position.set(0,0,98);
        return textObj;
}

设置材质透明

使用图片或canvas作为纹理的时候，图片或纹理的底图可能会遮住别的图形，如下：

此时，可以将材质设为透明，如下：

let material = new THREE.SpriteMaterial({map:texture,**transparent:true**});

设置后效果如下：

---

持续更新【Sprite精灵】