This quick start guide will take you through the steps needed to add the viewer to a webpage and display a 3D model. For more detailed information see the documentation page.
Open Ezyvue 3D editor. Click on the cube and choose the delete command from the Edit menu to delete it. From the File menu choose Import File and select a file on your computer. If your model has additional files choose Import Folder and select the root folder. The model will be loaded and displayed in the main window.
From the File menu 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 web server or file hosting service.
Go to the embed viewer tab and paste in the direct download file URLs into the relevant text boxes. Click the copy button and paste the code onto your webpage. Here is an example of a viewer iframe element:
<div style="width:100%"> <div style="position: relative;padding-top:80%"> <div style="position:absolute;left:0;right:0;top:0;bottom:0"> <iframe id="ezyvue-viewer" src="https://viewer.ezyvue.com?projectFile="https://www.mysite.com/project.zip"&sceneFile="https://www.mysite.com/project.glb" width="100%" height="100%" style="border:none;" frameborder="0" xr-spatial-tracking="true" autoplay allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen"> </iframe> </div> </div> </div>Run the example code on JSFiddle
Copy and paste the following HTML into the head section of your webpage:
<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 the viewer-3d element to the page and set the data-project-file and data-scene attributes to your direct download file links.
<viewer-3d style='width: 500px;height: 400px;' data-project-file="https://www.mysite.com/project.zip" data-scene-file="https://www.mysite.com/project.glb" />Run the example code on JSFiddle
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.
You can further enhance the look of your model using the editor - add lighting, shadows, edit materials, add effects and other features.