Continue building your first Spatial SDK app

1. If you haven’t already opened the composition in Spatial Editor, complete Open the composition in Spatial Editor.
2. Download this 3D model of a basketball hoop.
   ZIP of basketball hoop 3D model
3. Once the ZIP folder has downloaded, extract it.
4. Open the subfolder basketballHoop. In it, you’ll see the file basketballHoop.glb.
5. In Spatial Editor, click File > Import, then navigate to basketballHoop.glb, and click Open to import the model into your project.
6. If you’re creating a new Spatial SDK app, skip to the next section. If you’re adding Spatial SDK to an existing app, follow the remaining steps to add some additional assets.
7. In the toolbar, click the books icon (the Open Asset Library button).
   The asset library window appears.
8. In the asset library window, double-click the robot and basketBall models to add them to your assets. You’ll use them in the next section.
   Once the models finish downloading, they will appear in the Project Assets panel.
   
   The robot, basketball, and basketball hoop assets in the Assets panel.

1. Drag and drop the robot, basketBall, and basketballHoop models from the Assets panel to the Composition panel.
   The models appear in the viewport at the world origin, which is 0 on the X, Y, and Z axes.
2. In the Composition panel, select basketballHoop.
3. In the basketballHoop properties panel on the right, update the Transformation values to match these.
   • Translation
     • X: -2
     • Y: 0.15
     • Z: 1
   • Rotation
     • Y: 45
   • Scale
     • X: 0.25
     • Y: 0.25
     • Z: 0.25
4. Position the basketball model using the following values.
   • Translation
     • Y: 0.25
     • Z: 0.9
5. Position the robot model using the following values.
   • Translation
     • X: 1
     • Y: 1
     • Z: 0.6

1. In the Composition panel, select basketball.
2. In the Properties panel, add the Grabbable component to the basketball by clicking the + next to Meta Spatial SDK Components, searching for Grabbable, and then clicking the search result.
   Note: If you add custom components to a project, like the LookAt component you create later in this tutorial, they won’t appear in the search results until you click the Reload button in the Meta Spatial SDK Components popup.
3. Save the project by clicking File > Save.

• registerFeatures(): Registers the VR feature with the framework.
• onCreate(): Initializes the activity and sets up the scene.
• onSceneReady(): Prepares the scene for rendering.
• createUI(): Creates the UI panel scene object.
• loadGLXF(): Loads the GLXF file with the robot and ball models. Callback code is called once the scene is ready.

1. Select the contents of app/src/quest/java/com/meta/media/templateLookAtSystem.kt and then uncomment them by clicking Code > Comment with Block Comment in the toolbar.
2. Save the file.

• target: The entity that this entity should look at.
• lookAtHead: A boolean value indicating whether the entity should look at the head of the target entity or its center.
• axis: An enumeration value indicating which axis the entity should look at. It can be set to ALL, Y, or other values.
• speed: A float value indicating how fast the entity should rotate to look at the target.
• offset: A Vector3 value indicating the offset from the target position that the entity should look at.

1. Select the contents of app/src/main/components/LookAt.xml and then uncomment them by clicking Code > Comment with Block Comment in the toolbar.
2. Save the file.

1. Open the main activity file for your app (the file is named either ImmersiveActivity.kt or CustomComponentsStarterActivity.kt).
2. Inside the onCreate function, underneath // TODO: register the LookAt system and component, add the following code to register the LookAt component and the LookAtSystem.

    componentManager.registerComponent<LookAt>(LookAt.Companion)
    systemManager.registerSystem(LookAtSystem())
   
3. If you get an Unresolved reference error, in the imports section at the top of the file, add these two dependencies.

    import com.meta.spatial.samples.customcomponentsstarter.LookAt
    import com.meta.spatial.samples.customcomponentsstarter.LookAtSystem
   

• Add component with Spatial Editor
• Add component programmatically

1. If you haven’t reloaded your project in Spatial Editor since you added the LookAt.xml file, then reload the Meta Spatial SDK Components list.
2. In the Composition panel, select robot.
3. In the robot properties panel on the right, search for LookAt, and then select the LookAt search result from the list. Now the LookAt component is added to the robot.
4. In the LookAt component’s properties, set the target entity to the basketball entity.
5. Change the second field of offset to 180.
   

val robot = composition.getNodeByName("robot").entity
val basketBall = composition.getNodeByName("basketBall").entity
robot.setComponent(LookAt(basketBall, offset = Vector3(x = 0f, y = 180f, z = 0f)))

• Creates variables for the robot and basketball using the getNodeByName function on the composition.
• Uses the setComponent function on the robot entity to add the LookAt component and set the basketball as the target entity.
• Adds an offset to ensure the robot points correctly at the basketball.

1. In Android Studio, click the green Run ‘app’ button.
2. Move the ball by hovering over it with your controller, pressing the trigger, and then moving your hand.
   As you grab and move the ball, the LookAt component rotates the robot to face the ball.

1. Open the app’s Main.metaspatial file in Meta Spatial Editor.
2. In the upper left toolbar next to the cylinder button, click the Add 2D Panel button.
   
   A panel appears at the world origin of the scene.
3. In the Properties panel, set ID to the following:

    @id/ui_example2
   
   The ID should reference an ID resource (R.id.ui_example2) rather than a layout resource, as the layout is specified separately in the registration. The ui_example2 refers to the file ui_example2.xml, which you’ll create in the next section. That file will add content to the panel.
4. Set the panel’s Translation values as follows.
   • X: 2
   • Y: 0.8
   • Z: 1.75
5. In the Composition panel, right-click on Panel1, select Rename..., and enter Panel 2.
6. In the top toolbar, select File > Save.
7. Open Android Studio.
8. In the file directory panel, find the file app/src/main/res/layout/ui_example.xml.
9. Duplicate the ui_example.xml file and name the copy ui_example2.xml.
10. In app/src/main/res/values/ids.xml, inside the <resources> block, add a line for the new panel.

    <item type="id" name="ui_example2" />
    
11. In your main activity file, below the comment TODO: add a second panel in the registerPanels() method, add this code to register your new panel.

    LayoutXMLPanelRegistration(
        registrationId = R.id.ui_example2,
        layoutResourceIdCreator = { R.layout.ui_example2 },
        settingsCreator = {
            UIPanelSettings(
                style = PanelStyleOptions(themeResourceId = R.style.PanelAppThemeTransparent)
            )
        }
    )
    
12. Save the file.
13. Deploy your app to the headset by clicking the Run ‘app’ button in Android Studio.
    The second panel will appear in your scene behind the robot.
    

• Key considerations for 2D UI
• 2D art assets
• Multimodality