12.精灵模型Sprite

精灵模型Sprite

Three.js的精灵模型Sprite和Threejs的网格模型Mesh一样都是模型对象，父类都是Object3D。

精灵模型不同于其他模型，不需要几何体作为参数对象，只需要精灵材质作为参数对象。

创建精灵材质

// 创建精灵材质对象SpriteMaterial
const spriteMaterial = new THREE.SpriteMaterial({
  color:0x00ffff,//设置颜色
});

创建精灵模型

// 创建精灵模型对象，不需要几何体geometry参数
const sprite = new THREE.Sprite(spriteMaterial);

精灵模型Sprite与Mesh模型的区别 

Sprite形状是矩形，PlaneGeometry创建的网格模型Mesh的形状也是矩形。

Sprite与矩形平面Mesh的区别在于,当你旋转三维场景的时候，如果通过相机控件OrbitControls旋转测试，你可以发现Sprite矩形平面会始终平行于Canvas画布或者说屏幕，而矩形平面Mesh的姿态角度会跟着旋转，不一定平行于canvas画布。