纳金网

标题: 做自己的一个3D翻书特效 [打印本页]
作者: vzheng    时间: 2013-5-31 15:29
标题: 做自己的一个3D翻书特效
本帖最后由 艾西格亚 于 2013-10-15 07:34 编辑

这次项目里面需要实现一个3D的翻书效果，找资料，找插件：找到了两个比较好的插件，一个是：Mega-Fiers （随后分享）这个插件是用来做Mesh变形的，超级不错的插件。但是没有时间研究，只是拿来用了一个其中的一小部分功能，那就是用Book等几个脚本。另外一个叫 3D Flipping Book  专门做书的特效的。但是看起来比较复杂——用XML加载方式等等。没具体研究，这里就不做过多讨论，应该也挺帅的。

下面我就简单介绍一下 这本书用Mega-Fiers的怎么做的。

具体效果：

1.png

1. 导入插件

基本和其他插件一样，拖拽就可以了。导入后增加了两个地方的菜单栏：

一个是GameObject里面的另一个是组件里面的一些。不过我没有深入研究，暂且用一用Book相关的吧。

2.png    3.png

2. PageMesh

PageMesh是组成书的主要GameObject，我们可以通过创建一个是体会一下： GameObject—>CreateOther—>MegaShape—>ageMesh

我们就创建了一个PageMesh 的GameObject


4.png
我们可以查看一下PageMesh的组件属性：

5.png

主要设置的属性就是书的前页和后页，主要使用材质来控制。 以及 长、宽、高等等 我们这里不做设置。我们随笔给两个材质。

PageMesh是书的主要部件，我们给单个的PageMesh添加组件：

Component—>Modifiers—>Modifier Object 以及 Component—>Modifiers—>age Flip

这两个组件。

然后，在PageFlip 组件里面有一个属性是：Turn 可以调节大小，我们用鼠标调节的时候发现 这一页可以滚动了。这里就是页面翻动效果的实现了。

接下来我们做一本书！哦耶！

0.新建一个Book的GameObject的物体做总的父物体。

1. 创建封皮和尾页。

新建空的GameObject 并命名 FrontPage和BackPage

然后新建两个PageMesh 并稍微调剂一个属性，如图：（前后页一样）


frontPage.png

然后，拖拽到相对应的刚才新建的GameObject。

2.建立三个状态的页面：这三个页面分别用来表示翻过去的页面。正在翻的页面。以及将要翻起来的页面，三个状态。

这三个页面就是我们刚才建立的单个页面一样，并是这三个页面也作为Book的子物体。属性设置成为如图所示： book1.png


这个时候，整本书的样式结构已经出来了：如图所示：
book.png

3.添加Book脚本

选中 Book （父物体） 选择Script—>MegaBook 添加到了Book上面，属性面板如图所示，


shuxing.png

我们所要呈现的东西都在这个里面添加：

前页 后页 Page1 Page2 Page3 以及所有要显示的页面的Picture等等 都要在这个属性面板上设置。我们按着这个设置好。

这时候，我们滚动属性值BookAlpha 发现书可以滚动了！ 有些小毛病可以调节一下其他的值。

4.程序控制：我使用的是用点击控制BookAlpha的方式。

创建两个Colider 放在书的前面


colider.png
在总的父物体上添加脚本
=======桑心，还是没有代码的输入框！！================================
  1. <span style="background-color: white;">using UnityEngine;
  2. using System.Collections;

  4. public class BookManager : MonoBehaviour
  5. {


  8.     public GameObject Book;
  9.     // Use this for initialization
  10.     bool showBook = false;
  11.     int pageCount;
  12.     public static float fadeOfEveryPage;
  13.     void Start()
  14.     {
  15.         pageCount = (Book.GetComponent<MegaBook>().pages.Count) / 2 + 2;
  16.         fadeOfEveryPage = 100.0f / pageCount;
  17.     }
  18.     public static float targetAlpha = 0;
  19.     public static float currenAlpha = 0;
  20.     void Update()
  21.     {
  22.         currenAlpha = iTween.FloatUpdate(currenAlpha, targetAlpha, 3);
  23.         Book.GetComponent<MegaBook>().bookalpha = currenAlpha;
  24.     }
  25. }</span>
复制代码
=========================================================


我们使用了Itween里面的 FloatUpdate 方式，是值的变化 线型插值完成。 时间为3秒在左右的碰撞检测的里面设置=========================================================
  1. <span style="background-color: white;">using UnityEngine;
  2. using System.Collections;

  4. public class RightBookPage : MonoBehaviour
  5. {

  7.     void Update()
  8.     {
  9.         //Debug.Log("curr:" + LeftBookPage.currenAlpha + "aaaa" + "target:" + LeftBookPage.targetAlpha);
  10.         //LeftBookPage.currenAlpha = iTween.FloatUpdate(LeftBookPage.currenAlpha, LeftBookPage.targetAlpha, 3);
  11.         //Book.GetComponent<MegaBook>().bookalpha = LeftBookPage.currenAlpha;
  12.     }

  14.     void OnMouseDown()
  15.     {
  16.         BookManager.targetAlpha -= BookManager.fadeOfEveryPage;
  17.         if (BookManager.targetAlpha < 0)
  18.             BookManager.targetAlpha = 0;
  19.     }
  20. }
  21. </span>
