three.js加载3d模型_前端图形学(三十二)——threejs终极篇，错过将再等...-CSDN博客

欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。

上章节回顾

Geometry类的基本使用方法。
Vector3类的源源码分析。
face3类的源码分析。

我们基本上了解了各个类的基本工作原理，对threejs认识更加深刻。

本章目标

精灵类Sprite的源码分析
SpriteMaterial的源码分析
基于threejs精灵的扩展示例

sprite类的基本用法

官网给出的示例：

我们用SpriteMaterial来创建了一个精灵材质，并使用了一张纹理贴图，接着又实例化了一个精灵类，最后添加到场景中去了。

关于threejs中网格模型和对应的材质的总结：

1、点模型对应点材质

2、线模型对应线材质

3、精灵模型对应精灵材质

。。。

这些在threejs中都是有迹可寻的。不要用混了哦~~

细心的童鞋可以发现了，我们之前在创建网格模型的时候，一般都是需要两个参数，一是几何图形，二是对应的材质对象。

回过头来再看我们今天的精灵模型，实例化的时候只传了一个材质对象，那几何图形呢？跑哪去了，带着这个问题，我们去查一下精灵类的源码。

sprite类的源码

从源码可以看出来，精灵类和其它网格模型一样继承自Object3D类。因此它也具有旋转平衡绽放的属性。

上面说到，精灵类在实例化的时候，只传入一个参数，从源码也不难看出，它手动给我们创建了一个BufferGeometry的实例，并给赋值了默认的参数。

所以实例化一个精灵对象默认应该是一个正方形。如果我们加上贴图，就会形成其它的样式的粒子

精灵类的特点：

其角度不会随着相机位置的变化而变化。

精灵类和粒子特效

我们一次性创建500个精灵对象，结合前面的运动学知识(不知道的可以翻阅我前面的文章前端图形学(二十)——退后！！我要开始进入3D世界了)然后让它们在三维空间中做自由下落运动。

先来看效果

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