查看内容

大瞳3D引擎从开发到发布

基于浏览器的3D开发引擎大瞳引擎7/12已经正式上线让我们对其一探究竟 ​​​1.开发快捷 ​ 从打开引擎到着手开发只需要一个链接,打开链接即可进行3D游戏或VR的开发,免去安装升

  • 时间: 2017-07-19 13:39
  • 栏目: VR
  • 作者: admin
查看详情
分享:
基于浏览器的3D开发引擎大瞳引擎7/12已经正式上线,让我们对其一探究竟

​​​1.开发快捷

​        从打开引擎,到着手开发只需要一个链接,打开链接即可进行3D游戏或VR的开发,免去安装升级的过程(只要有浏览器即可进行开发,真正实现跨平台开发,跨平台发布):

(1).引擎的链接地址为:www.tong3d.com,打开该链接即可看到大瞳引擎的界面,如图:

 

大瞳引擎开发界面大瞳引擎开发界面

 

​界面分为:工具菜单栏,游戏对象层级管理器,资源管理器,3D视图管理器和对象属性管理器等。

(2).这里并不介绍各工具面板的用法,入门教程将会在官网教程页为大家详细介绍。为了让大家对大瞳引擎有更深入的了解,我们简单做一个小实例:

  • 这里简单准备了一个戴着面具的Obj人物头部模型,其中的ao指的是AO贴图,normal指的是法线贴图,如图所示:

 

 

人物头部模型及贴图人物头部模型及贴图

 

  • 点击左上角的大瞳世界logo,导入人物模型至大瞳引擎中,界面如图所示:

 

模型导入按钮模型导入按钮

 

  • 导入后的模型如界面所示:

 

导入模型后的界面导入模型后的界面

 

​此时在界面当中并没有看到任何的画面(一片漆黑),这是因为我们没有在界面当中添加光照,这里增加一束平行光(类似现实世界的太阳)。

  • 添加光照后的效果如图所示:

 

模型添加平行光照后的效果图模型添加平行光照后的效果图

 

​此时我们的模型在场景中的名称是默认的名称,名称过长且没有意义,我们给模型重新命名为Mask。

  • 命名后的界面效果图:

 

给模型重新命名给模型重新命名

 

​这时候的模型还没有贴图,那么此时就需要给模型增加贴图,点击Inspector面板中的Model,编辑材质

  • 点击Model面板编辑材质:

 

点击编辑材质按钮点击编辑材质按钮

 

  • ​出现材质编辑界面并导入对应位置的贴图(法线贴图能把模型的凹凸质感进行表现):

 

导入对应位置贴图导入对应位置贴图

 

 

  • ​贴图导入后,此时面具的最终形态如图所示:

 

模型的最终形态模型的最终形态

 

​此时对3D场景的亮度不是很满意,为了美化整体效果,准备添加一束半球光照

  • 添加半球光照后的效果如图所示:

 

添加半球光照后的效果1添加半球光照后的效果1

 

 

添加半球光照后的效果2添加半球光照后的效果2

 

(3).有人会问能否自定义着色器去表现面具的效果?答案是肯定的,针对自定义效果,我们准备了MeshShaderMaterial,该材质着色器能够使用Glsl进行着色效果编写,这会在官网教程中陆续为大家呈现。

场景效果已经编辑完毕,但是整个场景是静态的,如果用户想各个角度去看面具模型的效果应该如何做?

2.开发高效

如何各个角度查看面具模型,使场景不再是静态?通过代码实现对应功能。

(1).场景新建一个Group组对象和一个Camera摄像机对象,并把Camera对象作为Group组对象的子层级,并分别命名Group为GroupCamera,CameraDynamic:

 

新建对象并命名新建对象并命名

 

 

(2).在Assets资源面板中新建两个脚本,脚本分别命名为CameraSet.js,OrbitTarget.js,如图所示:

 

新建两个脚本文件新建两个脚本文件

 

​(3).拖动CameraSet.js代码文件至CameraDynamic对象上,拖动OrbitTarget.js文件至GroupCamera对象上:

 

拖动脚本文件至相应对象上拖动脚本文件至相应对象上

 

​(4).双击分别编辑CameraSet.js与OrbitTarget.js:

 

CameraSet.js代码编辑CameraSet.js代码编辑

 

 

OrbitTarget.js代码编辑OrbitTarget.js代码编辑

 

​(5)点击运行按钮进行测试:

 

点击测试按钮点击测试按钮

 

​此时就已经完成了 GroupCamera绕着物体进行旋转的简单功能。

3.易分享:

所有的场景与代码的编辑都已经完成,此时就需要进行发布。

(1).点击菜单栏的Build Project按钮进行发布:

 

BuildProjectBuildProject

 

​(2).此时弹出保存界面,并出现以TongEngine.zip为默认名称的压缩包:

 

出现默认的压缩包出现默认的压缩包

 

​(3).解压该压缩包可以看到里面包含的文件:

 

包含的文件包含的文件

 

(4).可以把该压缩包上传至自己的服务器或大瞳引擎的服务器,该示例的服务器地址是www.tong3d.com/mask,因为模型图片偏大,加载需要时长,请等待:

 

上传至服务器后在客户端的效果上传至服务器后在客户端的效果