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.
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.
- GLSLShader：Provides related functions for shader shaders.
- GLSLShadow：Shadows are provided through shaders
- (5$)Interactor：This should be the most frequently used component, providing interactive functionality for various users and 3D objects.
- (5$)Loader：This is also one of the most frequent components, it supports the loading of external 3DS, OBJ, ASC and other 3D models and MD2 frame animation support
- (1$)Logger:Output debug log
- (5$)Camera:Not in the picture, but there is this component for making FPS games, or for AR scenes (if you want to use AR, I will post another tutorial to explain a simple AR scenario)
- (3$)Matrix：Matrix component to support all matrix operations in the engine (note that if you purchase a camera component, it is best to purchase this component as many operations in the camera require matrix operations)
- Overlay：An image sprite similar to the canvas, with a picture on the screen
- Physics：Provides a powerful physics engine support (collision detection, particle system, etc., the module is not completed)
- Polyline：Polyline tool
- SkyBox：Conveniently create a standard skybox
- And so on…
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
Welcome everyone to visit
PS：If you are interested in obtaining the full version of Scene3D aix, please contact me at a price of 15$ .And I give you permanent update support.
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.
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.