3D语音天气球(源码分享)——创建可旋转的3D球

开篇废话:

在9月份时参加了一个网站的比赛,比赛的题目是需要使用第三方平台提供的服务做出创意的作品。

于是我选择使用语音服务,天气服务,Unity3D,Android来制作一个3D语音天气预报,我给它起名叫做3D语音天气球(好土。。。)

虽然没获奖但我觉得这个项目中还是有些东西比较有创意的,所以打算分享出来,或许有人会用到。

下面简单看下效果图:

左边是Unity做出后在电脑上运行效果图

右边是Unity结合Android和语音控制之后在手机运行的效果图(手机不会做GIF):

    

瞅着还不错吧。。。

项目简介:

项目结构:

首先这个项目的开发分为Android端和Unity3D端:

Android端:

Android端主要负责的是语音控制模块和4个按钮,并将语音处理后的结果传递到Unity端中做处理

Unity3D端:

Unity端负责接收Android端语音处理后传递过来的信息,和4个按键的反馈。

并根据不同的省市情况实时的从网上获取天气信息,解析后显示在我们制作的3D球上。

Build:

最后将Android端的代码以插件的形式放入Unity端中,然后在Unity端Build成apk文件在手机中运行。

业务简介:

初始界面:

在初始界面最上方有个简易的动态栏可以显示一些提示信息。

动态栏之下是一个省市的名称标题和平均气温。

最中间的“动态球”显示全国各省份的分布。并且会根据该省市的平均气温设置不同的颜色来大体反映出全国天气情况(越红表示温度越高,越蓝表示越低)。

详细页面:

在选中一个省后(可以鼠标或手势选中,如果在手机上可以语音选中),点击详细可以进入到详细页面。

在详细页面中显示当前省内所有城市的天气信息,并且“动态球”上会显示出天气趋势的小图片。

如果选中某个城市后再次点击详细则会在屏幕中上方显示该城市的详细天气信息,包括风速紫外线等等信息。

功能划分:

这个项目虽然功能比较简单,但是代码也写了不少,关键好多地方都是为了快速完成功能,也并没有考虑一些框架和结构,因此逻辑看起来特别乱。

为了思路清晰,我准备分几篇文章把这个项目详细介绍一下。因为我觉得这样分块进行不仅思路清晰,还可以按需求观看,而且也避免都写在一篇文章中导致又臭又长逻辑混乱。

我准备分四篇文章来介绍这个项目:

一:创建可旋转的“3D球”

二:通过天气服务,从网络获取时实天气信息并动态生成“3D球”

三:Android语音服务和Unity的消息传递

四:Unity3D端和Android端的结合

今天就先来介绍一下如何创建这个可旋转的“3D球”:

3D球的创建

下面是我将其他所有模块的代码都去掉后,一个纯净版的效果图,而今天的任务就是完成它:

如图可示,

在这个“3D”球中平均分布这很多“小块”。

本例中每一块显示的是一个标题和一行详细信息。

当然也可以在每块中显示图片,显示3D模型。而且还可以有更多创意,比如3D球中的每个小块又是一个3D球,如此递归循环下去这样是不是就是我们的宇宙了(想多了,赶紧跑回来。。。)

原理构成:

先来看下面3个图示:

    

相信通过上面的图示,大家就应该差不多知道这个3D球和球面上的"小块"是如何构成的了。

没错,这个3D球是由一个大球和若干个小球组成的,小球附着在大球上,大球负责控制转动,小球也就相应的转动了。

再稍微详细些:

大球是一个“透明/隐形”的一个物体,他有物理碰撞器属性,所以可以转动。

所有的小球均匀分布在大球之上,小球同样是“透明/隐形”,但小球上会附着文字和图片等,小球永远随着大球转动且文字方向永远面向摄像机。

把上面这些弄明白之后配合Unity最简单的几个基础语法和知识点就可以完成这个可动态旋转的3D球了!

代码详解:

