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

或者联系我

• QQ：2428698039
• 邮箱：[email protected]

欢迎各位访问

最新消息：

• 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引擎的框架结构。