All Collections
Use Cases
Educational
Creating an AR Experience using frontline.io Platform
Creating an AR Experience using frontline.io Platform
Updated over a week ago

Welcome to frontline.io! Students, in this dynamic platform, you'll embark on a journey to create interactive and engaging 3D content. Follow this step-by-step guide to walk you through the process of signing up and logging in to our Workspace. Once logged in, you'll have the opportunity to upload your 3D model, creating a Digital Twin, and seamlessly connect animations to an Interactive Flow. Let's get started with your frontline.io account.

Follow these steps to navigate through the process:

  1. Create a new user and log in to your Workspace.

  2. Create your project within the designated workspace.

  3. Upload a model to the project.

  4. Publish the model, turning it into a Digital Twin.

  5. Download the PC App to visualize and interact with the Digital Twin.

  6. Create a new procedure, also known as an Interactive Flow.

  7. Construct the Interactive Flow and connect the Digital Twin.

  8. Build Animations

  9. Link animations to the nodes within the flow.

  10. Publish and Share the Interactive Flow.

  11. Run the 3D content within the application to experience the interactive procedure.

1. Sign up and Log in

  1. Check your email inbox for a message from [email protected].

  2. Click on the "Sign-up" button and proceed with the registration steps by providing your name and selecting a password.

  3. Input the verification code received in your mailbox. Subsequently, you will be prompted to choose a workspace.

  4. Click the "Join" button to access the Workspace environment.

  5. You will be directed to the Login screen.

  6. Sign in using your email address and the password you generated, then click on the Launch button.

2. Create your project within your workspace.

  1. Within your workspace, click the "+" button to generate a new project and provide it with a name. The accompanying screenshot displays an illustrative project.

3. Upload a model to your Project.

  1. Prepare your model in advance by exporting it from a CAD SW in the .step, stp, .fbx or .obj format.

  2. Navigate to your project; there's no need to open a folder within the project. Head to the Knowledge-base tab, click on +CREATE NEW ITEM, and select Digital Twin.

  3. Provide your model with a name and proceed by clicking "next."

  4. Select the 3D CAD file option and click on NEXT.

  5. Choose the file of the pre-prepared model, and click on Submit. You will receive the message "Uploaded successfully."


The system has now optimized your model. Within a few minutes, you should encounter the following screen:


You will also receive an email confirming:

4. Publish the model (Digital Twin)

Publish the model by clicking the Publish button and subsequently selecting PUBLISH and Done in the following screens.

5. Download the App to view the Digital Twin

6. Create a new Interactive Flow (Procedure)

The animation you're about to produce is managed within a step-by-step procedure (Interactive Flow). To initiate this process, you must first create the Interactive Flow workspace, establish steps, link these steps to the model (Digital Twin), and define the animation (interaction).

Navigate to the knowledge base tab, click on +CREATE NEW ITEM, and select Interactive Flow. Provide a name for your Flow and click next.

7. Build the interactive flow and Establish the Connection with the Digital Twin

  1. Click the "Edit flow" button to access the flow builder.

  2. Develop your customized flow.

    In our example, we created the following flow: The sequence involves the gradual movement of three parts away from the model, with each step handling the displacement of one part. Finally, a single step is configured to bring back all three parts simultaneously. To achieve this, we specified three distinct animations, one for each of the three steps, and then combined the same steps in reverse mode during the final step.

  3. To specify the animation, select a step within the flow, and a sidebar will appear on the right side.

  4. Next, click on the "+" button to add interactions.

    Upon selecting to add interactions for the first time, you will receive the message:

  5. Click on OPEN, scroll down to the bottom, choose the name of your 3D model (your Digital Twin), and mark both options. The message "Updated" will briefly appear at the top of the screen.

  6. Now, define the interaction.

  7. Click the "+" button and choose the model's name from the list. The animation Builder will open (pre-requisite: PC App Installed)

  1. Configure the desired view and click on "SET VIEW."

  2. Click on "SELECT PART" to choose the specific parts for animation. You can make your selections from the right-side bar. Afterward, click "Done."

    For a more straightforward approach, you have the option to animate the entire assembly as one. In our case, we chose the upper cover.

    Next, specify the movement.

  3. Click the "+ADD WAYPOINT" button. An (editable) STARTING POINT is automatically created.

  4. Also automatically created is WAYPOINT 1. In WAYPOINT 1 create your animation by moving or rotating the selected part using the Gizmo. Then click "SAVE"

  5. If additional movement for the part is needed, click "ADD WAYPOINT" once more to set the final position. Repeat the process by dragging the part from the axis origin to its desired endpoint, then press "Done."

  6. Assign a name to the interaction.

  7. Choose whether the part should be highlighted or made to disappear at the end of the movement by selecting the appropriate checkboxes.

  8. Preview the animation by clicking the play button at the bottom of the screen.

  9. Once satisfied with the animation, click the "SAVE ANIMATION" button, and then close the Animation Builder.

9. Link the animation to the node within the flow.

Return to the flow builder and verify that you can see the interactions you've created.

  1. Before proceeding, ensure to click the "Refresh Interaction" button. Subsequently, open the folder with the name of your model.

  2. Check the appropriate checkbox corresponding to the animation for the step in the flow.

  3. Scroll down and click on "ADD SELECTED INTERACTION."

    Generate the corresponding animations for each step within the flow.

  4. Choose "REVERSE" below the animation if the animation should play in reverse, or select the "INTERACT" button if the viewer should be able to click on the part to initiate the animation.

Ensure to save the Flow you've created by clicking the Save button at the top left of the screen.

  1. Exit the Interactive Flow builder and publish the flow you created by clicking on the "PUBLISH" button.

  2. Share your Digital Twin or Interactive Flow effortlessly through a deep link, QR code, or directly via the Knowledge Base within the PC App.


โ€‹11. Run the 3D content within the application.

Ensure that you haven't overlooked publishing both your model and your flow!

You have the option to experience the 3D Content in VR by clicking the run button on the top right or in AR by sharing the experience (click the SHARE button and use the link or QR code) and running it from your mobile device. Make sure to install the frontline.io app on your mobile.

To invite other users to view or edit your experience, navigate to the COLLABORATORS tab within the PROJECT in the right menu. Enter the email address of a valid user, using educational institution emails of any students in the course.

Additionally, please invite your assignment facilitator to your project via the collaborators tab, ensuring that facilitators can access your project through the provided email address.

Did this answer your question?