threejs使用Sprite精灵图实现精灵图脉冲(放大缩小)效果

页面元素

<div ref="container" style="width: 100%;height: 100%;overflow: hidden;"></div>

添加精灵图

let spriteScaleUp = true//精灵图动画执行放大还是缩小
// 创建纹理加载器
let sprite = new THREE.Sprite(new THREE.SpriteMaterial({
	map: new THREE.TextureLoader().load("图片路径"),
	sizeAttenuation:false // false的话 不随着相机拉远而变小
}))
sprite.position.set(1,1,1)//精灵图添加的位置
sprite.scale.set(0.12, 0.12, 1)//精灵图大小
sprite.name = ”jinglingtu“//精灵图名称
// 将精灵添加到场景中
scene.add(sprite)
//给精灵图添加脉冲效果
spriteAnimateFn(sprite);

实现脉冲效果

//精灵图动画
spriteAnimateFn (sprite) {
	// 更新精灵图的缩放
	if (spriteScaleUp) {
		sprite.scale.x += 0.003;
		sprite.scale.y += 0.003;
	} else {
		sprite.scale.x -= 0.003;
		sprite.scale.y -= 0.003;
	}
	// 调整缩放方向
	if (sprite.scale.x >= 0.14) {
		spriteScaleUp = false
	} else if (sprite.scale.x <= 0.12) {
		spriteScaleUp = true
	}
	// 更新精灵图
	sprite.updateMatrix()
	// 循环调用 animate 函数
	setTimeout(() => {
		spriteAnimateFn(sprite);
	}, 100);
},