- \n
- If you haven\u2019t already, create a free Cloudinary account<\/a>, which offers credits for storage, bandwidth, and transformations.<\/li>\n\n\n\n
- Compress the two 3D files\u2014in GLB, glTF<\/a>, or Glitz format; and any texture\u2014into a ZIP file and then upload it by taking either of these two steps:\n
- \n
- Drag and drop the file into your Media Library on Cloudinary, like this:
<\/li>\n\n\n\n - Programmatically upload the file with the SDK<\/a>. Specify `image` as the resource type (
resource_type<\/code>), like this:![\"uploading](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1425,h_750,c_scale\/f_auto,q_auto\/v1648163673\/1_uploading-3d-asset\/1_uploading-3d-asset.gif?_i=AA\")
<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\nconst<\/span> cloudinary = require<\/span>(\"cloudinary\"<\/span>);\n\ncloudinary.v2.uploader.upload(\n \"path\/to\/desk_lamp.zip\"<\/span>,\n { resource_type<\/span>: \"image\"<\/span> },\n (error, result) => {\n console<\/span>.log(result, error);\n }\n);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nUploading takes only a second or two. The Media library then displays the 3D asset\u2019s primary scene:<\/p>\n\n\n\n
![\"Selecting](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_608,c_scale\/f_auto,q_auto\/v1648163673\/2_newly-uploaded-file\/2_newly-uploaded-file.png?_i=AA\")
<\/figure>\n\n\n\nBuild a Webpage With Cloudinary\u2019s AR SDK<\/h2>\n\n\n\n
Next, build a webpage with Cloudinary\u2019s AR SDK\u2014a seamless process.<\/p>\n\n\n
Note:<\/strong>You can add 3D assets to apps so that consumers can interact with those images from a browser or bring the images to their environment on mobile devices through AR.<\/span><\/p>\n<\/div>\n\n\n
Here\u2019s what to do: Add the CDN script for the AR-3D viewer, which contains the
<ar-3d-viewer><\/code> component for use anywhere in your app, to an HTML file\u2019shead<\/code> section:<\/p>\n\n\n<head<\/span>><\/span>\n <script<\/span> src<\/span>=\"https:\/\/ar-3d-viewer.cloudinary.com\/main.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/head<\/span>><\/span>\n<body<\/span>><\/span><\/body<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n<html<\/span>><\/span>\n <head<\/span>><\/span>\n <script<\/span> src<\/span>=\"https:\/\/ar-3d-viewer.cloudinary.com\/main.js\"<\/span>><\/span><\/script<\/span>><\/span>\n <\/head<\/span>><\/span>\n <body<\/span>><\/span>\n <div<\/span>><\/span>\n <ar-3d-viewer<\/span> cloud<\/span>=\"YOUR_CLOUD_NAME\"<\/span> models<\/span>=\"MODEL_NAME\"<\/span>><\/span>\n <\/ar-3d-viewer<\/span>><\/span>\n <\/div<\/span>><\/span>\n <\/body<\/span>><\/span>\n<\/html<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nThe
cloud<\/code> parameter andmodels<\/code> property are the prerequisites for<ar-3d-viewer><\/code>. Add them by following the steps in the next two sections.<\/p>\n\n\n\nLocating the Value the
cloud<\/code> Parameter<\/h3>\n\n\n\nThe value for
cloud<\/code> is your Cloudinary account\u2019s cloud name<\/a>, set by you or by Cloudinary during registration and displayed in your dashboard\u2019s top-right corner. The cloud name for this tutorial iscloudinary_ar<\/code>.<\/p>\n\n\n\n![\"Location](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_608,c_scale\/f_auto,q_auto\/v1648163674\/3_cloud-name\/3_cloud-name.png?_i=AA\")
<\/figure>\n\n\n\nLocating the Value for the
models<\/code> Property<\/h3>\n\n\n\nThe value for
models<\/code> is the Cloudinary-assigned name of the 3D asset you uploaded.<\/p>\n\n\n\n![\"Choosing](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_608,c_scale\/f_auto,q_auto\/v1648163673\/4_model-name\/4_model-name.png?_i=AA\")
<\/figure>\n\n\n\nAdding
cloud<\/code> andmodels<\/code> toar-3d-viewer<\/code><\/h3>\n\n\n\nNow update the code with the values for
cloud<\/code> andmodels<\/code> underar-3d-viewer<\/code>:<\/p>\n\n\n<html<\/span>><\/span>\n <head<\/span>><\/span>\n <script<\/span> src<\/span>=\"https:\/\/ar-3d-viewer.cloudinary.com\/main.js\"<\/span>><\/span><\/script<\/span>><\/span>\n <\/head<\/span>><\/span>\n <body<\/span>><\/span>\n <div<\/span>><\/span>\n <ar-3d-viewer<\/span> cloud<\/span>=\"cloudinary_ar\"<\/span> models<\/span>=\"desk_lamp_mfon3q\"<\/span>><\/span>\n <\/ar-3d-viewer<\/span>><\/span>\n <\/div<\/span>><\/span>\n <\/body<\/span>><\/span>\n<\/html<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nRunning the above code in a browser displays the interactive 3D model (Koslov Maksim\u2019s low-poly desk lamp<\/a>). Clicking the View in AR <\/strong>button nearby generates a QR code for viewing the model on a mobile device.<\/p>\n\n\n\n
![\"First](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_574,c_scale\/f_auto,q_auto\/v1648163678\/5_first-output\/5_first-output.gif?_i=AA\")
<\/figure>\n\n\n\n
- Compress the two 3D files\u2014in GLB, glTF<\/a>, or Glitz format; and any texture\u2014into a ZIP file and then upload it by taking either of these two steps:\n
![\"Reactive](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_574,c_scale\/f_auto,q_auto\/v1648163687\/6_reactive-test\/6_reactive-test.gif?_i=AA\")
<\/figure>\n\n\n\n