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