查看内容

大瞳3D引擎入门教程--LionProject

模型与源码下载地址:http://pan.baidu.com/s/1bIIsbW 1.教程描述: 本教程中主要实现的导入场景JSON文件狮子与狮子前方的风扇,通过鼠标移动控制风扇的移动,同时狮子的头会一直注视者风

  • 时间: 2017-08-30 19:39
  • 栏目: 游戏
  • 作者: admin
查看详情
分享:

项目效果链接地址:http://www.tong3d.com/test/LionProject/
模型与源码下载地址:http://pan.baidu.com/s/1pK8Ovv9
项目链接地址:http://www.tong3d.com/test/LionProject/

1.教程描述:

本教程中主要实现的导入场景JSON文件狮子与狮子前方的风扇,通过鼠标移动控制风扇的移动,同时狮子的头会一直注视者风扇,当用户点击风扇时会扇叶会转动,狮子的毛发发生抖动,如下图1-1所示是引擎的运行界面。

                                                                                                ​图1-1 LionPlay

2. 让我们一起来开发吧。

2.1打开任意浏览器,在浏览器地址栏输入tong3d.com即可打开大瞳引擎开发界面如下图2-1所示。

                                                                                              图2-1 LoginMain

2.2 导入事先准备的lion模型的json文件,导入步骤:引擎左上角logo--File--import

                                                                                                   图2-2 ImportLionJSON

2.3 模型导入后即选中lion对象双击选取lion模型,camera自动跟随得到game视图即为摄像机视角

​                                                                                                       图2-3 LionModule

2.4 场景模型介绍

1. 在lion模型中所有的模型均有多边形立体模型组件,大体分为身体body、头像head已经腿共三部分,其中我们主要是针对头的这个部分做交互;

2. 在风扇模型中包含了风扇Fan的4个扇叶与一个扇柄两部分模型,対风扇模型做转动和跟随鼠标的效果。

3. 另外场景中添加了两个光照:方向光DirectionalLight 4、点光源PointLight 7;一个地板floor、一个场景摄像机camera。

​                                                                                               图 2.4 ModuleIntroduce

2.5 脚本创建

1. 在界面ASSET窗口添加Scripts的文件夹:ASSET中的加号

​点击后添加Floder,选中新建文件夹的上一层重命名Floder为Scripts,选中Scripts文件夹点击加号,添加javascripts脚本重命名为Controls,到这里脚本添加步骤就完成了如下图所示。

                                                                                                  图 2-5 AddScriptsFloder

                                                                                                             图2-6 AddScripts

​                                                                                                             图 2-7 Controlsjs

3、脚本编写

简单得来说一共2步:1.打开tong3d.com进入引擎开发页面后添加预先准备的场景json文件;2.添加脚本。模型与脚本就全部准备好了之后,我们来分析如何编写脚本。

3.1 分析实现的功能:首先我们想要狮子与风扇相互看者对方,鼠标控制风扇的移动之后,狮子的头像也会跟着风扇移动;其次当我们点击鼠标的时候风扇会发生转动,狮子的头后面的毛发也会发生抖动。

3.2 分析结果:1.实现狮子与目标物体风扇的对视功能;2.实现鼠标控制目标风扇跟随效果;3.实现鼠标点击之后风扇转动效果;4.实现风扇转动之后狮子模型毛发抖动效果。

至此分析结束我们就可以开始写属于你自己的demo了。

3.3双击ASSETS栏下面的Controls的js文件,打开脚本编辑界面如下图3-1所示。

                                                                                                       图3-1 ScriptsMain

3.4 代码分析与编写

1. 首先我们会在界面中看到一个function update(){}方法,update方法每一帧会执行一次是系统默认的方法。先得到Lion头的对象与风扇的的对象,通过function mousemove(){}方法移动鼠标位置让风扇的对象跟随:

                                                                                                       图 3-2ScriptingScripts

大瞳引擎新增脚本编辑提示,让开发更便捷。

2. 实现风扇跟随鼠标移动效果,代码如下图 3-3所示

​                                                                                                   图 3-3 ScriptingScripts

3. 保存将代码挂载在scene对象上:

脚本挂载在对应对象上面会有括号包含省略号的形式显示在Search上,对象的右侧会有Scripts的脚本挂载提示,点击运行这是我们就能看到风扇随着鼠标运动了如下如所示。

​                                                                                                 图 3-4 TargetFallowMouse01

​                                                                                             图 3-5 TargetFallowMouse02

这时我们就能很好地实现对象的跟随了,是不是很方便呢?那么接下来我们处理剩下的功能吧。

4. 完成相互对视的功能,首先我们已经获取到了两个对象(风扇对象和lion头的对象),我们利用大瞳引擎的API就可以 很方便 地完成这个功能。双击打开Controls脚本进行编辑,代码截图如下图3-6所示。

​                                                                                          图 3-6 TargetFallowMouseDemo

只需要一条代码,利用大瞳引擎内部API调用LookAt()方法即可完成我们之前的对视功能了,是不是很方便效果截图如下图3-7所示。

​                                                                                         图 3-7 TargetFallowMouseDemo

5. 那接下来我们就加快步伐,完成接下来的功能吧。

首先让风扇随着鼠标的点击可以自动转起来,狮子的毛发也在发生抖动,通过内置API获取鼠标的点击事件,切换风扇是否转动,如下如3-8所示

​                                                                                              图 3-7 isFanRotationScripts

接下来我们处理毛发抖动如下图 3-8所示

​                                                                                           图 3-8 LionHairShakingScripts

到了这里要进行到收尾工作了,在鼠标抬起动作中添加将毛发回复初始位置的方法,很简单

 

 
移除
点击此处添加图片说明文字

 

 

 
移除
点击此处添加图片说明文字

上面有两个方法,一个是判断是否来回与震动,增加了LerpVector(a,b,c)算法用于执行来回震动,让我们来一起看看效果图吧。

                                                                                                     图 3-9  GameView01

​                                                                                                      图 3-10  GameView02

到这里整个项目的全部功能就都实现了,内容比较长但是浅显易懂,相信很适合大家便于対我们的引擎的了解与熟悉,最后附上项目源码以及模型的JSON文件与项目截图,希望大家持续关注大瞳引擎,谢谢。

模型与源码下载地址:http://pan.baidu.com/s/1pK8Ovv9
项目链接地址:http://www.tong3d.com/test/LionProject/