Visody comes with a custom template post type that allows you to control all the settings for the 3D model view, including camera settings, model background, model rotation, lightning and more.
This template approach allows you to easily re-use templates for various models.
Viewer scene
Environment image
You can change your models lightning by uploading an HDR image. You can also choose to upload the HDR image elsewhere and link it using the URL field.
If you also want to display image as model viewer background, simply check the box “Use environment image as skybox”.
Exposure and shadows
You can also change values for shadow intensity, softness and lightning exposure values.
Viewer camera options
Next, you can change all camera options like initial camera position, target point, view limits and zoom limit.
The available settings are shown in the image above.
Getting the desired camera values using ModelViewer Editor
If you are struggling to get the right values, uploading your model to the modelviewer editor might help you get just the right values.
Simply head over to modelviewer.dev/editor and upload your glTF model in there.
Next, start customizing and playing with the generated values.
Initial camera position
To get the initial camera position, head over to the camera icon tab. Next, ensure the model is displayed as desired. Finally, hit the button “save current as initial”. You will now see two values pop up: the yaw and pitch values. Use these values as the X and Y of the initial camera settings.
The target point is listed underneath with the corresponding X, Y and Z values.
Customize camera limits
In the same panel, you can also check boxes to customize limits.
Finally, you can set a minimum zoom.
To get the desired value, you have to look into the generated code.
Look for an attribute called “min-field-of-view”. Use that value as your minimum zoom level. You can also pick your own min zoom level. Valid units are ‘%’, ‘m’ and ‘deg’.
When satisfied, head back over to the viewer template settings and enter the given values.
Now your product viewer should be identical to the model you have just edited.