We have multiple implementation options for real-time 3D viewer and AR, but let’s start with creating an embed.
Creating Embeds
Embeds are created automatically if 3D files are delivered by CGTrader. After Modeling Request is finished, a product with the same Title and SKU can be found in the Assets section.
Embeds can also be created manually by clicking on the + New Embed button:
Once the button is clicked embed creation guide will open. Please read carefully the instructions in the opened modal. There will be 4 steps:
Step 1
Please give a descriptive name of the embed. This name is only important for SEO reasons.
Step 2
Select embed type. You can select multiple if needed. Multiple types are necessary if you want to have different options on the same page.
Step 3
Select or upload required files. Generally, for the 3D viewer, you’ll need a glb (or glTF read more about the difference here) file, a usdz, and a preview image. For a 360HD rotator, you’ll need a sequence of images that each have a naming suffix like 0001, 0002, ..., etc.
Step 4
The final step is to preview if the 3D viewer or 360HD rotator is behaving as intended, adjust any settings if needed and save and publish the embed. Publishing the embed generates a link to CDN. It is needed for fast and reliable delivery of your embed.
Now you should see your new Embed created in the right sidebar:
Copying Embed Codes in Modelry
So you have your embed created now how do you integrate it into your website? There are two ways, but one is significantly better than the other. Let's start with the recommended.
Adding script tag
We recommend going with the script tag as it has some benefits:
We automatically include metadata so you don't need to do that manually.
It allows us to deliver new features without any need for you to update the implementation.
A more complicated implementations like wrapping content on your page or having View in my Room button are only available using script tag
To get the script click on the three vertical dots right next to the embed and click on the Copy Embed Code option or Embed options to open the following modal:
You should see modal like the one below:
And the embed code should look like the following. Note that in this case we will be embedding inline 3D viewer and also a View in my Room button:
<script>
(function(ar,s,e,n,a,l){
ar.arsenal=[{
uid: '1044358096',
user: 'fatboy',
target: '.embed-viewer',
viewer: '3D',
gltf: '104435.gltf',
usdz: '104435.usdz',
preview: 'preview.png',
name: 'Paletti Composition01 AR PLP',
token: 'DtfzFsCTnPzijFRNW89A4SEA'
}, {
uid: '1044358096',
user: 'fatboy',
target: '#embed-button',
viewer: 'Button',
gltf: '104435.gltf',
usdz: '104435.usdz',
preview: 'preview.png',
name: 'Paletti Composition01 AR PLP',
token: 'DtfzFsCTnPzijFRNW89A4SEA'
}];
a=s.querySelector('body');
l=s.createElement('script');
l.async=1;
l.src=e+'@1';
a.appendChild(l);
})(window,document,'https://unpkg.com/cgloader');
</script>
<div class="embed-viewer"></div>
<div id="embed-button"></div>
Target elements for the content to appear can be edited by clicking on Show Advanced Settings:
Take a look at this example of the above code in action: