Promote your products online in 3D and Augmented Reality
David Long
Updated November 2023
With interactive 3D models, shoppers can experience a more interactive way of browsing your product range. Customers with AR devices such as smartphones can also try out a product in the home before purchasing it. With this step-by-step guide, you can embed the Ezyvue 3D viewer on a webpage and display a 3D model.
1. Import your model file into the 3D editor
Go to the editor page and click on the Open 3D editor button. You will be presented with a default project with a cube. Click on the cube and select the delete command on the Edit menu. Go to the file menu and select Import File. If your model file has additional files such as textures use the Import Directory option instead. Select a file or directory on your computer to import the model. The imported model will be displayed in the main viewport.
2. Save and publish the project
Save the project so that you can come back to it later. On the file menu choose Publish Project. Two files will be downloaded to your computer, a project zip file containing project settings and a glTF 3D model file. Upload these files to your server or public file hosting service.
4. Add the viewer on your webpage
The viewer is added to a web page as an HTML element and there are two different elements that can be used. If you are using a website builder such as Wix or Shopify the easiest way is to use an iframe element to embed the viewer. The iframe code can be easily generated and copied from the Embed Viewer tab in the 3D editor. You can also add a custom viewer-3d HTML element. To use this element you'll also have to include the Ezyvue Javascript and style files. For both elements, you'll need to specify the URLs of the zip and gltf files that you uploaded earlier.
Using the viewer-3d element
<!--copy and paste the following code into the document head section -->
<script src="https://cdn.jsdelivr.net/gh/ezyvue/src/v1.0/viewer.js" defer type='module'></script>
<link href="https://cdn.jsdelivr.net/gh/ezyvue/src/v1.0/viewer.css" rel="stylesheet" />
<!-- add a viewer-3d element in the document body -->
<viewer-3d data-project-file="https://www.mysite.com/myproject.zip" data-scene-file="https://www.mysite.com/myproject.glb"></viewer-3d>
Using an iframe
<!-- generate the iframe code from the 3D editor and paste onto your webpage or site builder page
<iframe id="ezyvue-viewer" src="https://viewer.ezyvue.com?projectFile="https://www.mysite.com/project.zip"&sceneFile="https://www.mysite.com/project.glb"
...additional attributes
</iframe>
5. Setting the viewer size
The viewer will take up 100% of the width and height of it's parent element which is unsuitable for most scenarios. For a fixed-sized viewer add width and height styles to the HTML element. To make the viewer more responsive on all devices, you can generate wrapper code to accomplish this. On the Embed Viewer tab in the 3D editor, tick the Include wrapper code checkbox. The Width and Aspect Ratio options will be shown. The wrapper code ensures that the viewer is responsive and the aspect ratio stays the same, regardless of the width chosen. You can also use the same wrapper code for a viewer-3d element, just replace the iframe element.
6. Preview your model
Preview or publish your site and you should see your 3D model rendered in the viewer.
7. Next Steps
You can enhance the look of your model in the 3D editor and edit lighting, object properties, environment properties, cameras and effects. You can also add features such as 3D text annotations, effects and product variants. View example projects on JSFiddle.