Contents

Model3D

A view that asynchronously loads and displays a 3D model.

Declaration

struct Model3D<Content> where Content : View

Mentioned in

Overview

Use Model3D to embed a 3D model from a USD file or Reality file in your SwiftUI app.

You can use methods on the ResolvedModel3D type as well as standard view modifiers to adjust the size of the model to fit your app’s interface. Here, the resizable(_:) method scales the model to fit the current view. Then, the aspectRatio(_:contentMode:) view modifier adjusts this resizing behavior to maintain the model’s original aspect ratio, rather than scaling the x, y-, and z axes independently to fit the robot to the full frame of the view.

 Model3D(named: "Robot-Drummer") { model in
     model
         .resizable()
         .aspectRatio(contentMode: .fit)
 } placeholder: {
     ProgressView()
 }

If loading from a remote URL, this view uses the shared URLSession instance to load a model from the specified URL, and then display it. For example, you can display a model that’s stored on a server:

 Model3D(url: URL(string: "https://example.com/robot.usdz")!)
     .frame(width: 300, height: 600)

Until the model loads, the view displays a standard placeholder that fills the available space. After the load completes successfully, the view updates to display the model. In the example above, the model is smaller than the frame, and so appears smaller than the placeholder.

You can specify a custom placeholder using init(url:content:placeholder:). With this initializer, you can also use the content parameter to manipulate the loaded model. For example, you can add a modifier to make the loaded image resizable:

 let url = URL(string: "https://example.com/robot.usdz")!
 Model3D(url: url) { model in
     model.resizable()
 } placeholder: {
     ProgressView()
 }
 .frame(width: 50, height: 50)

For this example, Model3D shows a ProgressView first, and then the model scaled to fit in the specified frame:

To gain more control over the loading process, use the init(url:transaction:content:) initializer, which takes a content closure that receives a Model3DPhase to indicate the state of the loading operation. Return a view that’s appropriate for the current phase:

 let url = URL(string: "https://example.com/robot.usdz")!
 Model3D(url: url) { phase in
     if let model = phase.model {
         model // Displays the loaded model.
     } else if phase.error != nil {
         Color.red // Indicates an error.
     } else {
         Color.blue // Acts as a placeholder.
     }
 }

Topics

Creating a Model3D

Accessing content

Initializers

See Also

SwiftUI 3D model presentation