下面的内容解需要一定Unity基础,Unity入门很容易。我的习惯是先看最基本的视频教程(一定要国人出的,一定要简单无脑),之后看书看官网文档,再去搜几个大神的blog看看。

这里强烈推荐两个大神的Blog:雨松MOMO研究院墨半成霜的博客

1.创建大球

首先需要建立大球

通过:菜单-GameObject-create other-sphere来创建一个球体(sphere)

调整大球的大小,位置。点掉他的Mash Renderer,这样大球就“隐身”了。

3. 创建小球预设

小球是由代码动态生成的,但是我们需要先做一个小球的预设。

方法和制作大球相同,不过需要给小球增加一个Text Mesh来显示文字,如果除了显示文字还需要在小球身上显示一些其他东西,可以建一个空的GameObject添加相应的组件,然后将这个GameObject加入到小球组成一个整体(prefab预设)。

这个例子中是显示城市名和简单的天气信息,城市名直接加在小球上,简单的天气信息放在另一个GameObject上,调整大小后放入小球中组成一个整体。

4.动态生成小球

这个我认为是这个步骤是整个项目里最难的地方,他的难度在于要根据小球数量计算出分布在大球身上的坐标。

简单来说就是在球体表面平均分割点,并求出每个点的三维坐标。

如果我能算出来就是大神了。。。还好有Google,我在Google中搜到了一个算法如下:

				float inc = Mathf.PI * (3 - Mathf.Sqrt (5));
				float off = 2 / N;
				for (int k = 0; k < (N); k++) {
						float y = k * off - 1 + (off / 2);
						float r = Mathf.Sqrt (1 - y * y);
						float phi = k * inc;
						Vector3 pos = new Vector3 ((Mathf.Cos (phi) * r * size), y * size, Mathf.Sin (phi) * r * size);
				}

N为需要平均分为多少份。size为分割小球的大小,r为大球半径。

for循环中的Vector3类型的pos就是计算所得的三维坐标。我也不知道这个算法是什么原理,数学好的希望给讲解一下。

更多的在球体上分割点的算法可以在Google上试着搜下关键词:distributed points on sphere

通过算法求出每个点的坐标后,通过下面代码就可以创建出小球:

GameObject text = (GameObject)Instantiate (textObject, pos, Quaternion.identity);

textObject是我们之前做的小球预设, pos是刚刚求出的小球坐标。最后循环创建所有小球的效果如下:

5. 设置小球文字和颜色

上面创建好名为text的GameObject对象就是我们的小球。下面就要为每个小球设置父亲,颜色,大小,中心文字,详细信息。

						// 将大球设置为小球的父亲(将小球放在大球身上)
						text.transform.parent = gameObject.transform;
						// 获取小球的TextMesh组件
						TextMesh tm = (TextMesh)text.GetComponent<TextMesh> ();
						// 设置文字
						tm.text = city.getName ();
						// 设置颜色
						tm.color = city.getWeatherColor ();
						// 设置大小
						text.transform.localScale = city.getSize ();
						// 循环获取小球的孩子(也就是小球里面添加的GameObject,这里只有一个显示详细信息)
						foreach (Transform child in text.transform) {
								TextMesh tm2 = (TextMesh)child.GetComponent<TextMesh> ();
								tm2.text = city.getTempture ();
								tm2.color = city.getWeatherColor ();
						}

6. 设置小球朝向,透明度,颜色

因为整个大球是不停在旋转,所以大球上的小球们的朝向,透明度,和颜色都会不停的变化。所以需要实时的调整小球的各种属性。

