Setting Up the Project

1. Creating the Project:
   • Visit the Zapworks website and create an account.
   • Select the Mattercraft project type, name your project, and choose the Immersal VPS template. 

2. Configuring VPS Settings:
   • Visit the immers developer portal -> click on menu -> account and copy your developer token. Go back inside Mattercraft, select ImmersalAnchorGroup and paste the token in the Developer Token parameter.
   • Once again go back to the developers portal click on menu -> click on maps and copy the ID of the map that you'd like to download.Go back inside mattercraft and paste this inside map ID and click on enter. After a couple of seconds you should be able to see the mesh of your environment

Download the Source Code

To save time, download the base project here, modify it, or use it as a reference. Extract the files, open a new Mattercraft project, and select the unzipped folder to get started.

Designing the AR Experience

Adding Target Locations

• Import 3D models (GLB format) or use primitives like cubes to mark target locations.
• Place and rename these objects appropriately, then hide them by unchecking visibility.

Creating UI Buttons

1. Download a CSS Stylesheet:
   • Import it into your project to simplify UI creation.
     
2. Add HTML Components:

   • Now to create the UI buttons, inside the group, we can create a new HTML component.
     Then select the style CSS file and drag and drop it inside the HTML component.

   • Next, to create a Div component as a child of HTML, click on these three dots, click on new, and select Div. Rename this as footer container. In the node properties, create a class list called footer container (ensure "f" is lowercase to match the stylesheet). From the display dropdown, select Flex. Scroll down and set the width as 100, but not in pixels—instead, select viewport width (VW).

   • For this app, we want to anchor everything at the bottom. Select HTML, scroll down, and set the vertical anchor as bottom. Now we can create UI buttons as a child of the footer container. Create a new div, rename it as location one, set the class list as footer item, set the display to inline block, and set the size to 20 VW.

   • Inside this location, add an image. Add a class list called IMG and leave the rest of the settings as is. Similarly, create a text of type H2, set the class list as text, and write the text for your button. Now, if you click on location one, this whole thing will be your button.

   • Since we have two locations, duplicate this button and rename the second one as location two. The stylesheet will automatically space the buttons equally. If more locations are needed, duplicate further. For now, keep it simple with two locations. To add images, first upload them to your project, then drag and drop them into the source. If unnecessary, delete extra items.

   
   

Implementing the Direction Pointer

• Import a 3D arrow model.
  
• Add a Look At Node component within a Camera Transform.
• Adjust the arrow’s orientation to point toward selected targets.

Configuring Interactions

1. Set Up States:
   • Now all that's left to do is for us to change the target based on the UI button pressed. Here’s how:
     • First, remove the Target and hide the Look At component.
     • Open the animation window and create a new layer. Give your layer a name, and inside the layer, create a new state. Call this state "LookAtLocation1."
     • Select the "LookAtLocation1" state. In the node properties, set a Target and assign it to "Location 1." Also, set the visibility to True.
     • Add another state to this layer and name it "LookAtLocation2." Select this new state, set a Target, and assign it to "Location 2." Make sure to set the visibility to True here as well.
       
2. Button Behaviors:
   • Close the animation window and open the HTML. Select the first UI button ("Location1"), click the plus symbol under Behaviors, and navigate to Animation Action. Select "Activate State."
   • Set the event to "On Click," and the state to activate will be inside the "Switch Location" layer. Select "LookAtLocation1."
   • Similarly, select "location two," click the plus symbol under Behaviors, navigate to Animation Action, and select "Activate State." Set the event to "On Click," and choose "Switch Location > look at location two."

Testing and Publishing

1. Live Preview:
   • Save your changes and scan the QR code to preview on a mobile device.
     
   • Localize your environment and test the experience.
     
     
   
   
2. Publishing:
   • Publish the project to generate a shareable QR code.
   • Users can scan the environment to access the AR experience on both iOS and Android devices.

Conclusion

Creating location-based WebXR experiences has never been easier with tools like Zapworks Mattercraft and Immersal VPS technology.

Experiment with these steps to develop innovative AR applications that can transform navigation, entertainment, and industrial processes.