3D product viewer 3D editor Projects Camera controllers Selecting objects Transforming objects Deleting selected objects Undo/redo Viewing object properties Scene properties Text annotations Effects Project settings Preferences Embed viewer Product configurator builder

Documentation

Introduction

With the Ezyvue platform, you can display realistic models on your website in 3D and AR. The 3D Editor is an online tool that you can use to import assets, compose a scene, configure various settings, and export files for display in the 3D product viewer.

3D Product Viewer

The 3D product viewer encapsulates 3D, AR, and VR technologies in a single web application which can be added to a webpage as a single HTML element. For e-commerce, it provides engaging and practical ways for consumers to experience and try out brands online.

Adding the viewer to your website

Use the 3D editor to import your 3D file, configure the settings, and publish the project. Publishing the project will download two files to your computer, a 3D file and a project settings file. Upload the files to your web server or file hosting service and copy the direct URLs of these files. See the Project section of the 3D editor for more detailed information.

Adding the viewer to a web page using an iframe HTML element

Creating an iframe element for the viewer is relatively easy and can be done from the Embed tab in the 3D editor. See the Embed documentation for more information. Once you've copied the embed code simply paste it onto your web page and publish.

<iframe id="ezyvue-viewer"
    src="https://viewer.ezyvue.com?projectFile=https://myfiles.com/project.zip&sceneFile=https://myfiles.com/3d.glb&showStartButton&animateStartButton"
 width="100%" height="100%" style="border:none; " frameborder="0" xr-spatial-tracking="true"
 autoplay allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"
 allow="fullscreen"></iframe>

Run the demo code on JSFiddle

iframe element attributes

src*	The following url: https://viewer.ezyvue.com
projectFile*	The URL of your project file (.zip)
sceneFile*	The URL of your 3D file (.glb)
usdzFile	The URL of the 3D for Apple devices (.usdz)
loadingImage	The URL of an image displayed during loading
showStartButton	Show the start button
animateStartButton	Animate the start button

* required attributes

Adding the viewer to a web page using the viewer-3d HTML element

Here is an example of an HTML page with the viewer element and a link to the viewer script code:

<!doctype html>
<html>
<head lang='en'>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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" />
</head>
<body>
<viewer-3d style='width: 500px;height: 400px;' data-start-button data-project-file="https://raw.githubusercontent.com/ezyvue/files/main/camera.zip" data-scene-file="https://raw.githubusercontent.com/ezyvue/files/main/camera.glb" />
 </body>
</html>

Run the example code on JSFiddle

CDN urls (version 1.0)

    Javascript:     https://cdn.jsdelivr.net/gh/ezyvue/src/v1.0/viewer.js
    CSS:            https://cdn.jsdelivr.net/gh/ezyvue/src/v1.0/viewer.css

Viewer element attributes

data-project-file*	The URL of your project file (.zip)
data-scene-file*	The URl of your 3d file (.glb)
data-usdz-file	The URL of the 3d for Apple devices (.usdz)
data-start-button	Show the start button
data-animate-start-button	Animate the start button

* required attributes

React applications

Here is a simple React class component for the viewer which renders a div element. In the componentDidMount a reference to the element is passed createViewer() function.

    import React from "react"
    import {createViewer} from "viewer-es.js" 
    // download the javascript code from  https://cdn.jsdelivr.net/gh/ezyvue/src/v1.0/viewer.js
    // and add /*eslint-disable*/ to the first line of the file 

    export default class Viewer extends React.Component {
        constructor() {
            super();
    
            this.elemRef = React.createRef();
        }
        
        componentDidMount() {
            createViewer(this.elemRef.current);
        }
    
        render() {
            return (
                <div ref={this.elemRef}  
                    style={this.props.style} 
                    data-project-file={this.props.projectFile}
                    data-scene-file={this.props.sceneFile} 
                    data-start-button 
                    data-animate-start-button >    
                </div>
            )
        }
    }

Vue applications

Example coming soon.

Angular applications

Example coming soon.

Augmented reality (AR)

Ezyvue 3D Editor

Ezyvue 3D Editor is a web application for building and configuring 3D scenes for the 3D product viewer.

Projects

A project is a container for settings and assets created in the 3D Editor.

