1. 精灵模型

Three.js的精灵模型对象Sprite和Threejs的网格模型Mesh一样都是模型对象,基类都是Object3D
创建精灵模型对象Sprite和创建网格模型对象一样需要创建一个材质对象,不同的地方在于创建精灵模型对象不需要创建几何体对象Geometry,精灵模型对象本质上你可以理解为已经内部封装了一个平面矩形几何体PlaneGeometry,矩形精灵模型与矩形网格模型的区别在于精灵模型的矩形平面会始终平行于Canvas画布

2. 代码

const texture = new THREE.TextureLoader().load('images/光柱.jpg');

const SpriteMaterial = new THREE.SpriteMaterial({
  // color: 0xff00ff, //设置精灵矩形区域颜色
  rotation: Math.PI / 4, //旋转精灵对象45度,弧度值
  map: texture, //设置精灵纹理贴图
});
var sprite = new THREE.Sprite(SpriteMaterial);
scene.add(sprite);
sprite.scale.set(10, 10, 10);

3. 注意

精灵模型对象和网格模型Mesh对一样基类都是Object3D,自然精灵模型也有缩放属性.scale和位置属性.position,一般设置精灵模型的大小是通过.scale属性实现,而精灵模型的位置通过属性.position实现,精灵模型和普通模型一样,可以改变它在三维场景中的位置,区别在于精灵模型的正面一直平行于canvas画布,也就是说是始终面向相机