欢迎来到【畅哥聊技术】前端图形学相关技术文章,更多精彩内容持续更新中,敬请关注。
![f11c31718ecb6a83d09f3be491f0bcfc.png](https://i-blog.csdnimg.cn/blog_migrate/c044b884ddbce050aa37379ee77a33ab.jpeg)
上章节回顾
- Geometry类的基本使用方法。
- Vector3类的源源码分析。
- face3类的源码分析。
我们基本上了解了各个类的基本工作原理,对threejs认识更加深刻。
本章目标
- 精灵类Sprite的源码分析
- SpriteMaterial的源码分析
- 基于threejs精灵的扩展示例
sprite类的基本用法
官网给出的示例:
![ecd6f5152f8805d1f33c4e1e31da8830.png](https://i-blog.csdnimg.cn/blog_migrate/6893352d8e0e0d45308989612980329f.jpeg)
我们用SpriteMaterial来创建了一个精灵材质,并使用了一张纹理贴图,接着又实例化了一个精灵类,最后添加到场景中去了。
关于threejs中网格模型和对应的材质的总结:
1、点模型对应点材质
2、线模型对应线材质
3、精灵模型对应精灵材质
。。。
这些在threejs中都是有迹可寻的。不要用混了哦~~
细心的童鞋可以发现了,我们之前在创建网格模型的时候,一般都是需要两个参数,一是几何图形,二是对应的材质对象。
回过头来再看我们今天的精灵模型,实例化的时候只传了一个材质对象,那几何图形呢?跑哪去了,带着这个问题,我们去查一下精灵类的源码。
![5254c0b8b7adcd52fbb239025242c067.png](https://i-blog.csdnimg.cn/blog_migrate/c6c541275e04d282a0150bfb24622cde.jpeg)
sprite类的源码
从源码可以看出来,精灵类和其它网格模型一样继承自Object3D类。因此它也具有旋转平衡绽放的属性。
上面说到,精灵类在实例化的时候,只传入一个参数,从源码也不难看出,它手动给我们创建了一个BufferGeometry的实例,并给赋值了默认的参数。
所以实例化一个精灵对象默认应该是一个正方形。如果我们加上贴图,就会形成其它的样式的粒子
精灵类的特点:
其角度不会随着相机位置的变化而变化。
精灵类和粒子特效
我们一次性创建500个精灵对象,结合前面的运动学知识(不知道的可以翻阅我前面的文章前端图形学(二十)——退后!!我要开始进入3D世界了)然后让它们在三维空间中做自由下落运动。
先来看效果
![ca8b22043a8f4c651c31a86e403cccfc.gif](https://i-blog.csdnimg.cn/blog_migrate/0153d945d2b260444296a41d7b06a6e1.gif)
3D弹跳的小球^_^,需要源码请私信我
核心技术分析:
1、创建一个组(Group),用来装载后面要生成的500个精灵对象,组的概念前面没有说到,阅读过其源码就知道,它也是继承自Object3D,我们可以把它当作是一个容器。
var group = new THREE.Group();
2、从gif图中可以看出来,这里面的精灵是我通过材质贴图生成的。怎么加载材质贴图这里就不再多说了,也比较简单,简单明了。
var map = new THREE.TextureLoader().load('../img/ball.png');
3、循环创建500个精灵对象,并将创建好的材质贴图图作用在每个精灵对象的材质上。根据实际情况去设置精灵的大小和位置。
每个精灵需要运动,那么我们把对应的速度和重力都挂载到了精灵类的实例上了。最后把每个精灵对象添加到组中去。
for(var i = 0 ; i < 500 ;i++){var m = new THREE.SpriteMaterial({ map });var sprite = new THREE.Sprite(m);sprite.scale.set(.2, .2, .2); sprite.position.x = 0;sprite.position.y = 3;sprite.position.z = range(-15,15);sprite.vx = range(-.1,.1);sprite.vy = range(.1,.2);sprite.g = -.007;group.add(sprite);}
4、创建地平面。移动到粒子最低位置-3,旋转到垂直于Z轴
var plane = new THREE.PlaneGeometry(100,300,10);var mPlane = new THREE.MeshBasicMaterial({color:"#555