Add models to scene

Updated: Oct 2, 2024

In this tutorial, you’ll learn how to import models into your Spatial SDK scene to transform it into a movie theater.

Before you begin

Why isn’t the cube in Spatial Editor?

The cube you created in Add a cube doesn’t appear in Spatial Editor because the cube is added in runtime code. Behind the scenes, your program adds Entities and Components you’ve created in runtime code using Entity.create() to the output of Spatial Editor. Since it’s difficult to adjust 3D scenes using the runtime code, we recommend using Spatial Editor instead.

Step 1: Clean up the scene

Since you’ll add your own 3D models to the scene later in the tutorial, remove the cube you created in the Add a cube tutorial.

In Android Studio, replace onSceneReady() with this code, which removes the code that creates a cube.

   override fun onSceneReady() {
     super.onSceneReady()

     // set the reference space to enable recentering
     scene.setReferenceSpace(ReferenceSpace.LOCAL_FLOOR)

     scene.setLightingEnvironment(
         ambientColor = Vector3(0f),
         sunColor = Vector3(7.0f, 7.0f, 7.0f),
         sunDirection = -Vector3(1.0f, 3.0f, -2.0f),
         environmentIntensity = 0.3f)
     scene.updateIBLEnvironment("environment.env")

     scene.setViewOrigin(0.0f, 0.0f, 2.0f, 180.0f)

     Entity.create(
         listOf(
             Mesh(Uri.parse("mesh://skybox")),
             Material().apply {
               baseTextureAndroidResourceId = R.drawable.skydome
               unlit = true // Prevent scene lighting from affecting the skybox
             },
             Transform(Pose(Vector3(x = 0f, y = 0f, z = 0f)))))
   }

Build and run your app to ensure the cube is gone.

Step 2: Enlarge the 2D panel

To make the 2D panel into a movie screen, it needs to be a bit larger.

In Spatial Editor, select the panel.

On the right-hand side of the editor, set the Size values as follows.

W: 4

H: 2.25

Step 3: Import a 3D model

To decorate the scene so it looks more like a movie theater, you’ll add some 3D models. Spatial SDK and Spatial Editor support the GLTF format (.gltf/.glb), a common 3D model format. Sketchfab⁠ is a great place to look for free 3D models. There’s also a set of 3D models available in Spatial Editor’s Asset Library. You can access the library in the toolbar under View > Show Asset Library.

Add some 3D models to the scene from either your own collection (using File > Import in the toolbar) or the Asset Library.

After adding a few models, the scene starts to resemble a theater.

Screenshot of Spatial Editor showing models added to the scene to make it look like a movie theater.

Step 4: Change your spawn point

At this point, you spawn too close to the big screen. Let’s fix that using the scene.setViewOrigin() API.

In Android Studio, modify your onSceneReady() function so it matches the code sample below, which increases the Z-axis value to spawn you further back in the scene.

   override fun onSceneReady() {
     super.onSceneReady()

 -   scene.setViewOrigin(0.0f, 0.0f, 2.0f, 180.0f)
 +   scene.setViewOrigin(0.0f, 0.0f, 3.0f, 180.0f)

     ...
   }

Build and run your scene to see your changes.