CINXE.COM

<!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Pro&v=2" type="text/css" /> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Pro+Icons&v=1" type="text/css" /> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Mono&v=2" type="text/css" /> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Apple+Icons&v=1" type="text/css" /> <meta charset="utf-8" /> <meta name="Author" content="Apple Inc." /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" /> <link rel="mask-icon" href="/apple-logo.svg" color="#333333"> <link rel="stylesheet" href="/assets/styles/global.dist.css?01172423298" type="text/css" /> <link rel="stylesheet" href="/assets/styles/dark-mode.css?17182448067" type="text/css" media="(prefers-color-scheme: dark)" data-color-scheme="dark" /> <link rel="stylesheet" href="/assets/styles/localization.css?39172414191" type="text/css" /> <script src="/assets/scripts/lib/jquery/jquery-3.6.0.min.js?17182448067"></script> <script src="/assets/scripts/settings.js?17182448067"></script> <script src="/assets/scripts/language-locales.js?17182448067"></script> <script src="/assets/scripts/DeveloperBreadcrumbs.js?05182434080"></script> <script async src="/assets/scripts/lib/jquery/jquery.retinate.js?17182448067"></script> <script async src="/assets/scripts/global.js?17182448067"></script> <script async src="/assets/scripts/global-logout.js?17182448067"></script> <title>Quick Look Gallery - Augmented Reality - Apple Developer</title> <meta name="omni_page" content="Quick Look Gallery - Augmented Reality - (English)" /> <meta name="Description" content="Embed Quick Look views in your apps and websites to let users see incredible detailed renderings in 3D or AR."> <meta property="og:locale" content="en_US" /> <meta property="og:site_name" content="Apple Developer" /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://developer.apple.com/news/images/og/arkit-og.png" /> <meta property="og:title" content="Quick Look Gallery - Augmented Reality - Apple Developer" /> <meta property="og:description" content="Embed Quick Look views in your apps and websites to let users see incredible detailed renderings in 3D or AR." /> <meta property="og:url" content="https://developer.apple.com/augmented-reality/quick-look/" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://developer.apple.com/news/images/og/arkit-og-twitter.png"> <meta name="twitter:description" content="Embed Quick Look views in your apps and websites to let users see incredible detailed renderings in 3D or AR."> <meta name="twitter:title" content="Quick Look Gallery - Augmented Reality - Apple Developer"> <meta name="twitter:url" content="https://developer.apple.com/augmented-reality/quick-look/"> <link rel="alternate" href="https://developer.apple.com/augmented-reality/quick-look/" hreflang="en" /> <link rel="alternate" href="https://developer.apple.com/cn/augmented-reality/quick-look/" hreflang="zh-CN" /> <link rel="alternate" href="https://developer.apple.com/jp/augmented-reality/quick-look/" hreflang="ja-JP" /> <link rel="alternate" href="https://developer.apple.com/kr/augmented-reality/quick-look/" hreflang="ko-KR" /> <link rel="canonical" href="https://developer.apple.com/augmented-reality/quick-look/" /> <link rel="stylesheet" href="/augmented-reality/styles/augmented-reality.css" type="text/css"> <link rel="stylesheet" href="/augmented-reality/styles/quick-look.css" type="text/css"> <script src="/augmented-reality/quick-look/scripts/quick-look.js"></script> </head> <body id="quick-look" class="dmf"> <script> const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; if (window.Settings.preferredColorScheme) { const colorTheme = (window.Settings.preferredColorScheme === 'auto') && !prefersDark ? 'light' : (window.Settings.preferredColorScheme === 'light') ? 'light' : 'dark' document.body.setAttribute('data-color-scheme', colorTheme); } else { document.body.setAttribute('data-color-scheme', prefersDark ? 'dark' : 'light'); } </script> <style> /* footer */ html body[data-color-scheme='dark'] #main section.section.section-resources.bg-alt {background-color:var(--fill-tertiary);color:var(--glyph-gray);} html body[data-color-scheme='dark'] .developer-router-links {background-color:var(--fill-tertiary);color:var(--glyph-gray);} html body[data-color-scheme='dark'] .footer {background-color:var(--fill-tertiary);color:var(--glyph-gray-tertiary);} /* body backgrounds */ body[data-color-scheme='dark'].dmf {background-color: #000;} html body[data-color-scheme='dark'].dmf .bg-alt {background-color:var(--fill-tertiary);} html body[data-color-scheme='dark'].dmf .bg-blue {background-color:var(--fill-blue-secondary);} html body[data-color-scheme='dark'].dmf .bg-green-blue {background:linear-gradient(135deg, #65976d 0%, #588ea4 100%)} html body[data-color-scheme='dark'].dmf .bg-yellow {background: linear-gradient(to bottom, var(--fill-tertiary) 0%, var(--fill-tertiary-alt) 100%);} html body[data-color-scheme='dark'].dmf .bg-light {background-color:var(--fill-secondary-alt);} html body[data-color-scheme='dark'].dmf .bg-gradient, html body[data-color-scheme='dark'].dmf .bg-grad {background:linear-gradient(to bottom, var(--dark) 0%, var(--fill-gray-secondary-alt) 100%);} html body[data-color-scheme='dark'].dmf .bg-grad-down {background:linear-gradient(to bottom, var(--dark) 0%, var(--fill-gray-secondary-alt) 100%);} html body[data-color-scheme='dark'].dmf .bg-grad-up {background:linear-gradient(to bottom, var(--fill-gray-secondary-alt) 0%, var(--dark) 100%);} html body[data-color-scheme='dark'].dmf .bg-blue-gradient, html body[data-color-scheme='dark'].dmf .bg-gradient-blue {background:linear-gradient(to bottom, var(--fill-blue-gradient-light) 0%, var(--fill-blue-gradient-dark) 100%);} html body[data-color-scheme='dark'].dmf .bg-blue-gradient-alt {background: linear-gradient(90deg, #061830 0%, #102d48 100%);} /* globalNav */ html body[data-color-scheme='dark'] #ac-globalnav {background: var(--fill-tertiary);} /* localNav */ html body[data-color-scheme='dark'] .localnav.localnav-scrim .localnav-background, html body[data-color-scheme='dark'] .localnav-scrim.localnav.localnav-background { background-color: rgba(29, 29, 31, 0.9); } @supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) { html body[data-color-scheme='dark'] .localnav.localnav-scrim .localnav-background, html body[data-color-scheme='dark'] .localnav-scrim.localnav.localnav-background { background-color: rgba(29, 29, 31, 0.72); } } </style> <link rel="stylesheet" href="/assets/styles/globalnav.css?55202406207" type="text/css" /> <link rel="stylesheet" href="/assets/styles/suggest-lang.css?17182448067" type="text/css" /> <div id="suggest-lang" class="ribbon hide" lang="en"> <div class="ribbon-content-wrapper"> <div class="ribbon-content row"> <div class="column large-12 large-centered"> <p><a href="#" id="suggest-link" class="ribbon-link more">View in English</a></p> <button id="suggest-closer" class="icon icon-after icon-reset" aria-label="Dismiss language suggestion" tabindex="0"></button> </div> </div> </div> </div> <script src="/assets/scripts/suggest-lang.js?17182448067"></script> <aside id="ac-gn-segmentbar" class="ac-gn-segmentbar" lang="en-US" dir="ltr"> </aside> <input type="checkbox" id="ac-gn-menustate" class="ac-gn-menustate" /> <nav id="ac-globalnav" class="no-js" role="navigation" aria-label="Global" data-hires="false" data-analytics-region="global nav" lang="en-US" dir="ltr" data-www-domain="www.apple.com" data-store-locale="us" data-store-root-path="/us" data-store-api="/[storefront]/shop/bag/status" data-search-locale="en_US" data-search-suggestions-api="/search-services/suggestions/" data-search-defaultlinks-api="/search-services/suggestions/defaultlinks/" data-search-suggestions-enabled="false"> <div class="ac-gn-content"> <ul class="ac-gn-header"> <li class="ac-gn-item ac-gn-menuicon"> <label class="ac-gn-menuicon-label" for="ac-gn-menustate" aria-hidden="true"> <span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-top"> <span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-top"></span> </span> <span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-bottom"> <span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-bottom"></span> </span> </label> <a href="#ac-gn-menustate" role="button" class="ac-gn-menuanchor ac-gn-menuanchor-open" id="ac-gn-menuanchor-open"> <span class="ac-gn-menuanchor-label">Global Nav Open Menu</span> </a> <a href="#" role="button" class="ac-gn-menuanchor ac-gn-menuanchor-close" id="ac-gn-menuanchor-close"> <span class="ac-gn-menuanchor-label">Global Nav Close Menu</span> </a> </li> <li class="ac-gn-item ac-gn-apple"> <a class="ac-gn-link ac-gn-link-apple-developer" href="/" data-analytics-title="appledeveloper home" id="ac-gn-firstfocus-small"> <span class="ac-gn-link-text">Apple Developer</span> </a> </li> </ul> <div class="ac-gn-search-placeholder-container" role="search"> <div class="ac-gn-search ac-gn-search-small"> <a id="ac-gn-link-search-small" class="ac-gn-link" href="/search/" data-analytics-title="search" data-analytics-click="search" data-analytics-intrapage-link aria-label="Search"> <div class="ac-gn-search-placeholder-bar"> <div class="ac-gn-search-placeholder-input"> <div class="ac-gn-search-placeholder-input-text" aria-hidden="true"> <div class="ac-gn-link-search ac-gn-search-placeholder-input-icon"></div> <span class="ac-gn-search-placeholder">Search</span> </div> </div> <div class="ac-gn-searchview-close ac-gn-searchview-close-small ac-gn-search-placeholder-searchview-close"> <span class="ac-gn-searchview-close-cancel" aria-hidden="true">Cancel</span> </div> </div> </a> </div> </div> <ul class="ac-gn-list"> <li class="ac-gn-item ac-gn-apple"> <a class="ac-gn-link ac-gn-link-apple-developer" href="/" data-analytics-title="appledeveloper home" id="ac-gn-firstfocus"> <span class="ac-gn-link-text">Apple Developer</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-news"> <a class="ac-gn-link ac-gn-link-news" href="/news/" data-analytics-title="news"> <span class="ac-gn-link-text">News</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-discover"> <a class="ac-gn-link ac-gn-link-discover" href="/discover/" data-analytics-title="discover"> <span class="ac-gn-link-text">Discover</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-design"> <a class="ac-gn-link ac-gn-link-design" href="/design/" data-analytics-title="design"> <span class="ac-gn-link-text">Design</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-develop"> <a class="ac-gn-link ac-gn-link-develop" href="/develop/" data-analytics-title="develop"> <span class="ac-gn-link-text">Develop</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-distribute"> <a class="ac-gn-link ac-gn-link-distribute" href="/distribute/" data-analytics-title="distribute"> <span class="ac-gn-link-text">Distribute</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-dsupport"> <a class="ac-gn-link ac-gn-link-dsupport" href="/support/" data-analytics-title="dsupport"> <span class="ac-gn-link-text">Support</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-account"> <a class="ac-gn-link ac-gn-link-account" href="/account/" data-analytics-title="account"> <span class="ac-gn-link-text">Account</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-search" role="search"> <a id="ac-gn-link-search" class="ac-gn-link ac-gn-link-search" href="/search/" data-analytics-title="search" data-analytics-click="search" data-analytics-intrapage-link aria-label="Search"></a> </li> </ul> <aside id="ac-gn-searchview" class="ac-gn-searchview" role="search" data-analytics-region="search"> <div class="ac-gn-searchview-content"> <div class="ac-gn-searchview-bar"> <div class="ac-gn-searchview-bar-wrapper"> <form id="ac-gn-searchform" class="ac-gn-searchform" action="/search/" method="get"> <div class="ac-gn-searchform-wrapper"> <input id="ac-gn-searchform-input" class="ac-gn-searchform-input" type="text" name="q" aria-label="Search" placeholder="Search" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-owns="quicklinks suggestions" /> <button id="ac-gn-searchform-submit" class="ac-gn-searchform-submit" type="submit" disabled aria-label="Submit Search"></button> <button id="ac-gn-searchform-reset" class="ac-gn-searchform-reset" type="reset" disabled aria-label="Clear Search"> <span class="ac-gn-searchform-reset-background"></span> </button> </div> </form> <button id="ac-gn-searchview-close-small" class="ac-gn-searchview-close ac-gn-searchview-close-small" aria-label="Cancel Search"> <span class="ac-gn-searchview-close-cancel" aria-hidden="true"> Cancel </span> </button> </div> </div> <aside id="ac-gn-searchresults" class="ac-gn-searchresults hidden" data-string-quicklinks="Quick Links" data-string-suggestions="Suggested Searches" data-string-noresults=""> <section class="ac-gn-searchresults-section ac-gn-searchresults-section-defaultlinks"> <div class="ac-gn-searchresults-section-wrapper"> <div class="search-group-checkbox hidden"><input id="group-input" type="checkbox" name="group-filter" checked>Only search within “<span id="group-search-label"></span>”</div> <h3 class="ac-gn-searchresults-header ac-gn-searchresults-animated">Quick Links</h3> <ul class="ac-gn-searchresults-list" id="defaultlinks" role="listbox"> </ul> <span role="status" class="ac-gn-searchresults-count" aria-live="polite">5 Quick Links</span> </div> </section> </aside> </div> <button id="ac-gn-searchview-close" class="ac-gn-searchview-close" aria-label="Cancel Search"> <span class="ac-gn-searchview-close-wrapper"> <span class="ac-gn-searchview-close-left"></span> <span class="ac-gn-searchview-close-right"></span> </span> </button> </aside> </div> </nav> <div class="ac-gn-blur"></div> <div id="ac-gn-curtain" class="ac-gn-curtain"></div> <div id="ac-gn-placeholder" class="ac-nav-placeholder"></div> <script src="/assets/scripts/ac-globalnav.built.js?17182448067"></script> <link rel="stylesheet" href="/assets/styles/search.css?17182448067"> <script src="/assets/scripts/search.js?17182448067"></script>  <script> /* RSID: */ var s_account="awdappledeveloper" </script> <script src="/assets/metrics/scripts/analytics.js?072620243"></script> <script> s.pageName= AC && AC.Tracking && AC.Tracking.pageName(); s.channel="www.en.developer" s.channel="www.en.developer"; /************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/ var s_code=s.t();if(s_code)document.write(s_code) </script>  <link rel="stylesheet" property="stylesheet" href="/assets/styles/localnav.css" type="text/css" /> <input type="checkbox" id="localnav-menustate" class="localnav-menustate" /> <nav id="localnav" class="localnav localnav-scrim" data-sticky role="navigation"> <div class="localnav-wrapper"> <div class="localnav-background"></div> <div class="localnav-content"> <h2 class="localnav-title"> <a href="/augmented-reality/">Augmented Reality</a> </h2> <div class="localnav-menu"> <a href="#localnav-menustate" class="localnav-menucta-anchor localnav-menucta-anchor-open" id="localnav-menustate-open"> <span class="localnav-menucta-anchor-label">Open Menu</span> </a> <a href="#" class="localnav-menucta-anchor localnav-menucta-anchor-close" id="localnav-menustate-close"> <span class="localnav-menucta-anchor-label">Close Menu</span> </a> <div class="localnav-menu-tray"> <ul class="localnav-menu-items"> <li class="localnav-menu-item"> <a href="/augmented-reality/" class="localnav-menu-link">Overview</a> </li> <li class="localnav-menu-item"> <a href="/augmented-reality/arkit/" class="localnav-menu-link">ARKit</a> </li> <li class="localnav-menu-item"> <a href="/augmented-reality/realitykit/" class="localnav-menu-link">RealityKit</a> </li> <li class="localnav-menu-item"> <a href="/augmented-reality/roomplan/" class="localnav-menu-link">RoomPlan</a> </li> <li class="localnav-menu-item"> <a href="/augmented-reality/tools/" class="localnav-menu-link">Creation Tools</a> </li> <li class="localnav-menu-item"> <a href="/augmented-reality/quick-look/" class="localnav-menu-link">Quick Look</a> </li> <li class="localnav-menu-item"> <a href="/augmented-reality/resources/" class="localnav-menu-link">Resources</a> </li> </ul> </div> <div class="localnav-actions localnav-actions"> <div class="localnav-action localnav-action-menucta" aria-hidden="true"> <label for="localnav-menustate" class="localnav-menucta"> <span class="localnav-menucta-chevron"></span> </label> </div> </div> </div> </div> </div> </nav> <label id="localnav-curtain" for="localnav-menustate"></label> <script src="/assets/scripts/ac-localnav.built.js"></script> <script type="text/javascript" src="/assets/scripts/localnav.js"></script> <main id="main" class="main" role="main"> <section class="section section-hero divider-bottom bg-light"> <div class="section-content"> <div class="row"> <div class="column large-centered large-10 medium-10 small-12 text-center"> <h1 class="typography-headline">Quick Look</h1> <p class="typography-intro">Built-in apps, such as Safari, Messages, Mail, News, and Notes, use Quick Look to display USDZ files of virtual objects in 3D on iPhone, iPad, and Apple Vision Pro. You can embed Quick Look views in your apps and websites to let users see incredibly detailed object renderings in a real-world surrounding with support for audio playback.</p> </div> </div> </div> </section> <section class="section section-animations divider-bottom bg-light"> <div class="section-content"> <div class="row row-header"> <div class="column large-centered large-9 medium-10 small-12 text-center"> <h2 class="typography-subsection-headline">Examples with animations</h2> <p>Quick Look supports built-in behaviors and animations in the AR experiences you create. Experience the interactivity of Quick Look* in the For All Mankind: Explorable Objects examples below.</p> </div> </div> <div class="row"> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/hab/hab_en.reality"><img class="image-model" src="/augmented-reality/quick-look/models/hab/hab.png" alt="" /><div class="block-link">The Hab</div></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/cosmonaut/CosmonautSuit_en.reality"><img class="image-model" src="/augmented-reality/quick-look/models/cosmonaut/cosmonaut.png" alt="" /><div class="block-link">Cosmonaut</div></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/rover/LunarRover_English.reality"><img class="image-model" src="/augmented-reality/quick-look/models/rover/rover.png" alt="" /><div class="block-link">Lunar Rover</div></a> </div> </div> </div> </section> <section class="section section-models divider-bottom bg-light"> <div class="section-content"> <div class="row row-header"> <div class="column large-centered large-9 medium-10 small-12 text-center"> <h2 class="typography-subsection-headline">3D models</h2> <p>Tap any of the 3D models below on a iPhone or iPad to view the object and place it in AR.* Or click a model on Mac to download the USDZ file.</p> </div> </div> <div class="row"> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/pancakes/pancakes.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/pancakes/pancakes_2x.png" alt="" /></a> <figcaption class="typography-subbody"><a href="/augmented-reality/object-capture/">Made with Object Capture</a></figcaption> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/nike-air-force/sneaker_airforce.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/nike-air-force/nike-air-force.png" alt="" /></a> <figcaption class="typography-subbody"><a href="/augmented-reality/object-capture/">Made with Object Capture</a></figcaption> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/nike-pegasus/sneaker_pegasustrail.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/nike-pegasus/nike-pegasus.png" alt="" /></a> <figcaption class="typography-subbody"><a href="/augmented-reality/object-capture/">Made with Object Capture</a></figcaption> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/biplane/toy_biplane_idle.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/biplane/biplane.jpg" alt="" /></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/drummertoy/toy_drummer_idle.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/drummertoy/drummertoy.jpg" alt="" /></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/toycar/toy_car.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/toycar/toycar.jpg" alt="" /></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/vintagerobot2k/robot_walk_idle.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/vintagerobot2k/vintagerobot2k.jpg" alt="" /></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/stratocaster/fender_stratocaster.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/stratocaster/stratocaster.jpg" alt="" /></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/retrotv/tv_retro.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/retrotv/retrotv.jpg" alt="" /></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/gramophone/gramophone.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/gramophone/gramophone.jpg" alt="" /></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/wateringcan/wateringcan.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/wateringcan/wateringcan.jpg" alt="" /></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/redchair/chair_swan.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/redchair/redchair.jpg" alt="" /></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/tulip/flower_tulip.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/tulip/tulip.jpg" alt="" /></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/cupandsaucer/cup_saucer_set.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/cupandsaucer/cupandsaucer.jpg" alt="" /></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" href="/augmented-reality/quick-look/models/teapot/teapot.usdz"><img class="image-model" src="/augmented-reality/quick-look/models/teapot/teapot.jpg" alt="" /></a> </div> </div> </div> </section> <section class="section section-actions bg-light"> <div class="section-content"> <div class="row row-header"> <div class="column large-centered large-9 medium-10 small-12 text-center"> <h2 class="typography-subsection-headline">Examples with banners</h2> <p>Quick Look enables you to add Apple Pay integration or custom actions to engage your users. Experience the power of custom actions in Quick Look* in our models below.</p> </div> </div> <div class="row"> <div class="column large-4 medium-6 small-12 text-center"> <a href="https://applepaydemo.apple.com/ar-quick-look/"> <figure class="image-example example-clock"></figure> <span class="block-link icon icon-after icon-external">Apple Pay<span class="loc-en-only"></span></span> </a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" id="ar-link-2" href="/augmented-reality/quick-look/models/kids-slide/slide.usdz#callToAction=Browse%20API&checkoutTitle=Kids%20Slide&checkoutSubtitle=Playground%20in%20your%20backyard&price=$145&allowsContentScaling=0"><img class="image-model" src="/augmented-reality/quick-look/models/kids-slide/kids-slide.png" alt="" /><div class="block-link">Custom Action</div></a> </div> <div class="column large-4 medium-6 small-12 text-center"> <a rel="ar" id="ar-link-3" href="/augmented-reality/quick-look/models/solar-panels/solar_panels.usdz#custom=https://developer.apple.com/augmented-reality/quick-look/models/solar-panels/solar_panels_custom.html?1&customHeight=large&allowsContentScaling=0"><img class="image-model" src="/augmented-reality/quick-look/models/solar-panels/solar-panels.png" alt="" /><div class="block-link">Custom Banner</div></a> </div> </div> </div> </section> <section class="section section-examples"> <div class="section-content"> <div class="row"> <div class="column large-centered large-9 medium-10 small-12 text-center"> <h2 class="typography-subsection-headline">Examples on the web</h2> <p>See the incredibly detailed rendered objects that developers have created for their websites using the USDZ file format. Simply tap an object below in Safari on iPhone or iPad to visit the website, then tap the AR icon <img src="/augmented-reality/quick-look/images/arkit-glyph.svg" class="ar-icon" align="middle" alt="" /> to experience the object in AR.*</p> </div> </div> <div class="callout margin-top"> <div class="flex-row"> <div class="column large-5 medium-6 small-12"> <div class="device-crop-top"> <div class="device-iphone-x-silver-container"> <img src="/augmented-reality/quick-look/images/screen-zemi.jpg" alt="" class="device-screen screen-examples"> <figure class="device-hardware"></figure> </div> </div> </div> <div class="column large-6 medium-6 small-12"> <p>The Metropolitan Museum of Art has produced an AR model in USDZ format of a wooden deity figure (zemí) from the Caribbean. This model leverages the new ability of Quick Look to be able to play an audio track while viewing the model.</p> <p><a class="no-margin block-link icon icon-after icon-external" target="_blank" href="https://www.metmuseum.org/blogs/collection-insights/2020/augmented-reality-zemi-arte-del-mar/">Zemí Cohoba Stand<span class="loc-en-only"></span></a></p> </div> </div> </div> <div class="row"> <div class="column large-centered large-12 text-center"> <div class="device-rotate device-iphone-x-silver-container center"> <figure class="device-screen screen-examples"></figure> <figure class="device-hardware"></figure> </div> <p><a target="_blank" href="https://www.lamborghini.com/en-en/models/huracan/huracan-evo-rwd-spyder#ar" class="icon icon-after icon-external">Huracán EVO RWD Spyder<span class="loc-cj"></span></a></p> </div> </div> <div class="row"> <div class="column large-centered large-6 small-12 text-center"> <a target="_blank" href="https://www.bang-olufsen.com/en/speakers/beosound-2?variant=beosound-2-mk2-naturalbrushed-us"> <figure class="image-example example-bango"></figure> <span class="block-link icon icon-after icon-external">Bang & Olufsen<span class="loc-en-only"></span></span></a> </div> </div> </div> </section> </main> <script src="/augmented-reality/quick-look/scripts/ar-link.js?1"></script> <link rel="stylesheet" href="/assets/styles/footer.dist.css?17182448067"> <footer id="footer" class="footer" role="contentinfo" aria-labelledby="footer-label"> <div class="footer-content"> <h2 class="footer-label" id="footer-label">Developer Footer</h2> <section class="footer-sosumi"> <ul> <li>* Requires a device running iPadOS or iOS 12 or later.</li> </ul> </section> <developer-breadcrumbs> <li class="footer-breadcrumbs-item"><a href="/augmented-reality/">Augmented Reality</a></li> <li class="footer-breadcrumbs-item">Quick Look</li> </developer-breadcrumbs> <nav class="footer-directory" aria-label="Apple Developer Directory" role="navigation">  <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-platform" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-platform"> <h3 class="footer-directory-column-section-title">Platforms</h3> </label> <a href="#footer-directory-column-section-state-platform" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/ios/">iOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/ipados/">iPadOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/macos/">macOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/tvos/">tvOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/visionos/">visionOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/watchos/">watchOS</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-tools" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-tools"> <h3 class="footer-directory-column-section-title">Tools</h3> </label> <a href="#footer-directory-column-section-state-tools" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swift/">Swift</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swiftui/">SwiftUI</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swift-playgrounds/">Swift Playgrounds</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/testflight/">TestFlight</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/xcode/">Xcode</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/xcode-cloud/">Xcode Cloud</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/sf-symbols/">SF Symbols</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-topics" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-topics"> <h3 class="footer-directory-column-section-title">Topics & Technologies</h3> </label> <a href="#footer-directory-column-section-state-topics" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/accessibility/">Accessibility</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/accessories/">Accessories</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-extensions/">App Extensions</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/">App Store</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/audio/">Audio & Video</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/augmented-reality/">Augmented Reality</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/design/">Design</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/distribute/">Distribution</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/education/">Education</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/fonts/">Fonts</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/games/">Games</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/health-fitness/">Health & Fitness</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/in-app-purchase/">In-App Purchase</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/localization/">Localization</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/maps/">Maps & Location</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/machine-learning/">Machine Learning</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://opensource.apple.com">Open Source</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/security/">Security</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/safari/">Safari & Web</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-resources" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-resources"> <h3 class="footer-directory-column-section-title">Resources</h3> </label> <a href="#footer-directory-column-section-state-resources" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/documentation/">Documentation</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/learn/">Tutorials</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/download/">Downloads</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/forums/">Forums</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/videos/">Videos</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-support" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-support"> <h3 class="footer-directory-column-section-title">Support</h3> </label> <a href="#footer-directory-column-section-state-support" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/support/articles/">Support Articles</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/contact/">Contact Us</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/bug-reporting/">Bug Reporting</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/system-status/">System Status</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-account" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-account"> <h3 class="footer-directory-column-section-title">Account</h3> </label> <a href="#footer-directory-column-section-state-account" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/">Apple Developer</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://appstoreconnect.apple.com/">App Store Connect</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/ios/certificate/">Certificates, IDs, & Profiles</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://feedbackassistant.apple.com/">Feedback Assistant</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-programs" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-programs"> <h3 class="footer-directory-column-section-title">Programs</h3> </label> <a href="#footer-directory-column-section-state-programs" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/">Apple Developer Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/enterprise/">Apple Developer Enterprise Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/small-business-program/">App Store Small Business Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://mfi.apple.com/">MFi Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/news-partner/">News Partner Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/video-partner/">Video Partner Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/security-bounty/">Security Bounty Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/security-research-device/">Security Research Device Program</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-events" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-events"> <h3 class="footer-directory-column-section-title">Events</h3> </label> <a href="#footer-directory-column-section-state-events" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/events/">Meet with Apple</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/events/developer-centers/">Apple Developer Centers</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/app-store-awards/">App Store Awards</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/design/awards/">Apple Design Awards</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/academies/">Apple Developer Academies</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/entrepreneur-camp/">Entrepreneur Camp</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/wwdc/">WWDC</a></li> </ul> </div> </div>  </nav> <section class="footer-mini" vocab="http://schema.org/" typeof="Organization"> <div class="footer-mini-news"> <div class="copy"> Get the <a href="https://apps.apple.com/us/app/apple-developer/id640199958">Apple Developer app</a>. </div> <div class="content"> <div class="color-scheme-toggle" role="radiogroup" tabindex="0" aria-label="Select a color scheme preference"> <label data-color-scheme-option="light"> <input type="radio" value="light" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Light</div> </label> <label data-color-scheme-option="dark"> <input type="radio" value="dark" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Dark</div> </label> <label data-color-scheme-option="auto"> <input type="radio" value="auto" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Auto</div> </label> </div> <script async src="/assets/scripts/color-scheme-toggle.js"></script> </div> </div> <link rel="stylesheet" href="/assets/styles/language-dropdown.css?17182448067"> <div class="language-dropdown dropdown-container legacy-form hidden"> <select class="dropdown" aria-label="Language Dropdown"></select> <span class="dropdown-icon icon icon-chevrondown" aria-hidden="true"></span> </div> <script src="/assets/scripts/language-dropdown.js?17182448067"></script> <div class="footer-mini-legal"> <div class="footer-mini-legal-copyright">Copyright © 2024 <a href="https://www.apple.com">Apple Inc.</a> All rights reserved.</div> <div class="footer-mini-legal-links"> <a class="footer-mini-legal-link" href="https://www.apple.com/legal/internet-services/terms/site.html" class="first">Terms of Use</a> <a class="footer-mini-legal-link" href="https://www.apple.com/legal/privacy/">Privacy Policy</a> <a class="footer-mini-legal-link" href="/support/terms/">Agreements and Guidelines</a> </div> </div> </section> </div> </footer> </body> </html>