Publishing a project

When you are ready to display the scene in the viewer Publish the project from the File menu.
Two files will be downloaded to your computer:

.zip file - this holds the project settings file and any other assets.
.glb file - the 3D scene saved as a self-contained binary glTF file.

For Apple devices you'll also need to convert the .glb file to a .usdz file if AR is to be used. You can use Apose online converter (https://products.aspose.app/3d/conversion/gltf-to-usdz) to do this.

Obtaining direct download urls

If you are embedding the viewer as an iframe element on a website builder such as Wix, upload the files to a file hosting service and obtain direct download URLs to the files.

Dropbox

Click the Copy Link Button next to the file. Paste the link and change the dl parameter from dl=0 to dl=1.

Box

At the bottom of the shared link settings pop-up, you will find a direct link to your file.

Google Cloud Storage

Give your bucket public access by following this guide. Click on a file and copy the Public URL in the Overview section.

Google Drive

Unfortunately Google Drive links do not contain the file name and cannot be used with the viewer.

Amazon S3

The direct url format is http://YourBucketName.s3.amazonaws.com/YourFileName. Ensure that public permissions are set so that anyone can access the file.

Importing and exporting scenes

To import a single 3D file, select Import File on the file menu and choose the file on your computer.
To import a 3D file that has additional files such as textures select Import Directory on the File Menu and select the directory containing the 3D file.
You can import files in the following formats:

.glTF & .glb (GL Transmission Format)
3dm (Rhino)
3ds (3D Studio)
3mf (3D manufacturing format)
amf (Additive manufacturing file format)
dae (Collada)
drc (Draco Compressed)
fbx (Autodesk)
ifc (Industrial Foundation Classes)
kmz (Google Keyhole Markup Language zip)
ldr (LDraw)
obj (Wavefront)
pcd (Point Cloud Data)
ply (Polygon File Format)
stl (Stereolithography)
svg (Vector Graphics)
usdz (Apple, Pixar)
vox (Voxel)
vtk,vtp (Visualization Toolkit)
wrl (Virtual Reality Modeling Language)
xyz (Point Ccloud Data)

You can export a scene to a binary glTF format (.glb) by selecting Export Glb File from the file menu.

Camera controllers

Selecting the controller

To select a controller click the Camera Controller tab and select a controller from the dropdown menu.
NOTE: The selected controller will be used by the viewer when the project is published.

Orbit controller

The orbit controller is best suited for viewing a scene from various angles. The camera can be rotated around the model, moved in and out, and panned around.

Controls

Orbit around
Move in/out
Pan

Mouse
Mouse wheel
Mouse + CTRL

Controller Properties

The controller properties can be viewed and changed from the Camera Controller tab.

Minimum distance

The minimum distance the camera can be moved to the target.

Maximum distance

The maximum distance the camera can be moved from the target.

Minimum polar angle

The minimum camera elevation.

Maximum polar angle

The maximum camera elevation.

Viewer Camera Position

Set the initial camera state when the viewer loads

First-person controller

The first-person camera provides a way to move around the scene in a similar way to a video game character.

Controls

Look around
Forward/back
Left/right
Up/down

Mouse
W/S or virtual joystick
A/D or virtual joystick
R/F

Controller Properties

The controller properties can be viewed and changed from the Camera Controller tab.

Move Speed

The forward speed of the camera.

Viewer Camera Position

Set the initial camera state when the viewer loads

Selecting objects

Objects can be selected by clicking on the object in the 3D viewport or selecting a node in the Scene Graph window.
Most objects consist of a hierarchy of nodes and selecting an object in the 3D viewport will only select the Mesh node.
To select the entire object use the Scene Graph.

To deselect an object click anywhere in the viewport background.

NOTE: Currently lights can only be selected in the Scene Graph window

Transforming objects

Objects can be moved around, rotated and scaled using the 3D viewport gizmos or using the text inputs in the object properties window.

Using the viewport gizmos

A viewport gizmo will appear whenever an object is selected. You can select the gizmo to use from the edit menu or using a shortcut key:

1 - Translate
2 - Rotate
3 - Scale

Translating an object

