推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

精灵模型Sprite

Three.js的精灵模型Sprite和Threejs的网格模型Mesh一样都是模型对象，父类都是Object3D,关于精灵模型对象Sprite的方法和属性除了可以查看文档Sprite，也可以查看父类Object3D。

第一次接触精灵模型Sprite的时候，可以类比以前讲解过的网格模型Mesh学习。

创建精灵模型材质SpriteMaterial

精灵材质对象SpriteMaterial和普通的网格材质一样可以设置颜色.color、颜色贴图.map、开启透明.transparent、透明度.opacity等属性，精灵材质对象SpriteMaterial的父类是材质Material。

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

创建精灵模型Sprite

创建精灵模型对象Sprite和创建网格模型对象一样需要创建一个材质对象，不同的地方在于创建精灵模型对象不需要创建几何体对象Geometry。

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

const mesh = new THREE.Mesh(geometry, material);

精灵模型Sprite默认是一个矩形形状，默认长宽都是1，默认在坐标原点位置。Sprite默认尺寸为1，如果你在画布上看不太清，可以适当调整相机参数。

对于透视投影相机而言，Sprite和Mesh一样遵循远小近大的投影规律。

正投影相机验证Sprite尺寸

Sprite默认尺寸是1，如果正投影相机对象的top, bottom范围分别为0.5，-0.5，上下方向渲染范围是1，精灵模型默认尺寸长宽都是1，这样刚好上下方向100%填充画布。

const s = 0.5;//控制left, right, top, bottom范围大小
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);

对比Sprite和矩形平面Mesh

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

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

Sprite属性.position、.scale

精灵模型Sprite和Mesh一样具有位置.position和缩放.scale属性。

sprite.scale只需要设置x、y两个分量就可以，z方向默认值就行。

// 控制精灵大小
console.log('sprite.scale',sprite.scale);
sprite.scale.set(50, 25, 1); //只需要设置x、y两个分量就可以

sprite.position设置精灵模型在三维空间中的位置坐标

sprite.position.set(0,50,0);

对比尺寸相同Spirte和矩形平面Mesh

对于网格模型Mesh而言，可以通过几何体geometry和mesh.scale定义尺寸，Spirte没有几何体，需要通过sprite.scale定义矩形精灵的长和宽。

打开案例源码“3.对比相同尺寸Sprite和矩形Mesh”，对比相同尺寸Spirte和矩形平面Mesh渲染效果，进一步掌握Sprite尺寸定义。

// 尺寸相同的Sprite和矩形平面Mesh
const sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(50, 25, 1);
const geometry = new THREE.PlaneGeometry(50, 25);
const mesh = new THREE.Mesh(geometry, material);

SpriteMaterial旋转属性.rotation

精灵材质SpriteMaterial的属性除了和网格材质类似的属性和方法外，还有一些自己独特的方法和属性，比如.rotation旋转精灵模型，更多相关属性和方法可以查看threejs文档关于SpriteMaterial的介绍。

const spriteMaterial = new THREE.SpriteMaterial({
  rotation:Math.PI/4,//旋转精灵对象45度，弧度值
});

上一篇：ThreeJS教程：辅助调节光源阴影 (mvrlink.com)

下一篇：ThreeJS教程：精灵模型标注场景(贴图) (mvrlink.com)