ARCore Flutter Plugin: add object on the plane

In this second article I will show you how to use ARCore Flutter Plugin, we will add a 3D Earth with moon at 1 meter from the plane.

If you haven’t read the first part (to setup your project with ARCore Flutter Plugin), I suggest you do it, you can find it here.

Import the plugin

First, let’s import the plugin, you need to insert in the file where you want use the plugin, like this:

Add ARCoreView into your widget

In Scaffold’s body we insert the ArCoreView widget, like this:

onArCoreViewCreated: called when the native platform view is created.

enableTapRecognizer: enable the tap listener on AR Scene.

Now, we create _onArCoreViewCreated method like this:

When the native view is created, this method is executed.

Here we set our arCoreController, the onNodeTap and onPlaneTap callback:

onNodeTap: called when we touch a node on the screen, the argument is the name of the node.

onPlaneTap: called when we touch a point on a plane automatically detected, the argument is a list of ArCoreHitTestResult.

ArCoreHitTestResult: is a class that contain some info of native class HitResult (it could change during the development of this plugin)

And, we define the onTapHanlder method:

This method is called every time we touch a node on the screen, and we will show an AlertDialog with the name of the node touched.

Below, the method called when we touch the plane detected on the screen.

In this method, we create 2 node, moon and earth. For every node we define the shape, position e rotation property. For shape object we need to define material property.

ArCoreMaterial

It’s the class to set the parameter of material of the renderable object (shape etc..). Here the example.

• color: defines the color applied at the renderable object
• texture: defines the name of the file used to create a native Texture object (maybe I will change its name in textureFileName). To use a file for texture property, you need to put the file in assets folder in Android project.

assets folder

• metallic: defines whether the surface is a metallic (conductor) or a non-metallic (dielectric) surface.
• roughness: controls the perceived smoothness of the surface, when roughness is set to 0, the surface is perfectly smooth and highly glossy.
• reflectance: can be used to control the specular intensity, only affects non-metallic surfaces.

PS: the texture property has priority to color property

ArCorShape

It’s an abstract class that defines the type of renderable object. For now, you can create a sphere (ArCoreSphere), a cube (ArCoreCube) and a cylinder (ArCoreCylinder). Their properties will be different depending on the type.

See this example.

ArCoreNode

• name: defines the name of the node.
• shape: defines the ArCoreShape object attached to this node.
• position: is a Vector3 object. Vector3 class has x, y, z property respectively for x, y, z axis. It defines the position of the node relatively at the anchor or camera position.
• scale: is a Vector3 object. It defines the scale relative to its parent.
• rotation: is a Vector4 object. Vector4 class has x, y, z, w property. It defines the rotation of the node.It defines the rotation of the node relatively at the anchor or camera position.
• children: defines a list of ArCoreNode.

Back to our project

The moon is attached to earth, so we insert moon node in children property of earth node. The position and rotation of moon is relative to the position of earth node. The position and rotation of earth node is relative to the position of point touched on the plane (the AR scene is the parent of earth node)

You can see that the position of earth node is traslate in vertical of 1 meter (on y axis), this because we sum the position of touch with a vector with 1 meter in y axis.

At the end we call addArCoreNodeWithAnchor(earth), so we attach the earth node on the anchor of the point touched on the plane. Below the result.

Conclusion

This plugin is a developer preview, I will implement other native feature simply usable from Flutter project. You can found the GitHub repository here.

Thank you for reading this article.