{"id":3265,"date":"2025-02-25T14:46:46","date_gmt":"2025-02-25T19:46:46","guid":{"rendered":"https:\/\/stepinto.vision\/?p=3265"},"modified":"2025-02-25T14:46:46","modified_gmt":"2025-02-25T19:46:46","slug":"spatial-swiftui-model3d","status":"publish","type":"post","link":"https:\/\/stepinto.vision\/example-code\/spatial-swiftui-model3d\/","title":{"rendered":"Spatial SwiftUI: Model3D"},"content":{"rendered":"\n

Model3D is a simple view that can load a USD or `.reality` file and display it in your SwiftUI view.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Overview<\/h2>\n\n\n\n

Most of the work on this site is done in RealityKit, but there are times when all we need to do is display the contents of a 3D file. In those cases, Model3D may be a good fit.<\/p>\n\n\n\n

We can load a model that has been included in the app bundle. Apple suggests that we place 3D assets inside a .rkassets<\/code> bundle. This bundle can be found in the RealityKitContent bundle if you used a visionOS template project. <\/p>\n\n\n\n

This will load a USDZ from the bundle.<\/p>\n\n\n\n

<\/path><\/path><\/svg><\/span>
Model3D<\/span>(<\/span>named<\/span>: <\/span>"Earth"<\/span>, <\/span>bundle<\/span>: realityKitContentBundle)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
We can unpack the ResolvedModel3D and call SwiftUI modifiers on it. For example, let’s mark the earth model and resizable, then wrap it in a frame. <\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
Model3D<\/span>(<\/span>named<\/span>: <\/span>"Earth"<\/span>, <\/span>bundle<\/span>: realityKitContentBundle)  { model <\/span>in<\/span><\/span>\n    model<\/span><\/span>\n        .<\/span>resizable<\/span>()<\/span><\/span>\n        .<\/span>aspectRatio<\/span>(<\/span>contentMode<\/span>: .<\/span>fit<\/span>)<\/span><\/span>\n} placeholder: {<\/span><\/span>\n    <\/span>ProgressView<\/span>()<\/span><\/span>\n}<\/span><\/span>\n.<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>100<\/span>, <\/span>height<\/span>: <\/span>100<\/span>)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
If we need to load a file from a server, we can use an asynchronous version of Model3D. We can show a placeholder and a view to display on error.<\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
Model3D<\/span>(<\/span>url<\/span>: url)<\/span><\/span>\n{ phase <\/span>in<\/span><\/span>\n    <\/span>if<\/span> <\/span>let<\/span> model = phase.<\/span>model<\/span> {<\/span><\/span>\n        model<\/span><\/span>\n            .<\/span>resizable<\/span>()<\/span><\/span>\n            .<\/span>aspectRatio<\/span>(<\/span>contentMode<\/span>: .<\/span>fit<\/span>)<\/span><\/span>\n    } <\/span>else<\/span> <\/span>if<\/span> phase.<\/span>error<\/span> != <\/span>nil<\/span> {<\/span><\/span>\n        <\/span>Text<\/span>(<\/span>"Could not load model <\/span>\\(<\/span>name<\/span>)<\/span>."<\/span>)<\/span><\/span>\n    } <\/span>else<\/span> {<\/span><\/span>\n        <\/span>ProgressView<\/span>()<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Model3D is just a SwiftUI view, so we can use modifiers on it just like any other view. We can use some of the spatial modifiers from this series<\/a>.<\/p>\n\n\n\n
Example: the moon model with frame, offset, and hover.<\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
ModelView<\/span>(<\/span>name<\/span>: <\/span>"Moon"<\/span>)<\/span><\/span>\n  .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>40<\/span>, <\/span>height<\/span>: <\/span>40<\/span>)<\/span><\/span>\n  .<\/span>offset<\/span>(<\/span>x<\/span>: <\/span>50<\/span>, <\/span>y<\/span>: <\/span>-50<\/span>)<\/span><\/span>\n  .<\/span>offset<\/span>(<\/span>z<\/span>: <\/span>100<\/span>)<\/span><\/span>\n  .<\/span>hoverEffect<\/span>()<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Bonus: We can load more than just USDZ files. For example, when we create scenes in Reality Composer Pro, those are saved as .usda<\/code> files. We can load them from the bundle just like we did with the earth model above. We could make special preview versions of our scenes that we can use in SwiftUI views. I may use this to provide a menu of scenes for the Dark Spaces project.<\/p>\n\n\n\n
Full Example Code<\/h2>\n\n\n\n
<\/path><\/path><\/svg><\/span>
struct<\/span> <\/span>Example051<\/span>: View {<\/span><\/span>\n<\/span>\n    <\/span>@State<\/span> <\/span>private<\/span> <\/span>var<\/span> isActive = <\/span>false<\/span><\/span>\n<\/span>\n    <\/span>var<\/span> body: some View {<\/span><\/span>\n        VStack {<\/span><\/span>\n            <\/span>Text<\/span>(<\/span>"Model3D Examples"<\/span>)<\/span><\/span>\n                .<\/span>font<\/span>(.<\/span>title<\/span>)<\/span><\/span>\n<\/span>\n            <\/span>HStack<\/span>(<\/span>alignment<\/span>: .<\/span>center<\/span>) {<\/span><\/span>\n                <\/span>ModelView<\/span>(<\/span>name<\/span>: <\/span>"Earth"<\/span>)<\/span><\/span>\n                    .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>160<\/span>, <\/span>height<\/span>: <\/span>160<\/span>)<\/span><\/span>\n                    .<\/span>rotation3DEffect<\/span>(<\/span><\/span>\n                        <\/span>Angle<\/span>(<\/span>degrees<\/span>: isActive ? <\/span>180<\/span> : <\/span>0<\/span>),<\/span><\/span>\n                        <\/span>axis<\/span>: (<\/span>x<\/span>: <\/span>0<\/span>, <\/span>y<\/span>: <\/span>1<\/span>, <\/span>z<\/span>: <\/span>0<\/span>)<\/span><\/span>\n                    )<\/span><\/span>\n                    .<\/span>hoverEffect<\/span>()<\/span><\/span>\n                    .<\/span>onTapGesture<\/span> {<\/span><\/span>\n                        withAnimation {<\/span><\/span>\n                            isActive.<\/span>toggle<\/span>()<\/span><\/span>\n                        }<\/span><\/span>\n                    }<\/span><\/span>\n                <\/span>ModelView<\/span>(<\/span>name<\/span>: <\/span>"Moon"<\/span>)<\/span><\/span>\n                    .<\/span>frame<\/span>(<\/span>width<\/span>: <\/span>40<\/span>, <\/span>height<\/span>: <\/span>40<\/span>)<\/span><\/span>\n                    .<\/span>offset<\/span>(<\/span>x<\/span>: <\/span>50<\/span>, <\/span>y<\/span>: <\/span>-50<\/span>)<\/span><\/span>\n                    .<\/span>offset<\/span>(<\/span>z<\/span>: <\/span>100<\/span>)<\/span><\/span>\n                    .<\/span>hoverEffect<\/span>()<\/span><\/span>\n<\/span>\n            }<\/span><\/span>\n            .<\/span>padding<\/span>(<\/span>24<\/span>)<\/span><\/span>\n<\/span>\n            <\/span>Text<\/span>(<\/span>"Earth and Moon from the Reality Composer Pro asset library."<\/span>)<\/span><\/span>\n                .<\/span>font<\/span>(.<\/span>caption<\/span>)<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nfileprivate<\/span> <\/span>struct<\/span> <\/span>ModelView<\/span>: View {<\/span><\/span>\n<\/span>\n    <\/span>@State<\/span> <\/span>var<\/span> name: <\/span>String<\/span> = <\/span>""<\/span><\/span>\n<\/span>\n    <\/span>var<\/span> body: some View {<\/span><\/span>\n        <\/span>Model3D<\/span>(<\/span>named<\/span>: name, <\/span>bundle<\/span>: realityKitContentBundle)<\/span><\/span>\n        { phase <\/span>in<\/span><\/span>\n            <\/span>if<\/span> <\/span>let<\/span> model = phase.<\/span>model<\/span> {<\/span><\/span>\n                model<\/span><\/span>\n                    .<\/span>resizable<\/span>()<\/span><\/span>\n                    .<\/span>aspectRatio<\/span>(<\/span>contentMode<\/span>: .<\/span>fit<\/span>)<\/span><\/span>\n            } <\/span>else<\/span> <\/span>if<\/span> phase.<\/span>error<\/span> != <\/span>nil<\/span> {<\/span><\/span>\n                <\/span>Text<\/span>(<\/span>"Could not load model <\/span>\\(<\/span>name<\/span>)<\/span>."<\/span>)<\/span><\/span>\n            } <\/span>else<\/span> {<\/span><\/span>\n                <\/span>ProgressView<\/span>()<\/span><\/span>\n            }<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
Model3D is a simple view that can load a USD or .reality file and display it in your SwiftUI view.<\/p>\n","protected":false},"author":93705089,"featured_media":3275,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[1365],"tags":[],"class_list":["post-3265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-example-code"],"jetpack_publicize_connections":[],"taxonomy_info":{"category":[{"value":1365,"label":"Example Code"}]},"featured_image_src_large":["https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/02\/step-example-051-01.jpeg?fit=1024%2C768&ssl=1",1024,768,true],"author_info":{"display_name":"Joseph Simpson","author_link":"https:\/\/stepinto.vision\/author\/vrhermit\/"},"comment_info":0,"category_info":[{"term_id":1365,"name":"Example Code","slug":"example-code","term_group":0,"term_taxonomy_id":11,"taxonomy":"category","description":"Code snippets and examples of using common APIs throughout visionOS development","parent":0,"count":187,"filter":"raw","cat_ID":1365,"category_count":187,"category_description":"Code snippets and examples of using common APIs throughout visionOS development","cat_name":"Example Code","category_nicename":"example-code","category_parent":0}],"tag_info":false,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/02\/step-example-051-01.jpeg?fit=2732%2C2048&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/3265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/users\/93705089"}],"replies":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/comments?post=3265"}],"version-history":[{"count":10,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/3265\/revisions"}],"predecessor-version":[{"id":3276,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/3265\/revisions\/3276"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/media\/3275"}],"wp:attachment":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/media?parent=3265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/categories?post=3265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/tags?post=3265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Apple has a lot more details about Model3D<\/a> in the documentation, so we won’t cover much more here. <\/p>\n\n\n\n