AppInventor 3D引擎Scene3D最详细入门教程(1)

PS:作者的3D设计大师基于Scene3D开发,经决定免费开放其aia,欢迎大家下载研究。

首先下载Scene3D完整版包含各种常用插件的zip压缩包,大约800多k

然后导入并且拖出Scene3D的主程序及其所有相关组件

如图拖出一个水平布局,设置其宽高为3D显示区域的宽高

通过设置Scene3D的HorizontalArrangement属性来绑定一个水平布局

现在可以去逻辑视图去编写代码了。

这里先来介绍一下Scene3D组件中几个核心的代码块。


事件块

  • OnSurfaceCreated:场景初始化时触发该事件

  • OnSurfaceChanged:当窗口大小改变时触发该事件(如屏幕旋转,改变布局的大小)

  • OnDrawFrame:动画渲染事件,理想情况下每秒触发60次本事件

  • OnFPSChanged:每秒钟触发一次本事件,并返回当前场景的帧率(fps),实际上就是每秒钟OnDrawFrame的执行次数

  • OnPictureSaved:这是当截图成功时返回的图片

函数块:

  • InitPlugin:用于加载Scene3D的插件

  • UseWireFrame:启用线框模式进行渲染(如果设pointMode为真,则以点云方式渲染,否则以线框模式渲染)

  • CloseWireFrame:关闭线框模式

主要功能大概就这么多,接下来应该是去加载插件,如图

当然,这样的代码看起来是不是很难受,不是很优雅?所以我们最好这样写

现在所有的插件都已经初始化完毕,Scene3D的舞台已经搭建完毕,但是我们会发现屏幕上什么也没有,这是因为我们还没有在这个场景里添加任何3D物体,下一步我们将添加一个立方体到我们的Scene3D场景之上。

如图,BasicGeometry插件(现改名为ExtendPrimitive)提供了创建一系列3D几何体对象的代码块,我们拖出一个CreateCube_0来创建一个111的立方体。

现在,让我们连接ai伴侣测试一下。

结果如图:

我们可以看到一个性感的。。。。。嗯。。。。白屏。

别急,现在我们只是创建好了一个立方体,要想我们能看见,我们还需要把它添加到屏幕中的那个虚拟世界中去。

如图,调用世界操纵器(WorldHandler)的AddObject3D方法来添加我们的3D对象到世界中去。

你可能会说,然而并没有什么卵用,还是白屏什么都没有,这里我需要问你几个问题。

  • 你创建立方体时指定位置了吗?
  • 你知道摄像机(第一人称视角的人物)的位置在哪?
  • 你知道你现在的视线方位?

首先,

第一个问题,立方体在被创建时默认在坐标(0,0,0)位置。

第二个问题,摄像机位置也在(0,0,0)位置。

第三个问题,视线方位就是正前方

知道上面三个答案,就不难解释了,因为立方体和摄像机都重合了,所以你就是灯下黑,什么都看不到。

要想看到物体,我们需要做平移操作。

如图,要想操作3D物体,我们需要借助3D对象操纵器(Object3DHandler),然后指明你想要操作哪个物体,即设置Object3D属性为你想操作的几何体,要想平移物体,你需要调用Translate_1(0,0,3)方法,这里(x,y,z)参数指的是沿着向量(0,0,3)进行平移。

现在,要是不出意外,你应该能看见一个黑乎乎的方块了。

看起来怎么一点3D感都没有,那是因为你还没有添加光线,现在开始创建一个光源,如图:

灯光一旦被创建完成本身就自动被添加到了世界的(0,0,0)上了,默认为点光源

现在,再看看我们的立方体虽然看起来还是一个平面的方块,但是加上光照效果后好得多了有没有。

为了使3D感更加真实,我们需要从不同的角度观察物体,初中物理我们学过,运动是相对的,要想发生相对运动,要么我静止你动,要么你静止我动。要想自己运动,就是比较复杂的相机运动了,这个后面再讲,今天我们只让物体动起来。
如图,