To move the selected object along an axis, click on an axis arrow and move the mouse.
To move the selected object around a plane, click on one of the squares near the center of the Gizmo and move the mouse.
To move the object freely in any direction, click the diamond shape at the center of the gizmo and move the mouse.

Rotating an object

To move the selected object along an axis, click on an axis and move the object along the line shown.
To move the selected object around a plane, click on one of the squares near the center of the Gizmo and move using the mouse.
To move the object freely in any direction, click the diamond shape at the center of the gizmo and move around using the mouse.

Scaling an object

To scale the selected object along an axis, click on an axis cube and move the mouse.
To scale the selected object around a plane, click on one of the squares near the center of the Gizmo and move the mouse.
To scale the object freely in any direction, click the cube at the center of the gizmo and move the mouse.

Deleting a selected object

Use the Delete option in the Edit menu or hit the Del key.

Undo & redo

To undo the last action press CTRL+z or select Undo on the Edit Menu
To redo the last action press CTRL+y or select Redo on the Edit Menu

Viewing object properties

When an object is selected the properties will be displayed in the Object Properties tab.

Common properties

Object Name

Edit the object name

Position

Edit the position x,y,z components

Rotation

Edit the rotation x,y,z components (in degrees)

Scale

Edit the scale x,y,z components

UUID

Universally Unique IDentifier

Casts a Shadow

When selected the object is rendered into a shadow map

Receives Shadows

When selected this object receives a shadow map

Animations

To view and play animations select the topmost node of the mdoel in the Scene Graph window and click on the Object Properties tab. If a model has animations an Animations window will be displayed listing each animation.

Playing an animation

Click the play button to start an animation.

Stopping an animation

Click the square stop button to stop an animation.

Loop an animation

Toggle the loop button before playing.

Mesh properties

Material Properties

Diffuse Color

Select a color using the color input

Emmisive color

Select a color using the color input

Roughness

Change the material from shiny to rough

Metalness

Increasing the value makes the material more metallic

Transparent

Turn transparency on/off

Opacity

Change material from transparent to opaque

Depth Test

Turn depth testing on/off

Depth Writes

Turn depth writes on/off

Maps

To upload a texture map click on a box.
To remove a texture click the cross next to the box.

Light properties

Select a light from the Scene Graph window

Point Lights

Position

Change the position of the light using the translation Gizmo

Color

Select the color by clicking on the color input

Intensity

Directional Lights

Direction

Change the direction of the light using the rotation Gizmo

Color

Select the color by clicking on the color input

Intensity

Enter a value to change the brightness

Spot Lights

Position

Change the position of the light using the translation Gizmo

Direction

Change the direction of the light using the rotation Gizmo

Color

Select the color by clicking on the color input

Intensity

Enter a value to change the brightness

Spot Angle

Enter a value to change the spotlight cone angle

Scene properties

Scene graph window

The scene graph window displays the scene as a hierarchical structure of nodes.
Each node in the scene graph represents an object in the scene.
You can click on a node to select it and expand to view child nodes.

Environment map

HDR Environment maps are used on scenes to simulate reflections and lighting in a very realistic way.

Where to find HDR maps

There are many resources on the web where you can download free HDR maps.

These files can be quite large so it's recommended to scale them down using an image application such as GIMP, to avoid slow download times in the viewer.
Here are some links to popular download sites:

Poly Haven
HDRIHaven
HDRMAPS

Uploading a HDR Map

Click the HDR image button to select and upload an image from your computer.

Background

Color

Select the color by clicking on the color input

Gradient

Select the primary and secondary colors by clicking on the color inputs

Transparent

When set the background element style will be used.

Reflection plane

Add a realistic ground reflection effect with a reflection plane
NOTE: To see the effect click the preview checkbox

Properties

Enable/disable

Show/hide the reflection plane

Fade Depth

Change the amount the reflection fades out

Color

Select the reflection color by clicking on the color input

Opacity

Change the transparency of the reflection plane

Blur

Change the roughness of the reflection surface.

Fog

Enable/disable

Turn fog on/

Exponential Fog

A formula is used to calculate the fog density

Density

Change the value to increase or decrease the fog effect

Color

Select the color by clicking on the color input

Linear Fog

The fog density increases linearly between the near and far distance

Fog Near

