文章目录

10、精灵模型和粒子系统
- 10.1 精灵模型Sprite
- - Sprite和SpriteMaterial
  - .scale 和 .position
  - Sprite用途
- 10.2 中国城市PM2.5可视化案例
- - 精灵模型Sprite实现
- 10.3 树林效果
- - 精灵源码
- 10.4 下雨场景效果模拟
- - 在空间中随机生成静态分布的雨滴
  - 雨滴动态运动

10、精灵模型和粒子系统

10.1 精灵模型Sprite

Three.js的精灵模型对象Sprite和Threejs的网格模型Mesh一样都是模型对象，基类都是Object3D,关于精灵模型对象Sprite的方法和属性除了可以查看文档Sprite，也可以查看基类Object3D。

创建精灵模型对象Sprite和创建网格模型对象一样需要创建一个材质对象，不同的地方在于创建精灵模型对象不需要创建几何体对象Geometry，精灵模型对象本质上你可以理解为已经内部封装了一个平面矩形几何体PlaneGeometry，矩形精灵模型与矩形网格模型的区别在于精灵模型的矩形平面会始终平行于Canvas画布。

Sprite和SpriteMaterial

通过Sprite创建精灵模型不需要几何体，只需要给构造函数Sprite的参数设置为一个精灵材质SpriteMaterial即可。

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);
// 控制精灵大小，比如可视化中精灵大小表征数据大小
sprite.scale.set(10, 10, 1);  只需要设置x、y两个分量就可以

.scale 和 .position

精灵模型对象和网格模型Mesh对一样基类都是Object3D，自然精灵模型也有缩放属性.scale和位置属性.position，一般设置精灵模型的大小是通过.scale属性实现，而精灵模型的位置通过属性.position实现，精灵模型和普通模型一样，可以改变它在三维场景中的位置，区别在于精灵模型的正面一直平行于canvas画布。

在使用透视投影相机对象的时候，精灵模型对象显示的大小和网格模型一样受距离相机的距离影响，也就是距离越远，显示效果越小。

Sprite用途

说到精灵模型对象，这种情况下你肯定关心它的用途，关于用途，你可以在三维场景中把精灵模型作为一个模型的标签，标签上可以显示一个写模型的信息，你可以通过足够多的精灵模型对象，构建一个粒子系统，来模拟一个下雨、森林、或下雪的场景效果。

10.2 中国城市PM2.5可视化案例

[{"name": "海门","value": 9,"coordinate": [121.15, 31.89]
},
...
...
...
{"name": "青岛","value": 18,"coordinate": [120.33, 36.07]
},{"name": "武汉","value": 273,"coordinate": [114.31, 30.52]
}]

精灵模型Sprite实现

/*** 一个精灵模型对象表示一个城市的位置和数据*/
// 加载一个背景透明的圆形贴图，矩形精灵显示为圆形效果
var texture = new THREE.TextureLoader().load("sprite.png");
// 创建组对象，包含所有精灵对象
let group = new THREE.Group();
// 文件加载对象
var loader = new THREE.FileLoader().setResponseType('json');
// 加载PM2.5数据
loader.load('数据.json', function(data) {//遍历数据data.forEach(elem => {// 精灵材质var spriteMaterial = new THREE.SpriteMaterial({map: texture, //设置精灵纹理贴图transparent: true,opacity: 0.5,});// 创建精灵模型对象var sprite = new THREE.Sprite(spriteMaterial);group.add(sprite);// 控制精灵大小   使用PM2.5大小设置精灵模型的大小// 注意适当缩放pm2.5大小,以便得到更好的显示效果var k = elem.value / 200sprite.scale.set(k, k, 1);//获得城市坐标设置精灵模型对象的位置sprite.position.set(elem.coordinate[0], elem.coordinate[1], 0)});// 中国城市坐标整体的几何中心不在坐标原点，需要适当的平移group.position.set(-110, -30, 0);scene.add(group);//把精灵群组插入场景中
})

10.3 树林效果

下面通过通过一张背景透明的树纹理贴图tree.png作为精灵模型的纹理贴图.map模拟一个树林效果。

精灵源码

通过循环程序创建足够多的精灵模型，然后通过javascript随机函数Math.random()使精灵模型的位置随机分布。

如果你想实现更好的树林效果，也可以使用矩形网格模型Mesh代替精灵模型，主要是场景旋转的时候，树的精灵模型平面总是平行于canvas画布。

