基于Vue的three.js添加sprite方法需求

基于vue中three.js的sprite精灵模型对象使得对象跟随模型的变化而变化的需求

首先先展示下自己的需求：

下面是gif展示：

这个是采用sprite精灵的方法导入图片实现。

1.使用sprite精灵翻的方法引入图片的话,UI给你一个完整的图，只需加载展示的话
基于vue我在实现是有个坑，就是图片引入没有效果，没有成功。

这个是官方文献中的添加方法：（大部分是可以使用）

var texture = new THREE.TextureLoader().load("sprite.png");
// 创建精灵材质对象SpriteMaterial
var spriteMaterial = new THREE.SpriteMaterial({
   
  color:0xff00ff,//设置精灵矩形区域颜色
  rotation:Math.PI/4,//旋转精灵对象45度，弧度值
  map: texture,//设置精灵纹理贴图
});
// 创建精灵模型对象，不需要几何体geometry参数
var sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);

修改后是 将load方法中的引入图片添加一个***require()***的方法，使得变成

var texture = new THREE.TextureLoader().