On this page we are going to cover all the 3D viewer settings you can control in the Staggs product configurator plugin for WordPress and WooCommerce. Version 1.x The options are located in the main “Appearance” tab of your configurator theme If you don’t have a theme set up yet, make sure to create one first. With the theme in place, let’s start customizing the 3D model view. Open up your theme and make sure the “Appearance” tab is active. Version 2.x The options are located in the “Gallery” tab. If you don’t have a template yet, create a new one in Staggs -> Templates. Make sure to select the template in the configurator builder as well. To view the 3D settings, make sure you also set Configurator Type to “3D model“:
To set the default 3D model view position, activate the option “Customize initial viewpoint” Head over to the ModelViewer Editor, upload your 3D model and open up the camera tab.
Next, move and zoom your model into the desired position. When your model is positioned perfectly, you can now read the values from the highlighted area. Look for the camera-orbit text and copy the value into the first 3 fields: horizontal camera, vertical camera, model zoom Finally, look for field-of-view text and copy the value to the last field: model view Save the theme. Now the configurator should load the 3D model in the exact same position Set initial camera target
You can also get the model target values from the ModelViewer. In the same camera tab, look for Target Point:
Enter each of the 3 values into the 3 settings. X = horizontal, Y = vertical and Z = zoom So in this case the target point will be: Horizontal: 0.10m; Vertical: 0.12m Zoom: 0.11m Customize shadow Next, we can set the intensity of the shadow (brightness) and the softness of the shadow (when the blur starts)
For intensity, enter any value between 0.00 and 2.00 For softness, enter value between 0.00 and 1.00 Limit 3D model view
You can also limit the 3D view settings. As a result, the customer cannot rotate the 3D model fully, allowing you to hide certain parts of the 3D model. You can for example hide the bottom, or the back side of the model To set the viewer limits, head back over to the ModelViewer editor and open up the camera tab. Locate the Customize limits and play around with the values.
When you are satisfied with the result, head back over to your Configurator theme and enter the corresponding values into the designated fields Just enter numeric values. Auto rotation You can also let the model rotate itself. To do this, you need to enable the option auto rotate
Additionally, you can set the auto rotation delay. This is the amount of milliseconds before the model starts rotating. Enter 5000 if you want to start after 5 seconds. You can also control the speed. Default is 100%. If you want the model to rotate in reverse order, make sure to use negative value: -100%. Environment (background) image You can also set an environment image to show the model in an environment. This is an HDR image which you can also use to control the lightning effects (dark, light, bright, neutral, etc) Version 2.x: the background settings are located in the “Gallery background” tab
Enter a full URL to the HDR image. You can choose to upload HDR images into WordPress, or use another online hosting platform to place your HDR images on The location has to be publicly accessible By default the environment image will not show up in the viewer. Only the lightning effects will be applied If you also want to show the environment image as background, make sure to check the box “Display environment background image” Finally, you can control the environment exposure. The expose tells how much of the environment image should be applied onto the model Enter a value between 0 (complete dark) and 2 (full brightness) AR support Finally, you can allow customers to view the model in their own room. This feature is available to compatible modern mobile devices.
There are a few options you can control: Customize the mobile AR button text Disable zoom of the 3D model in AR mode Control AR model placement (place on floor or stick to wall) Display AR icon on desktop to inform users AR mode is available on mobile device