提示：本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。

文章目录

前言
一、精灵模型Sprite
- 1.设置纹理贴图
- 2.精灵材质对象SpriteMaterial
- 3.创建精灵模型对象
- 4.scale.set() 方法设置精灵大小
二、精灵模型模拟森林场景
- 1.创建草坪
- 2.利用for循环设置一定数量的雨滴精灵模型
三、精灵模型模拟下雨场景
- 1.创建草坪
- 2.创建group群组里放入一定数量的雨滴
- 3.利用函数让渲染器渲染遍历雨滴群组，控制刷新频率产生动画效果，然后执行渲染操作。

前言

本篇主要介绍精灵模型Sprite，模拟了森林和下雨场景。

一、精灵模型Sprite

精灵模型Sprite的基类是Object3D，Object3D类里可以使用的属性方法精灵模型都可以使用。以雨滴为例。
效果如下：

1.设置纹理贴图

给精灵模型Sprite加载纹理贴图的图片（以雨滴为例）。

var texture = new THREE.TextureLoader().load("rain.png");

2.精灵材质对象SpriteMaterial

精灵材质对象 SpriteMaterial 的基类是材质Material，Material 里的属性方法 SpriteMaterial 里都可以使用。SpriteMaterial 不需要创建几何体，直接使用就行。

// 创建精灵材质对象SpriteMaterialvar spriteMaterial = new THREE.SpriteMaterial({color:0xffffff,//设置精灵矩形区域颜色rotation:Math.PI/4,//旋转精灵对象45度，弧度值map: texture,//设置精灵纹理贴图});

3.创建精灵模型对象

创建精灵模型对象加入到场景中，和以前的几何体一样。

// 创建精灵模型对象，不需要几何体geometry参数var sprite = new THREE.Sprite(spriteMaterial);scene.add(sprite);

4.scale.set() 方法设置精灵大小

使用精灵模型对象名.scale.set() 方法设置精灵大小。

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

二、精灵模型模拟森林场景

效果如下：

1.创建草坪

先创建一个草坪地面，在矩形平面上利用阵列将纹理贴图草的图片进行重复。

/*** 创建一个地面*/var geometry = new THREE.PlaneGeometry(300, 300); //矩形平面// 加载树纹理贴图var texture = new THREE.TextureLoader().load("grass.jpg");// 设置阵列texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;/*// 偏移效果texture.offset = new THREE.Vector2(0.5, 0.5)*/// uv两个方向纹理重复数量texture.repeat.set(30, 30);var material = new THREE.MeshLambertMaterial({map: texture,});var mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中mesh.rotateX(-Math.PI / 2);

2.利用for循环设置一定数量的雨滴精灵模型

将纹理贴图利用for循环设置一定数量的雨滴精灵模型，设置大小后利用 random() 函数在xoz平面上随机分布。

/*** 精灵创建树林效果*/// 加载树纹理贴图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(30, 30, 1);  只需要设置x、y两个分量就可以var k1 = Math.random() - 0.5;var k2 = Math.random() - 0.5;// 设置精灵模型位置，在xoz平面上随机分布sprite.position.set(300 * k1, 30, 300 * k2)}

三、精灵模型模拟下雨场景

效果如下：

1.创建草坪

先创建一个草坪地面，在矩形平面上利用阵列将纹理贴图草的图片进行重复。

/*** 创建一个地面*/var geometry = new THREE.PlaneGeometry(300, 300); //矩形平面// 加载树纹理贴图var texture = new THREE.TextureLoader().load("grass.jpg");// 设置阵列texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;/*// 偏移效果texture.offset = new THREE.Vector2(0.5, 0.5)*/// uv两个方向纹理重复数量texture.repeat.set(30, 30);var material = new THREE.MeshLambertMaterial({map: texture,});var mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中mesh.rotateX(-Math.PI / 2);

2.创建group群组里放入一定数量的雨滴

// 创建一个组表示所有的雨滴var group = new THREE.Group();// 加载雨滴理贴图var texture = new THREE.TextureLoader().load("rain2.png");// 创建精灵材质对象SpriteMaterialfor(let i=0;i<3000;i++){var spriteMaterial = new THREE.SpriteMaterial({color:0xffffff,//设置精灵矩形区域颜色/*rotation:Math.PI/4,//旋转精灵对象45度，弧度值*/map: texture,//设置精灵纹理贴图});// 创建精灵模型对象，不需要几何体geometry参数var sprite = new THREE.Sprite(spriteMaterial);scene.add(sprite);group.add(sprite);// 控制精灵大小，比如可视化中精灵大小表征数据大小sprite.scale.set(6, 6, 1);  只需要设置x、y两个分量就可以var k1 = Math.random() - 0.5;var k2 = Math.random() - 0.5;var k3 = Math.random() - 0.5;// 设置精灵模型位置，在整个空间上上随机分布sprite.position.set(300 * k1, 300*k3, 300 * k2);}scene.add(group);

3.利用函数让渲染器渲染遍历雨滴群组，控制刷新频率产生动画效果，然后执行渲染操作。

在设置渲染对象和执行渲染操作间加入函数，每次渲染遍历雨滴群组。

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;}});

Three.js学习07相关推荐

Vue.js学习详细课程系列--共32节（2 / 6）
Vue.js学习课程(2 / 6) 07. 过滤器知识点 filters 08. 计算属性知识点 computed 09. 观察属性知识点 $watch 10. 设定机算属性知识点 sette ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
程序员的高速学习法——以JS学习为例，进行图解
近期一直在忙着学习,感觉做总结的时间太少了,听起来挺好玩儿的,就像<倾城之恋>里面.范柳原说:那时候都忙着谈恋爱了哪里有时间恋爱. 学习和总结也是一样.不能一直忙着学习而导致自己没有时间 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
js 学习笔记（一）
前言网上其实已经有非常多的js学习资料了,但是每个人都有自己的基础,所以往往是有的人讲的深一点,有的人说的浅一点. 就我自身而言,想要匹配自己水平的找些资料,往往是十分的零碎,所以可能今天看到的文章 ...
html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

Three.js学习07

文章目录

前言

一、精灵模型Sprite

1.设置纹理贴图

2.精灵材质对象SpriteMaterial

3.创建精灵模型对象

4.scale.set() 方法设置精灵大小

二、精灵模型模拟森林场景

1.创建草坪

2.利用for循环设置一定数量的雨滴精灵模型

三、精灵模型模拟下雨场景

1.创建草坪

2.创建group群组里放入一定数量的雨滴

3.利用函数让渲染器渲染遍历雨滴群组，控制刷新频率产生动画效果，然后执行渲染操作。

Three.js学习07相关推荐

最新文章

热门文章