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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的threejs精灵(Sprite)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。