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精灵】