在update()函数中:

				// 遍历大球中的小球,设置小球的朝向,透明度,颜色
				foreach (Transform child in gameObject.transform) {
						// 小球永远朝向摄像机
						child.LookAt (new Vector3 (cameraTarget.position.x, cameraTarget.position.y, -cameraTarget.position.z));
						// 通过距离设置小球的透明度,产生越远越透明的效果
						float dis = Vector3.Distance (child.position, cameraTarget.transform.position);
						Color c = child.renderer.material.color;
						float alpha = Mathf.Abs (dis - r) / 5f + 0.1f;

						// 设置小球和它子gameobject的颜色
						child.renderer.material.color = new Color (c.r, c.g, c.b, alpha);
						foreach (Transform cc in child.transform) {
								cc.renderer.material.color = new Color (c.r, c.g, c.b, alpha);
						}
				}

3D球的旋转:

上面我们已经基本设置后大球和其身上的小球们(现在他们是一个整体)。

下面我们就需要让他们旋转起来,这时我们需要为大球添加碰撞器,这样我们才能点击它并旋转它。

Component-Physics-Sphere Collider

通过下面代码可以进行手势/鼠标旋转(如果快速转动会有一个逐渐变慢到最终停止的效果)

初始化:

		//是否被拖拽//
		private bool onDrag = false;
		//旋转速度//
		private float speed = 3f;
		//阻尼速度//
		private float tempSpeed;
		//鼠标沿水平方向移动的增量//
		private float axisX;
		//鼠标沿竖直方向移动的增量//
		private float axisY;
		//滑动距离(鼠标)
		private float cXY;

重写鼠标按下和拖拽函数:

		//鼠标移动的距离
		void OnMouseDown ()
		{
				//接受鼠标按下的事件//
				axisX = 0f;
				axisY = 0f;
		}

		//鼠标拖拽时的操作
		void OnMouseDrag ()
		{
				onDrag = true;
				axisX = -Input.GetAxis ("Mouse X");
				axisY = Input.GetAxis ("Mouse Y");

				cXY = Mathf.Sqrt (axisX * axisX + axisY * axisY);
				//计算鼠标移动的长度//
				if (cXY == 0f) {
						cXY = 1f;
				}
		}

计算阻尼(为了实现上面提到的越转越慢效果)

		//计算阻尼速度
		float Rigid ()
		{
				if (onDrag) {
						tempSpeed = speed;
				} else {
						if (tempSpeed > 0) {
								//通过除以鼠标移动长度实现拖拽越长速度减缓越慢
								if (cXY != 0) {
										tempSpeed -= speed * 2 * Time.deltaTime / cXY;
								}
						} else {
								tempSpeed = 0;
						}
				}
				return tempSpeed;
		}

最后在Update函数中判断:

				// 根据计算出的阻尼和X,Y轴的偏移来旋转大球
				gameObject.transform.Rotate (new Vector3 (axisY, axisX, 0) * Rigid (), Space.World); 

				// 如果鼠标离开屏幕则标记为已经不再拖拽
				if (!Input.GetMouseButton (0)) {
						onDrag = false;
				}   

写在最后:

上面所有的代码都只是一个思路和一些必要的步骤。如果大家有兴趣,可以下载它的源码来看看。

GitHub地址:https://github.com/a396901990/3D_Sphere

我准备分四篇文章来介绍这个项目:

一:创建可旋转的“3D球”

二:通过天气服务,从网络获取时实天气信息并动态生成“3D球”

三:Android语音服务和Unity的消息传递

四:Unity3D端和Android端的结合

今天是第一篇,剩余的我会尽快更新,敬请期待。。。

PS:Unity3D我只会一些刚入门很初级的东西,可能有很多不对的地方,希望大家多多指正。

时间: 2024-10-08 20:57:50

3D语音天气球(源码分享)——创建可旋转的3D球的相关文章

3D语音天气球(源码分享)——通过天气服务动态创建3D球

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3D语音天气球(源码分享)--创建可旋转的3D球 二:通过天气服务,从网络获取时实天气信息并动态生成"3D球" 三:Android语音服务和Unity的消息传递 四:Unity3D端和Android端的结合 关于项目的详细介绍和3D球的创建请看上面第一篇文章(重要) 今天主要讲解如何通过获取