Set the distance at which fog starts

Fog Far

Set the distance at which the fog ends

Fog Color

Select the color by clicking on the color input

Lighting properties

Shadows

Real-time shadows greatly improve depth perception and realism within a 3D scene.

Enabled

Turn shadows on/off

Bias

Use shadow bias to reduce artifacts between shadows and objects which commonly manifest as gaps

Shadow plane

A shadow plane can be used to produce ground shadows if there is no ground mesh in the scene to cast a shadow onto

Properties

Turn the shadow plane on/off

Lightness

Shadow light rotation

Shadow light elevation

Baked shadows

Baked shadows provide a softer shadow than normal ground shadows and require less processing power which makes them suitable for mobile devices.
NOTE: select an object to see the baked shadow controls.

Adding a baked shadow

Click the add icon to add a baked shadow to a selected object

Removing a baked shadow

Click the minus icon to remove a baked shadow

Refreshing a baked shadow

When an object is moved, translated, or scaled the baked shadow can be redrawn by clicking the refresh icon.

Properties

Softness

Change the softness of shadow edges

Lightness

Change the lightness of the shadow

Depth

The depth determines how much of the mesh contributes to the shadow

Ambient light

Properties

Brightness

Control the overall brightness of the scene

Color

Select the color by clicking on the color input

3D text annotations

Text annotations allow you to give information about and focus on specific parts of the scene.
When a user clicks on a button, the camera brings the button in focus and displays a text box.

Properties

Occlusion test

When occlusion is on, buttons behind mesh geometry will be made semi-transparent

Show Nav buttons

Show next/previous buttons in the viewer

Button properties

Size

The diameter of the button in pixels

Text color

The button text color

Flll color

Select the background color by clicking on the color input

Border color

Select the border color by clicking on the color input

Add an annotation

To add annotation click on the Add button, move the camera to the desired viewing position, and click on the model to place the annotation at that point.

Button text

The button number

Label text

Enter a description for the label

Editing annotations

To edit an annotation click on the annotation to select it.
The button and label text can be edited from the object properties tab.

Effects

Properties

Add bloom and camera depth of field post-processing effects.

NOTE: to see the effects click the preview check box.

Bloom

Bloom is a simulated camera effect that enhances bright, illuminated or shiny parts of a model.

NOTE: The background should be relatively dark to prevent the effect from over-brighting it.

Properties

Enabled

Turn effect on/off

Strength

The intensity of the effect

Threshold

Determines the pixel brightness cut-off for the effect

Radius

How much of the bloom radiates out

Depth of field

Depth of field reproduces camera out-of-focus effects.

Enabled

Turn effect on/off

Focus

The distance from the camera that image pixels are in focus

Focal length

Blur

How much out-of-focus pixels are blurred

Gemstone effect

This effect simulates the reflection of gemstones using an environment map. Using this effect you can display realistic jewelry on your online store. It can be even more effective when used in conjunction with a bloom effect.

The environment map is applied to all materials in the scene that have a specific pattern in the material name. For each material in the scene that you want the effect to be applied to, change the name so it contains the word 'gemstone'. For example, the material could be named Gemstone_1 or gemstone. This can be done from the material section of the Object Properties tab when a mesh is selected.

To apply an image, click on the Environment map image to select an image from your computer. You can download a free image here. If you change a material you can re-apply the effect using the Refresh button.

Environment Map

Select an image to use as an environment map (cube map).

Refresh

Re-apply the effect to target materials.

Project settings

General settings

Title

Enter a title to be shown in the viewer info window and also in the AR app

Description

Enter a description to be shown in the viewer info window

Project Image

Click Capture Image to capture an image from the camera. Right-click and select Save image as... to save to disk.

Viewer settings

Auto-rotate

Enable

When enabled the scene will automatically rotate when the viewer is loaded.

Menus

Show Options

Show/hide the options menu

Show Help

Show/hide the help menu

Show Info

Show/hide the info menu

AR Settings

Enable AR

Show the AR button

Note: on Apple devices provide a direct link to a USDZ file in the viewer-3d or iframe element.

Use WebAR

Turn on WebAR. WebAR runs in the browser and doesn't require a separate app (and additional load of the 3D file). However, on Apple devices, it requires the WebXR Viewer from the App Store.

