[Paid]The most powerful 3D engine in history (Scene3D) was born on AppInventor&Thunkable

First download the Scene3D trial version aix main package, about 700k, as shown:

Scene3D_Demo.aia (680.2 KB)

Then import and drag out the main program of Scene3D and all its related components

Drag a horizontal layout as shown in the figure, set its width and height to the width and height of the 3D display area.

Bind this horizontal layout by setting the HorizontalArrangement property of Scene3D

Now you can go to the logical view to write Blocky.

Here to introduce a few core code blocks in the Scene3D component.


  • OnSurfaceCreated:This event is fired when the scene is initialized

  • OnSurfaceChanged:This event is fired when the window size changes (such as screen rotation, changing the size of the layout)

  • OnDrawFrame:Animated rendering events, ideally triggering 60 events per second

  • OnFPSChanged:This event is triggered once every second and returns the frame rate (fps) of the current scene, which is actually the number of executions of OnDrawFrame per second.

  • OnPictureSaved:This is the image that is returned when the screenshot is successful (maybe some problems)


  • InitPlugin:Plugin for loading Scene3D

  • UseWireFrame:Enable wireframe mode for rendering (if pointMode is true, render in point cloud, otherwise render in wireframe mode)

  • CloseWireFrame:Turn off wireframe mode

The main function is probably so much, the next step should be to load the plugin, as shown in the figure

Of course, such code seems to be uncomfortable, not very elegant? So we better write this way

Now that all the plugins have been initialized, the Scene3D stage has been set up, but we will find nothing on the screen. This is because we have not added any 3D objects in this scene. Next we will add a cube to us. Above the Scene3D scene.

As shown, the BasicGeometry plugin provides a block of code that creates a series of 3D geometry objects. We drag a CreateCube_0 to create a 111 cube.

Now let’s connect with the ai companion to test it.

The results are as follows:

We can see a sexy one. . . . . Ok. . . . White screen.

Don’t worry, now we just created a cube. If we can see it, we need to add it to the virtual world on the screen.

As shown in the figure, call the WorldHandler AddObject3D method to add our 3D objects to the world.

You might say, but there is no use of eggs, or nothing on the white screen, here I need to ask you a few questions.

  • Did you specify a location when you created the cube?
  • Do you know where the camera (the person in the first person view) is located?
  • Do you know your current line of sight?

First of all,

The first problem is that the cube defaults to the coordinates (0,0,0) when it is created.

The second problem is that the camera position is also at the (0,0,0) position.

The third question, the line of sight is right in front.

Knowing the above three answers, it is not difficult to explain, because the cube and the camera are coincident, so you are black under the lamp, nothing can be seen.

To see the object, we need to do a panning operation.

As shown in the figure, in order to operate a 3D object, we need to use the 3D object manipulator (Object3DHandler), and then specify which object you want to operate, that is, set the Object3D property to the geometry you want to manipulate. To pan the object, you need to call Translate_1 ( 0,0,3) method, where the (x, y, z) parameter refers to translation along the vector (0, 0, 3).

Now, if nothing unexpected, you should be able to see a dark square.

It seems that there is no 3D feeling. It is because you have not added light yet. Now start creating a light source, as shown in the figure:

Once the light is created, it is automatically added to the world (0,0,0). The default is the point source.

Now, let’s see if our cube still looks like a flat square, but it’s much better after adding the lighting effect.

In order to make the 3D sense more realistic, we need to observe the objects from different angles. We have learned in junior high school physics. The movement is relative. If you want relative movement, either I am still moving, or you are still moving. If you want to exercise yourself, it is a more complicated camera movement. Later, let’s talk about it. Today we only let the objects move.

As shown,

Now we use the animation rendering event. At this time, we manipulate the object Cube to rotate each frame about 0.01 radians around its own Y axis. Now the cube is turning, it looks so sexy! ! !

Now we change the color of the cube

The color of the object belongs to the texture, so we need to create the material first.


A red material is created as shown in the code block, and the material size is set to default (16px).

TextureManager is a material manager that sets a name for each material, which is convenient for a variety of 3D objects to share a material. Add the material just created and name it by AddTexture_1

In order to prevent the existing material in the material library from being overwritten, you need to add a judgment. If the red material in the material manager is false, create a red material, otherwise do nothing.

As shown in the figure, we put all the contents of the initialization material into a process, load it at initialization time, and set the material to the Cube.
The effect is as follows:

Similarly, we can also select an image as the material.

This is the texture image:

The blocks is as follows:

The effect is as follows:

The first picture above is the material I created with the default pixel 16px*16px. I can see that the picture is very faint, so we can change the size of the material appropriately. For example, the second picture is 64px wide and 64px high. It should be noted that the material size must be an integer power of two.

Well, the introductory tutorial has been introduced.

In addition to the main program and extension program included in the aix extension component provided in this tutorial, the following figure shows other advanced components.

through shaders

Of course, the above plug-ins are not provided free of charge, they are all provided for a fee. The above-mentioned components are not included in the price of the plug-ins that are still being tested.

If you have any questions to ask, and you use QQ, welcome to join this group.

Click the link to join the group chat【Appinventor拓展aix交流】:https://jq.qq.com/?_wv=1027&k=54GOUFQ

Or contact me

  • QQ:2428698039
  • E-mail:2428698039@qq.com
  • WeChat:zhangzqs


Welcome everyone to visit

You can contact me and pay me through PayPal, I will provide you with the full version of the component.

If you are in China, you can also use WeChat payment or Alipay payment.

  • My Alipy:

  • My WeChat payment

Update on 2018.7.15 :

  • Fixed an issue where the program crashed when it entered the background and then returned.
  • Optimized the entire Scene3D framework.