3D语音天气球(源码分享)——完结篇

开篇废话: 由于这篇文章是本系列最后一篇,有必要进行简单的回顾和思路整理. 这个程序是由两部分组成,Android端和Unity端: 1.Unity端负责3D球的创建,显示和旋转:3D语音天气球(源码分享)--创建可旋转的3D球 2.通过天气服务动态创建3D球:3D语音天气球(源码分享)--通过天气服务动态创建3D球 3.Android端使用第三方的语音服务来进行语音识别:3D语音天气球(源码分享)--在Unity中使用Android语音服务 4.Unity中加入Android项目:Unity中

Android源码:3D语音天气球

3D语音天气球                                                                                                 支持平台:Android    运行环境:Android    开发语言:Java                                                                                                        

3D语音天气球_Android源码

3D语音天气球 通过Android和Unity的结合,以3D滚动球的形式展示全国所有省市天气情况,支持手势和语音两种操作模式. 下载地址:http://www.devstore.cn/code/info/204.html 运行截图:     版权声明:本文为博主原创文章,未经博主允许不得转载.

3D语音天气球——在Unity中使用Android语音服务

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3D语音天气球(源码分享)--创建可旋转的3D球 二:通过天气服务,从网络获取时实天气信息并动态生成"3D球":3D语音天气球(源码分享)--通过天气服务动态创建3D球 三:Android语音服务和Unity的消息传递 四:Unity3D端和Android端的结合 前两篇文章已经介绍了如何创

3D地图导航应用源码

该源码是一个3D地图导航应用源码,本项目使用了高德地图导航.科大讯飞语音.ShareSDK分享. 可以在地图上选择起点.途经点.终点,然后根据路径规划策略进行路径规划.然后进行地图语音视图导航,并且可以使用ShareSDk分享本地的位置信息. <ignore_js_op> 运行截图 <ignore_js_op> 运行截图 <ignore_js_op> 运行截图 详细说明:http://ios.662p.com/thread-2163-1-1.html

推荐!Html5精品效果源码分享

一直在看别人的汇总,看到了一些不错的关于 HTML5内容的源码,我也汇总下分享出来,好东西需要共享!希望可以帮到需要的朋友. 1.劲爆分享:HTML5动感的火焰燃烧动画特效 这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果.这款HTML5动画火焰燃烧非常逼真,之前我们也分享过一些其他的HTML5火焰燃烧动画,比如:HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画.一般像这样的HTML5动画都是基于Canvas的,今天的这款也不例外.源码下载地址:劲爆分享:H

【迪士尼彩乐园】全套源码分享下载带三个急速,后台带AB盘完美无错

[迪士尼彩乐园]全套源码分享下载带三个急速,后台带AB盘完美无错联系Q:2947702644 源码类别:时时系统/两面盘界面语言:简体中文源码授权:无加密文件及认证授权,永久性可直接使用.版本支持:PC/WAP网页版编程语言:PHP ThinkPHP是一个快速.简单的基于MVC和面向对象的轻量级PHP开发框架,遵循Apache2开源协议发布,从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,尤其注重开发体验和易用性,并且拥有众多的原创功能和特性,为WEB应用开发提供了强有

语音直播系统源码开发的多种场景模式解决方案

语音聊天基本是社交软件必备的功能,语音相比文字图片更丰富,比视频又更简便,是天然的社交工具.除了单纯的1对1语音或视频,在实时音视频技术支持下,很多 APP 已经延伸出非常多的玩法.目前比较火的语音直播系统源码又分为语音电台.语音游戏.私人聊天.多人聊天.KTV 聊天等细分的场景,延伸出去还有更多的形态.一.语音电台模式语音电台是目前很多社交APP的玩法.主播可以在直播间中给听众讲故事.脱口秀.唱歌,内容形式不胜枚举,观众也可以申请上麦与主播聊天互动(一般需要打赏或者付费后).主要实现的功能就是