复制代码
=========================================================
itween检测到变化就会自动完成线性插值，并设置BookAlpha 来完成书的翻书效果。好了，就到这里吧。欢迎留言，我会很认真的回复。插件地址：http://pan.baidu.com/share/link?shareid=673083&uk=1761627728

BookContral.zip

1.2 KB, 下载次数: 973

控制翻书脚本
作者: 家居设计    时间: 2013-5-31 15:34
看到看不到效果，谁买你的东西呀？
作者: 瓦西里    时间: 2013-5-31 15:45
支持发帖，感谢分享~
作者: vzheng    时间: 2013-5-31 16:09
家居设计 发表于 2013-5-31 15:34
看到看不到效果，谁买你的东西呀？

必须免费啊！哈哈
作者: 比巴卜    时间: 2013-5-31 16:18
感谢分享~
作者: animan    时间: 2013-5-31 22:36
支持发帖，感谢分享
作者: 烟雨    时间: 2013-5-31 22:42
支持一个，看起来很不错的效果
作者: slcity    时间: 2013-6-1 00:58
好强大。
作者: exe008t    时间: 2013-6-3 14:58
学习~~~~~~~~~
作者: leober    时间: 2013-8-13 14:00
本帖最后由 leober 于 2013-8-13 14:02 编辑

“Shader wants texture coordinates, but the mesh  Instance Instance Instance doesn't have them
UnityEditor.DockArea:OnGUI()”
报了一个错！！！楼主能不能帮我看一下？

QQ图片20130813140050.jpg (44.59 KB, 下载次数: 578)

mesh组件如图所示

mesh组件如图所示

QQ图片20130813140218.jpg (43.47 KB, 下载次数: 559)

如图

如图

作者: liyan59531    时间: 2013-10-15 00:00
看看效果了~~~~~~
作者: liyan59531    时间: 2013-10-20 22:21
不知道效果怎么样
作者: liyan59531    时间: 2013-10-25 07:22
谢谢分享~~~~~~
作者: liyan59531    时间: 2013-10-25 07:22
下来看看~~~~~~
作者: 王者再临    时间: 2013-10-25 09:45
不错的分享，谢谢了
作者: 静待晴天    时间: 2013-12-24 19:56
看看什么样的
作者: huhumark    时间: 2013-12-24 20:41
电子书效果还是flash作的最快最好
作者: huhumark    时间: 2013-12-24 20:44
3D Flipping Book 最新版本，只要掉进图片就能实现了，很方便
作者: vrman1    时间: 2014-2-17 15:17
做不的不错
作者: beshuo521    时间: 2014-2-19 02:52
好，支持，感谢分享啊。
作者: qihaidongqhd    时间: 2014-2-28 13:28
感谢分享
作者: xueshong    时间: 2014-4-2 17:07
确实！看不到效果 不好下手 尤其钱钱不够
作者: run0006    时间: 2014-4-28 17:34
感謝分享!
作者: run0006    时间: 2014-5-6 08:07
感謝分享!
作者: 吉an茶白    时间: 2014-7-2 16:32
新建的两个Collider是什么类型的？
作者: jt2286    时间: 2014-7-11 10:28
很不错的分享，要是有教程就更好了
作者: 天蝎    时间: 2014-7-11 10:31
支持一个，看起来很不错的效果
作者: jfansok    时间: 2014-8-21 14:58
没钱啊。怎么下啊。我想用按钮控制翻页要怎么做啊
作者: jfansok    时间: 2014-8-25 17:06
你这个附件里面是什么脚本啊？
作者: xizhenlong    时间: 2015-1-21 16:37
不得不说这个很好              
作者: hisamekenji    时间: 2015-1-21 20:52
感谢分享~~~~~~~~
作者: tianhett    时间: 2015-1-21 22:28
碉堡了。。。。。。。。值得研究。。。。。。
作者: QYL123    时间: 2015-7-5 15:05
问一下，我是新手，从第四步我就不知道该怎么做了。colidre怎么创建的，还有后面的itween怎么实现的,麻烦帮忙回复一下，教教我，，谢谢啦。。。
作者: Symae    时间: 2015-12-9 18:01
楼主你好，你的BookContral这个脚本不能下载了，您现在还有么，烦请您发我一个，急求
作者: jkl787429257    时间: 2017-7-21 10:05
xxxxx谢谢大神
作者: smz2287711279    时间: 2017-11-9 12:01
Itween在哪 是需要导入itween的插件还是怎么弄？这边代码报错说上下文不存在Itween



欢迎光临 纳金网 (http://go.narkii.com/club/) Powered by Discuz! X2.5