模型标签——精灵模型对象Sprite

郭隆邦老师threejs教程学习笔记

mesh网格模型表示一个红豆的存储仓库，然后通过Sprite创建一个矩形网格模型，把一张红豆图片作为精灵模型对象Sprite的颜色贴图.map。

const textureLoader = new THREE.TextureLoader();
const spriteMaterial = new THREE.SpriteMaterial({
  // color:0xff00ff,//设置精灵矩形区域颜色
  map: textureLoader.load('./标签图片/红豆.png'),//设置精灵纹理贴图
});
// 创建精灵模型对象
const sprite = new THREE.Sprite(spriteMaterial);
// 控制精灵大小
sprite.scale.set(40, 40, 1);  只需要设置x、y两个分量就可以
sprite.position.copy(mesh.position)
sprite.position.y += 80
scene.add(sprite)

动态更新模型标签

比如存储红豆的仓库存储了绿豆，这时候需要把精灵模型Sprite的红豆贴图更换为绿豆贴图。

// 动态更新精灵模型`Sprite`颜色贴图
spriteMaterial.map = textureLoader.load('./标签图片/绿豆.png')

位置

精灵模型和矩形平面网格模型一样可以通过位置属性.position设置模型标签的位置。

姿态(精灵与平面网格模型对比)

精灵模型的平移和缩放与网格模型是一样的，区别在于：精灵模型的平面渲染效果一直平行于屏幕或者说canvas画布，对于平面网格模型而言，旋转场景或相机的时候平面网格模型平面渲染效果不一定平行于canvas画布。