Quick Start Guide

At a glance

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.

Step 1. Import a 3D model file into the editor

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.

Step 2. Save and publish the project

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.

Step 3. Add the viewer HTML element

The viewer is added to a webpage 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 simplest way to add the viewer is to embed it as an iframe element. The iframe code can be easily generated and copied from the Embed Viewer tab in the 3D editor. You can also use a custom viewer-3d element. To use this element 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. View the Projects section in the documentation for a guide on obtaining direct download urls of files for common file hosting services.

Using an iframe element

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>

Using a viewer-3d element

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" />
                                

<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"  />
                           

Step 4. Set 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.

Next Steps

You can further enhance the look of your model using the editor - add lighting, shadows, edit materials, add effects and other features.

View the examples on JSFiddle

Need help?

View the documentation
Contact tech support