现在用到动画渲染事件了,这时我们操纵物体Cube每一帧绕其自身的Y轴旋转0.01弧度,现在立方体转动起来了,看起来是如此性感有木有!!!

现在我们给立方体换个颜色

物体的颜色属于材质(texture),所以我们第一步需要先创建材质
如图:

如图代码块创建了一个红色的材质,材质大小设为默认(16px)

TextureManager是一个材质管理器,它给每个材质都设置了一个名字,方便多种3D物体共用一种材质,通过AddTexture_1添加刚才创建的材质并且命名

为了防止材质库中已有的材质被覆盖,需要加个判断,如果说材质管理器中已有red材质为假,则创建一个red材质,否则什么都不做

如图,我们把初始化材质的所有内容放到一个过程里,在初始化时加载它,并且给Cube设置该材质。
效果如图:

同理,我们还可以选取一张图片作为材质。

这是材质图片:

代码如图:

效果如图:

上图第一张是我用默认像素 16px*16px 创建的材质,可以看到图片严重变糊了,所以我们可以适当的改变材质的大小,比如第二张图片为 宽64px,高64px。要注意的是材质大小一定要是2的整数次方。
好了入门教程已介绍完毕。
除本教程提供的aix拓展组件所包含的主程序及拓展程序外,如下图为更高级的其他拓展组件

  • GLSLShader:提供了shader着色器的相关功能。(未测试)
  • GLSLShadow:通过着色器提供了阴影功能(未测试)
  • Interactor:这个应该是使用最多频率最多的组件了,它提供了各种用户与3D对象的交互功能。
  • Loader:这个也是一个最频繁的组件,它支持加载外部的3DS,OBJ,ASC等3D模型以及MD2帧动画支持
  • Logger:输出调试日志
  • Camera:图中没有,但是有这个组件,用于制作FPS游戏,或AR场景时使用(如您想用于制作AR,到时候我将发布另一篇教程讲解简单的AR场景)
  • Matrix:矩阵组件,用于支持引擎中的所有矩阵运算(注意如你购买了相机组件,最好也购买本组件,因为相机中的很多操作都是需要借助矩阵运算完成的)
  • Mesh:网格(未测试)
  • Overlay:类似于画布的图像精灵,在屏幕上贴一张图片(已测试,不太好用,高考后我将结合Appinventor的Canvas代替本组件)
  • Physics:提供一个强大的物理引擎支持(碰撞检测,粒子系统等,该模块未完成)
  • Polyline:折线工具
  • SkyBox:可方便地创建一个标准的天空盒(未测试)
  • 还有很多,等等

好了,今天的教程完全写完了。数了下居然码了3300多个字了,大家晚安。

如果你有什么问题要问,欢迎加入本群

点击链接加入群聊【Appinventor拓展aix交流】:https://jq.qq.com/?_wv=1027&k=54GOUFQ

或者联系我

欢迎各位访问

最新消息:

  • 2018.12.22
    好消息!经过作者决定,免费发放各种完整版插件,
    基于Scene3D开发的应用程序3D设计大师,在Google全国中小学生计算思维挑战赛中荣获三等奖一枚,相关aia已发布在wxbit展厅上,有兴趣的同学可以拿来研究学习使用。3D设计大师,其中包含Scene3D完整的各种插件,充分发挥出Scene3D拓展的各项功能,包含了最重要的OBJ,3DS,MD2,ASC外部3D模型加载器。由于原程序在广服上开发而成,在本平台上可能会出现不可预期的BUG。另外,由于一些时间问题,也许一些功能仍有许多bug。

  • 2018.7.15

相关AIA已发布到wxbit平台上,大家开启展厅即可搜索到

2018.7.15 更新:

  • 修复了程序进入后台再返回时崩溃的问题。
  • 优化了整个Scene3D引擎的框架结构。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341

推荐阅读更多精彩内容