Display products in 3D and AR on your website
David Long
4th April 2023
With interactive 3D content your customers can experience a more dynamic and interactive way of browsing your product range. A 3D Viewer lets your customers interact with a realistic 3D model of a product and rotate it and zoom in for more detail. 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'll be able to embed the Ezyvue 3D viewer a webpage and display a 3D model.
1. Create a free account
Go the pricing page and sign up for the free account. Click on the link in the email sent to you to activate your account and you're ready to login.
2. Create a new project and upload a 3D model
From the Project menu select New Project. Fill in the name and description and select a single file or a directory if the 3D model has additional asset files such as textures. If your model file format isn't supported you can use an online file converter such as Aspose or export it as a glTF file from your modeling software. Hit the Submit button and a new project will be created which can be viewed on the Manage Projects page.
3. Preview the file
On the Manage Projects page, click the eye icon next to the project to preview the model. The preview screen background shows a placeholder image, this can be changed to an image of the model using Ezyvue Studio as we'll see later.
4. Embed the viewer on your webpage
Go to the Integrate Viewer page from the main menu, select the project, click the copy button below the Html Code window, and paste into your page code. When you update your website you should see the viewer appear.
5. Configuring the scene using Ezyvue Studio
Ezyvue Studio allows you to configure scene settings for shadows, reflections, lighting, environment, materials, and the camera. You can also use it to add features such as personalization and text annotations.
The loading image for the viewer is only a placeholder, to change this load the Ezyvue Studio by clicking the edit button (pencil icon) next to the project on the Manage Products page. When the model loads you'll notice the grid is visible, we don't want this in the image, so click the viewport tab (square icon) and untick the grid checkbox. Next, click the General Settings tab (the gear icon) and adjust the camera in the main viewport then click the Take Snapshot button.
To find out more about the viewer and scene settings visit the Help Center.