Model root node

When using WebAR set the value to the name of the root node of the model in the scene to be displayed.
(The root node is the topmost node for the model in the scene). Set the name of the node in the scene if it is blank.

NOTE: If this is not set, the root node of the entire scene will be used, almost certainly resulting in incorrect positioning of the model in AR Mode.

Dimensions Tool

The dimensions tool shows the dimensions of the bounding box of the model.

Show

When clicked the Dimensions Tool option will be added to Options Menu.

Animations

Start Animation

Enter the name of the animation to be played when the viewer loads.

Loop Start Animation

If selected the start animation will loop continuously.

Preferences

Grid

Show

Turn the grid on/off

Size

Dimensions of the grid

Divisions

Number of grid divisions

Line color

Select the color from the color input control

Centerline color

Select the color from the color input control

Embed viewer

This tab allows you to build a viewer <iframe> element for embedding on a web page.

Project File URL

Direct link to a project file (.zip).

Scene File URL

Direct link to a scene file (.glb).

Loading image URL

Direct link to an image displayed in the viewer background before and during loading.

Show start button

Show the start button or start loading immediately.

Animate start button

Animate the start button from left to right.

Include wrapper code

Select to include wrapper code which maintains a particular aspect ratio of the viewer.

Width

The width of the viewer.

Aspect Ratio

Set the aspect ratio (width/height) of the viewer

Product configurator builder

A product configurator allows users to personalize a 3d model in the viewer by selecting from available material, color and texture options. Using the builder you can create selectable parts and variants that allow you to display available options without loading another mesh. As you create these components a customizable user interface is constructed for you.

Parts

A Part represents a customizable part of a model, for example a Nike trainer will have separate heel, toe, tongue parts etc. each with it's own set of material and color variations. A part will have one or more mesh materials. When you have added a new part you can select the mesh materials that will be used for the part.

Variants

A variant represents a single color or material variation of a particular part. Each variant may also have a number of color variations. For example for a particular fabric variant you may have a number of color options. When a variant is selected, each variant property is copied to the corresponding mesh material property, changing the mesh appearance.

Rules

Rules determine what part and variant combinations are allowed.

General settings

Show control

Select to show the configurator panel in the editor and in the 3D product viewer.

Fixed panel height

When checked the configurator panel height is fixed to the chosen height. When unchecked the panel height will fit the panel contents and may vary.

Panel height

Set the fixed panel height.

Icon size

Change the color icon size.

Icon roundness

Change the color icon corner roundness.

Title

Set the title at the top of the panel.

Parts

Add a new part

Click the Add Part button to add a new empty part.

Delete a part

Click the bin icon to delete the part. You can undo the operation from the Edit menu.

Edit a part

Click the pencil icon to open the Part Editor.

Part editor

Add materials

Click the Add Materials button and select materials to use for this part in the dialog box.

Remove a material

Click the bin icon next to the material to remove it.

Add a variant

Click the Add Variant button to add a new variant.

Delete a variant

Click the bin icon in the variant properties.

Variant properties

Name

The name of the variant

Icon Color

The fill color of the icon

Variant material properties

Diffuse color

diffuse material color

Emissive color

Setting the emissive to any color other than black will make the material glow.

Transparent

Make the material transparent/opaque.

Opacity

Controls how opaque the material is.

Roughness

Roughness/shininess of the material

Metalness

Increasing the value makes the material more metallic in appearance.

Diffuse Map

Base color texture map.

Normal Map

Adds the appearance of surface detail to an object.

AO Map

Baked-in ambient occulsion.

Displacement map

Like the normal map, it adds surface detail but generates actual surface geometery.

Displacement map scale

Scales the overall displacement.

Roughness map

Controls the roughness over the mesh surface.

Metalness map

Controls the metalness over the mesh surface.

U Repeat

The number of times the texture is repeated in the horizontal direction.

V Repeat

The number of times the texture is repeated in the vertical direction.

Colors

Add a new color

Click the Add Color button to add a new color

Delete a color

Click the bin icon to delete a color.

Color properties

Diffuse Color

The diffuse color overrides the material's diffuse color.

Name

The name of the color which is displayed when selected.