The Cloudinary 3D tag is a JS snippet that can be added to a page to easily embed Cloudinary 3D assets using HTML and/or Javascript code.
Follow these steps:
Include the script tag in your HTML:
<script src="https://dimensions-tag.cloudinary.com/<version>/all.js"></script>
Replace the '<version>' part with the desired Tag version. You can see the current latest: here.
Initialize the tag:
const d8sApi = initDimensions({
cloudName: "<my-cloud-name>", //replace with your cloud name!
viewers: ["IMAGE", "VIDEO", "3D"],
});Replace the cloudName value with your cloud name. You can copy the value from the Cloudinary Dashboard under Product Environment.
The Viewers array tells which types of assets you’d like to include on the page. If you add “3D”, make sure also to include the Cloudinary 3D Viewer script:
<script src="https://dimensions-3d-viewer.cloudinary.com/<version>/all.js"></script>
Replace the '<version>' part with the desired Viewer version. You can see the current latest: here.
Once loaded, the Tag will scan your HTML for containers that should display the images/videos/3d-viewer. Learn how to embed those using simple markup in this article.