{"id":36280,"date":"2024-11-07T07:00:00","date_gmt":"2024-11-07T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36280"},"modified":"2025-10-30T13:42:44","modified_gmt":"2025-10-30T20:42:44","slug":"3d-product-image-e-commerce-store","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store","title":{"rendered":"How to Create a 3D Product Image for Your E-commerce Store With Cloudinary"},"content":{"rendered":"

Shopping online is convenient, but customers often miss being able to physically interact with products in brick-and-mortar stores. In fact, 85% of shoppers favor the in-store experience<\/a>. Without this information, it can be challenging to make a purchase decision.<\/p>\n

One way to replicate the in-store experience is to create immersive 3D image models that provide your customers with an interactive, realistic view of the product. This technology can be a real differentiator between an abandoned cart and a sale. According to a Cloudinary survey, 53% of respondents<\/a> said they were more likely to buy if they had access to 3D product images.<\/p>\n

This blog post will show you how to use Cloudinary\u2019s Dimensions<\/a> product to embed 3D models in an e-commerce website using Next.js.<\/p>\n

Creating 3D Product Images<\/h2>\n

Creating a 3D model can be challenging, but fortunately, specialized software is available to make the process easier. For example, Polycam<\/a> is an app for your phone that lets you take shots of an object from different angles and then produce a 3D model. This app fits into the so-called photogrammetry software<\/a> category, which analyzes images by identifying common points in each one and connecting them to create a 3D view.<\/p>\n

We\u2019ll work with Polycam for this blog post, but any other photogrammetry software will work.<\/p>\n

Using Polycam<\/h2>\n

After installing and opening the app, click the camera icon to make a new capture. You\u2019ll be offered two capture modes: LiDAR and Photo. The LiDAR mode is used to capture larger areas, such as rooms or apartments. On the other hand, the Photo mode is usually the best choice for capturing objects where accuracy and detail are essential, and this is the mode we\u2019ll be using. This mode works by taking a sequence of photos and uploading them to the cloud, where they\u2019re processed to create a 3D image reconstruction.<\/p>\n

\"Taking<\/p>\n

Press the Record<\/strong> button and take photos of the object you want to create a 3D model of. Once you\u2019re done, click Record<\/strong> again, which will upload the pictures to the cloud for processing. Once the processing is complete, you can click the image and then the Download<\/strong> icon in the top-right corner.<\/p>\n

You\u2019ll be given several export options; the one we\u2019re interested in is the GLTF format. This format is specifically designed for fast transmission and use of 3D models in web browsers and VR environments. After clicking GLTF, you\u2019ll receive a ZIP file containing a GLB file that represents your 3D model.<\/p>\n

Uploading to Dimensions<\/h2>\n

Dimensions is a new product from Cloudinary, currently in beta, allowing you to generate assets from your 3D models and deliver them through the Cloudinary API. To use it, log in to the Dimensions Catalog<\/a> and click Upload 3D Model<\/strong> to upload the previously saved GLB file.<\/p>\n

\"Viewing<\/p>\n

As you can see, our 3D model has room for improvement, and there are certainly far better-quality models out there, but we\u2019re using it just to demonstrate how it can be used in Dimensions. To get a higher-quality model, you\u2019d need to have a different environment with better lighting so that the actual object can be isolated from the background.<\/p>\n

Next, click Create a 3D Viewer<\/strong> and choose one of the available sizes. Then click View Results<\/strong>, and the model will be uploaded and made available in a 3D viewer. We can now use this 3D model in our e-commerce website, which we\u2019ll implement next.<\/p>\n

Before proceeding, note the \u201cSKU\u201d value displayed at the top of the page. We\u2019ll need this later.<\/p>\n

\"Showing<\/p>\n

Embedding 3D Models in a Next.js app<\/h2>\n

The first step is to go to the Dimensions Settings page<\/a> and note down the value of the Account Name field. We\u2019ll need to store this value as an environment variable for use by Next.js.<\/p>\n

When running locally, this will be done in the .env.local<\/code> file:<\/p>\n

NEXT_PUBLIC_CLOUDINARY_ACCOUNT_NAME=[your account name]\n<\/code><\/pre>\n
The environment variable is prefixed with NEXT_PUBLIC_<\/code><\/a> because it\u2019s an identifier that\u2019s safe to be used in the browser context.<\/p>\n
Next, define a component responsible for including the necessary Dimensions JavaScript libraries. These libraries are required for initializing the Dimensions client and parsing custom HTML attributes<\/a> that Dimensions uses.<\/p>\n
You can see the source code for the whole component below:<\/p>\n
\/\/ components\/dimensions-script.tsx<\/span>\n\"use client\"<\/span>;\nimport<\/span> Script from<\/span> \"next\/script\"<\/span>;\nimport<\/span> { useEffect } from<\/span> \"react\"<\/span>;\n\nconst<\/span> CLOUDINARY_ACCOUNT_ID = process.env.NEXT_PUBLIC_CLOUDINARY_ACCOUNT_NAME;\n\nexport<\/span> default<\/span> function<\/span> DimensionsScript<\/span>(<\/span>) <\/span>{\n  useEffect(()<\/span> =><\/span> {\n    \/\/ @ts-expect-error type definition initDimensions is not yet available<\/span>\n    window<\/span>.initDimensions({\n      account<\/span>: CLOUDINARY_ACCOUNT_ID,\n      viewers<\/span>: [\"3D\"<\/span>],\n    });\n\n    console<\/span>.log(\n      \"Cloudinary Dimensions initialized for account\"<\/span>,\n      CLOUDINARY_ACCOUNT_ID,\n    );\n  }, []);\n\n  return<\/span> (\n    <><\/span>\n      <Script<\/span>\n        strategy<\/span>=\"beforeInteractive\"<\/span>\n        src<\/span>=\"https:\/\/dimensions-tag.cloudinary.com\/all.js\"<\/span>\n      \/><\/span>\n      <Script<\/span> src<\/span>=\"https:\/\/dimensions-3d-viewer.cloudinary.com\/all.js\"<\/span> \/><\/span>\n    <\/><\/span><\/span><\/span><\/span><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The component also runs on the initDimensions<\/code> function provided by the first JavaScript library when mounted. For this reason, it needs to be a client component, as noted by the use client<\/code> directive at the top.<\/p>\n
\/\/ app\/layout.tsx<\/span>\nexport<\/span> default<\/span> function<\/span> RootLayout<\/span>({\n  children,\n}: Readonly<{\n  children: React.ReactNode;\n}><\/span>) <\/span>{\n  return<\/span> (\n    <html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n      <body<\/span>><\/span>\n        {children}\n        <DimensionsScript<\/span> \/><\/span>\n      <\/body<\/span>><\/span>\n    <\/html<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With the Dimensions library initialized, we can use Dimensions\u2019 custom HTML tags anywhere in the site. For example, on a product page. Assuming we have a ProductDetail<\/code> component, all we need to do is include a  div<\/code> element with Dimensions\u2019 custom HTML tags:<\/p>\n
export<\/span> function<\/span> ProductDetail<\/span>(<\/span>) <\/span>{\n  const<\/span> skuId = \"sneaker-123\"<\/span>;\n  \n  return<\/span> (\n    <div<\/span> className<\/span>=\"grid md:grid-cols-2 gap-6 lg:gap-12 items-start max-w-6xl px-4 mx-auto py-6\"<\/span>><\/span>\n      <div<\/span> className<\/span>=\"grid gap-4 md:gap-10 items-start h-full\"<\/span>><\/span>\n        <div<\/span> className<\/span>=\"grid gap-4 h-full\"<\/span>><\/span>\n          {\/* This will embed the 3D model *\/}\n          <div<\/span> data-d8s-type<\/span>=\"3d\"<\/span> data-d8s-id<\/span>={skuId}<\/span>><\/span><\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span> className<\/span>=\"grid gap-4 md:gap-10 items-start\"<\/span>><\/span>\n        {\/* The rest of the product detail page *\/}\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here, the data-d8s-type<\/code> attribute is set to 3d<\/code> to render the Dimensions viewer with the model associated with the product. The data-d8s-id<\/code> attribute refers to the SKU. The data-d8s-typ<\/code>e attribute can also be set to video<\/code>, or it defaults to image<\/code> if not set explicitly. With this code in place, you should now see an animated 3D image of our product.<\/p>\n
\"Product<\/p>\n
Conclusion<\/h2>\n
Cloudinary Dimensions is a powerful product to help you make immersive 3D models with ease and at scale. All you need to do is upload your model and embed it in your app using the Cloudinary libraries. Although it\u2019s still in beta, you\u2019re free to try it out at the official Dimensions website<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":36282,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[354,98,212],"class_list":["post-36280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-3d","tag-e-commerce","tag-next-js"],"acf":[],"yoast_head":"\nHow to Create a 3D Product Image for Your E-commerce Store With Cloudinary<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a 3D Product Image for Your E-commerce Store With Cloudinary\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-07T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-30T20:42:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413225\/polycam_3D_to_Dimensions-blog\/polycam_3D_to_Dimensions-blog.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"How to Create a 3D Product Image for Your E-commerce Store With Cloudinary\",\"datePublished\":\"2024-11-07T15:00:00+00:00\",\"dateModified\":\"2025-10-30T20:42:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store\"},\"wordCount\":13,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413225\/polycam_3D_to_Dimensions-blog\/polycam_3D_to_Dimensions-blog.jpg?_i=AA\",\"keywords\":[\"3D\",\"E-commerce\",\"Next.js\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store\",\"url\":\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store\",\"name\":\"How to Create a 3D Product Image for Your E-commerce Store With Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413225\/polycam_3D_to_Dimensions-blog\/polycam_3D_to_Dimensions-blog.jpg?_i=AA\",\"datePublished\":\"2024-11-07T15:00:00+00:00\",\"dateModified\":\"2025-10-30T20:42:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413225\/polycam_3D_to_Dimensions-blog\/polycam_3D_to_Dimensions-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413225\/polycam_3D_to_Dimensions-blog\/polycam_3D_to_Dimensions-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a 3D Product Image for Your E-commerce Store With Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a 3D Product Image for Your E-commerce Store With Cloudinary","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store","og_locale":"en_US","og_type":"article","og_title":"How to Create a 3D Product Image for Your E-commerce Store With Cloudinary","og_url":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store","og_site_name":"Cloudinary Blog","article_published_time":"2024-11-07T15:00:00+00:00","article_modified_time":"2025-10-30T20:42:44+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413225\/polycam_3D_to_Dimensions-blog\/polycam_3D_to_Dimensions-blog.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"How to Create a 3D Product Image for Your E-commerce Store With Cloudinary","datePublished":"2024-11-07T15:00:00+00:00","dateModified":"2025-10-30T20:42:44+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store"},"wordCount":13,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413225\/polycam_3D_to_Dimensions-blog\/polycam_3D_to_Dimensions-blog.jpg?_i=AA","keywords":["3D","E-commerce","Next.js"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store","url":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store","name":"How to Create a 3D Product Image for Your E-commerce Store With Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413225\/polycam_3D_to_Dimensions-blog\/polycam_3D_to_Dimensions-blog.jpg?_i=AA","datePublished":"2024-11-07T15:00:00+00:00","dateModified":"2025-10-30T20:42:44+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413225\/polycam_3D_to_Dimensions-blog\/polycam_3D_to_Dimensions-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413225\/polycam_3D_to_Dimensions-blog\/polycam_3D_to_Dimensions-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/3d-product-image-e-commerce-store#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a 3D Product Image for Your E-commerce Store With Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413225\/polycam_3D_to_Dimensions-blog\/polycam_3D_to_Dimensions-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=36280"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36280\/revisions"}],"predecessor-version":[{"id":39034,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36280\/revisions\/39034"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/36282"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=36280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=36280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=36280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
This component adds the base Dimensions library necessary for initialization. To ensure this happens as soon as possible, it\u2019s executed using the beforeInteractive<\/code> strategy<\/a>. The other script is used to render the actual 3D viewer.<\/p>\n