前言

前面我们介绍了Mesh、Line、Point三种物体模型，本节我们来学习一个新的物体模型——Sprite（精灵模型）。

Sprite

Sprite是一个二维图像，并且永远朝向着摄像机，跟Mesh物体一样，Sprite也是基于Object3，具体用法也跟Mesh差不多，不过Sprite不需要创建几何体对象，只需要设置对应的材质即可。之所以不用设置几何体，是因为该物体内部就已经封装了一个PlaneGeometry。因此Sprite构造函数也很简单：

   Sprite( material)
   // material:精灵材质 可选参数

独有的属性如下：

.isSprite:是否是精灵模型。
.center:中心点（锚点），旋转时的中心点，默认值为(0.5,0.5)。
.material:设置的材质。

SpriteMaterial

SpriteMaterial是用来设置Sprit材质的对象，跟MeshMaterial一样可以用来设置颜色、贴图等属性，其构造函数为：

   SpriteMaterial( parameters )
   //parameters 属性对象

.rotation:将模型进行转动，单位为弧度。
.sizeAttenuation:模型大小是否会受相机深度影响，默认为true，该属性仅限于透视摄像机。
.position:用于设置模型位置，精灵模型位置属性跟其他模型不太一样，因为精灵模型是一直平行于canvas的。接下来我们就创建一个精灵模型：

//创建透视相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
//设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);
// 创建精灵
const spriteMap = new THREE.TextureLoader().load('./textures/wood.jpg');
//利用SpritMaterial创建材质
const spriteMaterial = new THREE.SpriteMaterial({
  map: spriteMap,
  color: 0xffffff
});
const sprite = new THREE.Sprite(spriteMaterial);
// 放大 z轴为1即可
sprite.scale.set(2,2,1)
scene.add(sprite);

QQ图片20230508225844.png

当我们去用鼠标转动的时候会发现物体并没有变化，因为精灵模型对象就是平面的，而不是3D的。

总结

以上就是Sprite精灵模型对象，它是二维图像，与画布平行。该对象一般用来模拟下雨、下雪等场景，是一种实用的模型对象。

three学习（二十八）—— 精灵模型对象

前言

Sprite

SpriteMaterial

总结