图形化开发（五）051-Three.js之Points 粒子——Sprite 精灵-一直正对着相机的特性

图形化开发（五）051-Three.js之Points 粒子——Sprite 精灵-一直正对着相机的特性

Points 粒子

这一节，我们将学习到Sprite精灵和Points粒子两项东西，这两种对象共同点就是我们通过相机查看它们时，始终看到的是它们的正面，它们总朝向相机。通过它们的这种特性，我们可以实现广告牌的效果，或实现更多的比如雨雪、烟雾等更加绚丽的特效。

Sprite 精灵

精灵由于一直正对着相机的特性，一般使用在模型的提示信息当中。通过THREE.Sprite创建生成，由于THREE.Sprite和THREE.Mesh都属于THREE.Object3D的子类，所以，我们操作模型网格的相关属性和方法大部分对于精灵都适用。和精灵一起使用的还有一个THREE.SpriteMaterial对象，它是专门配合精灵的材质。注意：精灵没有阴影效果。

1. 普通精灵

var spriteMaterialNormal = new THREE.SpriteMaterial({color: 0x00ffff});
var spriteNormal = new THREE.Sprite(spriteMaterialNormal);
spriteNormal.position.set(-30, 10, 0); //设置位置
spriteNormal.scale.set(5, 5, 1); //设置scale进行大小设置
scene.add(spriteNormal);

2. 图片导入的方式

var spriteMap = new THREE.TextureLoader().load(drawCanvas({text: "球", width: 64, height: 64}).toDataURL());  // 转为base64
var spriteMaterial = new THREE.SpriteMaterial({map: spriteMap, color: 0xffffff});
var sprite = new THREE.Sprite(spriteMaterial);
sprite.position.set(0, 10, 0); //设置位置
sprite.scale.set(5, 5, 1); //设置scale进行大小设置
scene.add(sprite);

3. canvas导入的方式

var canvas = drawCanvas({text: "立方体", width: 256, height: 64});
var spriteMapCube = new THREE.Texture(canvas);
spriteMapCube.wrapS = THREE.RepeatWrapping;
spriteMapCube.wrapT = THREE.RepeatWrapping;
spriteMapCube.needsUpdate = true;

var spriteCube = new THREE.Sprite(new THREE.SpriteMaterial({map: spriteMapCube, color: 0xffffff}));
spriteCube.position.set(30, 10, -5); //设置位置
spriteCube.scale.set(20, 5, 1); //设置scale进行大小设置
spriteCube.center.set(0.5, 0); //设置位置点处于精灵的最下方中间位置
scene.add(spriteCube);