{"id":8915,"date":"2021-06-02T12:38:24","date_gmt":"2021-06-02T12:38:24","guid":{"rendered":"https:\/\/sketchfab.com\/blogs\/enterprise\/?p=8915"},"modified":"2022-03-14T00:06:57","modified_gmt":"2022-03-14T00:06:57","slug":"embedding-a-3d-model-with-ar-activated-best-practices","status":"publish","type":"post","link":"https:\/\/sketchfab.com\/blogs\/enterprise\/embedding-with-ar-activated","title":{"rendered":"Embedding a 3D Model with AR Activated: Best Practices"},"content":{"rendered":"[vc_row][vc_column][vc_column_text]Experiencing AR on a Sketchfab 3D model could not be easier: all your customers have to do is click the \u2018AR button\u2019 on any enabled Sketchfab embed to jump straight into AR on their device\u2014no app install necessary. <\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_video link=”https:\/\/sketchfab.com\/models\/0b59f4543c4a468596c764dc02a4c872\/embed?camera=0&ui_animations=0&ui_infos=0&ui_stop=0&ui_inspector=0&ui_watermark_link=0&ui_watermark=0&ui_help=0&ui_settings=0&ui_vr=0&ui_annotations=0&ui_theme=dark”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]\n

Just start the embed and click the AR button in the bottom right.<\/span><\/i><\/p>\n[\/vc_column_text][tm_spacer size=”lg:30″][vc_column_text]The engagement your model will get depends greatly on the quality of its integration on your site. This article will help you optimize the appearance of your AR-enabled Sketchfab embed.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][tm_heading tag=”h2″ custom_google_font=”” text=”1. Activate AR on your models”][vc_column_text]First thing first, before you do anything, you need to activate AR on your 3D model.\u00a0<\/strong><\/span>[\/vc_column_text][tm_spacer size=”lg:30″][vc_column_text css=”.vc_custom_1634037558180{border-top-width: 3px !important;border-right-width: 3px !important;border-bottom-width: 3px !important;border-left-width: 3px !important;padding-top: 25px !important;padding-right: 25px !important;padding-bottom: 25px !important;padding-left: 25px !important;background-color: #d9edf7 !important;border-left-color: #31708f !important;border-right-color: #31708f !important;border-top-color: #31708f !important;border-bottom-color: #31708f !important;}”]Native Augmented Reality (AR) is available for Sketchfab customers with a Premium<\/a> or an Enterprise license.<\/a><\/span><\/b><\/span>[\/vc_column_text][tm_spacer size=”lg:30″][vc_column_text]Setting up existing Sketchfab 3D models for viewing in AR is easy. <\/span>Click on “Edit properties” on the model page, and toggle the “Allow AR” button to the on setting. Once AR has been turned on for a model, you will be able to see the [AR] icon in the bottom right corner of the model viewer.\u00a0\u00a0<\/span>[\/vc_column_text][tm_spacer size=”lg:30″][tm_image image=”8953″][vc_column_text]Here is a detailed article<\/span><\/a> that contains step-by-step instructions for preparing models for AR. <\/span><\/p>\n

In the next step, we\u2019ll see how you can easily customize the appearance of your embed by adding specific parameters to the embed code.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][tm_heading tag=”h2″ custom_google_font=”” text=”2. Make sure your product is scaled correctly”][vc_column_text]Check and update a model\u2019s scale using Sketchfab\u2019s 3D Editor<\/strong>, c<\/span>lick \u201cEdit 3D Settings\u201d on the model page, <\/span>then click on the \u201cAR\/VR\u201d icon.\u00a0<\/span><\/p>\n

Sketchfab’s rendering assumes that your models were created on a metric scale<\/strong>. So, if you create and export your 3D model measured to scale and in meters,<\/strong> the AR world-scale should already be correct by default.<\/span>[\/vc_column_text][tm_spacer size=”lg:30″][vc_column_text css=”.vc_custom_1622636132860{border-top-width: 3px !important;border-right-width: 3px !important;border-bottom-width: 3px !important;border-left-width: 3px !important;padding-top: 25px !important;padding-right: 25px !important;padding-bottom: 25px !important;padding-left: 25px !important;background-color: #d9edf7 !important;border-left-color: #31708f !important;border-right-color: #31708f !important;border-top-color: #31708f !important;border-bottom-color: #31708f !important;}”]Before uploading your model to Sketchfab, we recommend setting your model in meters in your creation software so that the scale will be automatically adjusted by default once in Sketchfab.<\/span><\/b><\/span>[\/vc_column_text][tm_spacer size=”lg:30″][vc_column_text]If you have not set your model in meters prior to uploading it to Sketchfab<\/strong>, you can define the scale in the \u201cScale” settings. Use the \u201cReset Scale\u201d button to indicate how many of your model\u2019s units are equivalent to one meter.\u00a0<\/span><\/p>\n

For instance, if you created your model in centimeters, such as the one below, you would choose 100. You can find a table of measurement conversions here<\/a>.<\/span>[\/vc_column_text][tm_spacer size=”lg:30″][tm_image image=”8955″][vc_column_text]Keep in mind that every time you save your model after changing the scale or other settings, such as Materials, Sketchfab will regenerate the glTF and USDZ versions of the model<\/strong>. This process can take <\/span>5-10 minutes, <\/b>depending on the model, so don\u2019t worry if your changes are not immediately visible in AR.\u00a0<\/span><\/p>\n

You can check the status of the glTF and USDZ reprocessing in the “Download your model” section of \u201cModel Properties\u201d.<\/span><\/p>\n

Learn more about model conversion <\/span>here<\/span><\/a>.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][tm_heading tag=”h2″ custom_google_font=”” text=”3. Choose the right embed parameters for a clean integration”][vc_column_text]Once embedded, anyone with a compatible device will be able to view your model in native, app-free AR.\u00a0<\/span><\/p>\n

To get the embed code of the model, click the \u201cEmbed\u201d button on the model\u2019s page, just underneath the viewer and optimize the model embed code in the embed pop-up settings.<\/strong><\/span>[\/vc_column_text][tm_spacer size=”lg:30″][tm_image image=”8957″][vc_column_text]Once you are in the embed window, in the <\/span>appearance section:<\/b><\/p>\n