/*** 精灵创建树林效果*/
// 加载树纹理贴图
var textureTree = new THREE.TextureLoader().load("tree.png");
// 批量创建表示一个树的精灵模型
for (let i = 0; i < 100; i++) {var spriteMaterial = new THREE.SpriteMaterial({map:textureTree,//设置精灵纹理贴图});// 创建精灵模型对象var sprite = new THREE.Sprite(spriteMaterial);scene.add(sprite);// 控制精灵大小,sprite.scale.set(100, 100, 1);  只需要设置x、y两个分量就可以var k1 = Math.random() - 0.5;var k2 = Math.random() - 0.5;// 设置精灵模型位置，在xoz平面上随机分布sprite.position.set(1000 * k1, 50, 1000 * k2)
}

把一张草地贴图作为一个矩形网格模型的纹理贴图模拟树林一片草地的效果，注意对纹理进行阵列，草地贴图像素宽高较小，矩形平面网格模型区域较大。

/*** 创建一个草地地面*/
var geometry = new THREE.PlaneGeometry(1000, 1000); //矩形平面
// 加载草地纹理贴图
var texture = new THREE.TextureLoader().load("grass.jpg");
// 设置纹理的重复模式
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.set(10, 10);
var material = new THREE.MeshLambertMaterial({color: 0x777700,// map:texture,
});
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
mesh.rotateX(-Math.PI/2);

10.4 下雨场景效果模拟

基本思路就是通过足够多的精灵模型构成一个粒子系统，然后每一个雨滴按照在一定空间内随机分布，每个精灵模型都使用一个背景透明的雨滴rain.png作为纹理贴图。

在空间中随机生成静态分布的雨滴

/*** 精灵创建下雨效果*/
// 加载雨滴理贴图
var textureTree = new THREE.TextureLoader().load("rain.png");
// 批量创建表示雨滴的精灵模型
for (let i = 0; i < 400; i++) {var spriteMaterial = new THREE.SpriteMaterial({map:textureTree,//设置精灵纹理贴图});// 创建精灵模型对象var sprite = new THREE.Sprite(spriteMaterial);scene.add(sprite);// 控制精灵大小,sprite.scale.set(8, 10, 1);  只需要设置x、y两个分量就可以var k1 = Math.random() - 0.5;var k2 = Math.random() - 0.5;var k3 = Math.random() - 0.5;// 设置精灵模型位置，在整个空间上上随机分布sprite.position.set(200 * k1, 200*k3, 200 * k2)
}

雨滴动态运动

把所有创建的精灵模型插入到一个组对象Group中，然后在渲染函数render()中周期性改变每个表示雨滴精灵模型的y坐标，从上到下移动。

// 创建一个组表示所有的雨滴
var group = new THREE.Group();
// 批量创建雨滴精灵模型
for (let i = 0; i < 400; i++) {...group.add(sprite);
}
scene.add(group);//雨滴群组插入场景中

// 渲染函数
function render() {// 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms// 每次渲染都会更新雨滴的位置，进而产生动画效果group.children.forEach(sprite => {// 雨滴的y坐标每次减1sprite.position.y -= 1;if (sprite.position.y < 0) {// 如果雨滴落到地面，重置y，从新下落sprite.position.y = 200;}});renderer.render(scene, camera); //执行渲染操作requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}

为了更好观察下雨的效果，就像人站在实际的雨中一样，需要使用透视投影相机PerspectiveCamera，同时把透视投影相机对象的位置设置在雨粒子系统里面而不是雨粒子系统的外面。

把透视投影相机对象放在雨粒子系统中，可以通过放大雨精灵分布的空间范围，也可以直接调整透视投影相机的位置。

你可以看到下面代码精灵模型的分布空间范围是(0,-150,-500)到(1000,150,500)对角线构成的长方体空间中,相机的位置是(292, 109, 268)。

var k1 = Math.random() - 0.5;
var k2 = Math.random() - 0.5;
// 设置精灵模型位置，在空间中随机分布
sprite.position.set(1000 * k1, 300 * Math.random(), 1000 * k2)

/**透视投影相机对象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(292, 109, 268);//设置相机位置

Three.js（十）—— 精灵模型和粒子系统相关推荐

Three.js精灵模型Sprite
Three.js精灵模型Sprite 本文是Three.js电子书的10.1节 Three.js的精灵模型对象Sprite和Threejs的网格模型Mesh一样都是模型对象,基类都是Object3D, ...
WebGL/ThreeJS如何在场景中创建立体文字TextGeometry，认识精灵模型
1.通过TextTrue创建 THREE.jS封装了TextGeometry类可以很容易地生成E维文字 TextGeometry(text : String, parameters : object ...
three.js精灵模型-下雨场景效果模拟
详情进入:Three.js零基础入门教程(郭隆邦) 通过足够多的精灵模型构成一个粒子系统,然后每一个雨滴按照在一定空间内随机分布,每个精灵模型都使用一个背景透明的雨滴rain.png作为纹理贴图. 效 ...
three.js 精灵模型-树林效果
详情进入:Three.js零基础入门教程(郭隆邦) 通过一张背景透明的树纹理贴图tree.png作为精灵模型的纹理贴图.map模拟一个树林效果. 效果: 代码: <!DOCTYPE html&g ...
在浏览器中进行深度学习：TensorFlow.js (十二）异常检测算法
2019独角兽企业重金招聘Python工程师标准>>> 异常检测是机器学习领域常见的应用场景,例如金融领域里的信用卡欺诈,企业安全领域里的非法入侵,IT运维里预测设备的维护时间点等. ...
NeHe OpenGL第十九课：粒子系统
NeHe OpenGL第十九课:粒子系统粒子系统: 你是否希望创建爆炸,喷泉,流星之类的效果.这一课将告诉你如何创建一个简单的例子系统,并用它来创建一种喷射的效果. 欢迎来到第十九课.你已经学习了很 ...
vue用Three.js点精灵绘制森林
我们在vue项目中,如果要对模型进行描绘,或者想做一个3d的网页游戏,首先需要一个场景,怎么安装Three.js这里就不教了,我们直接从代码上手. 首先需要一个页面: <template> ...
用D3.js 十分钟实现字符跳动效果
用D3.js 十分钟实现字符跳动效果注本文基于 D3.js 作者 Mike Bostock 的例子原文分为三部分, 在这里笔者将其整合为了一篇方便阅读. 该效果基于 D3.js, 主要使用到了 ...
PyTorch框架学习十九——模型加载与保存
PyTorch框架学习十九--模型加载与保存一.序列化与反序列化二.PyTorch中的序列化与反序列化 1.torch.save 2.torch.load 三.模型的保存 1.方法一:保存整个Mo ...

Three.js（十）—— 精灵模型和粒子系统