Three.js精靈模型Sprite

Three.js精靈模型Sprite

本文是Three.js電子書的10.1節

Three.js的精靈模型對象Sprite和Threejs的網格模型Mesh一樣都是模型對象，基類都是Object3D,關於精靈模型對象Sprite的方法和屬性除了可以查看文檔Sprite，也可以查看基類Object3D。

創建精靈模型對象Sprite和創建網格模型對象一樣需要創建一個材質對象，不同的地方在於創建精靈模型對象不需要創建幾何體對象Geometry，精靈模型對象本質上你可以理解爲已經內部封裝了一個平面矩形幾何體PlaneGeometry，矩形精靈模型與矩形網格模型的區別在於精靈模型的矩形平面會始終平行於Canvas畫布。

如果你想理解精靈模型的本質可以閱讀官方文件three.js-master精靈模型對象的封裝源碼\src\objects\Sprite.js、解析渲染精靈模型的源碼\src\renderers\webgl\WebGLSpriteRenderer.js。

Sprite和SpriteMaterial

通過Sprite創建精靈模型不需要幾何體，只需要給構造函數Sprite的參數設置爲一個精靈材質SpriteMaterial即可。

精靈材質對象SpriteMaterial和普通的網格材質一樣可以設置顏色.color、顏色貼圖.map、開啓透明.transparent、透明度.opacity等屬性，精靈材質對象SpriteMaterial的基類是材質Material。

精靈材質SpriteMaterial的屬性除了和網格材質類似的屬性和方法外，還有一些自己獨特的方法和屬性，比如.rotation旋轉精靈模型，更多相關屬性和方法可以查看threejs文檔關於SpriteMaterial的介紹。

var texture = new THREE.TextureLoader().load("sprite.png");
// 創建精靈材質對象SpriteMaterial
var spriteMaterial = new THREE.SpriteMaterial({
  color:0xff00ff,//設置精靈矩形區域顏色
  rotation:Math.PI/4,//旋轉精靈對象45度，弧度值
  map: texture,//設置精靈紋理貼圖
});
// 創建精靈模型對象，不需要幾何體geometry參數
var sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);
// 控制精靈大小，比如可視化中精靈大小表徵數據大小
sprite.scale.set(10, 10, 1); //// 只需要設置x、y兩個分量就可以

.scale和.position

精靈模型對象和網格模型Mesh對一樣基類都是Object3D，自然精靈模型也有縮放屬性.scale和位置屬性.position，一般設置精靈模型的大小是通過.scale屬性實現，而精靈模型的位置通過屬性.position實現，精靈模型和普通模型一樣，可以改變它在三維場景中的位置，區別在於精靈模型的正面一直平行於canvas畫布。

在使用透視投影相機對象的時候，精靈模型對象顯示的大小和網格模型一樣受距離相機的距離影響，也就是距離越遠，顯示效果越小。

Sprite用途

說到精靈模型對象，這種情況下你肯定關心它的用途，關於用途，你可以在三維場景中把精靈模型作爲一個模型的標籤，標籤上可以顯示一個寫模型的信息，你可以通過足夠多的精靈模型對象，構建一個粒子系統，來模擬一個下雨、森林、或下雪的場景效果。