Using the S3DS iframe
Introduction
Using the web component is the recommend way to integrate the S3DS viewer into your application as it allow powerful configuration and customization for a better experience.
However, we are still providing an integration for easy of use for simple project, tests, demo. It uses Spectrum as a designing framework and is fully responsive.
Note: This iframe is opinated and may not fit all use cases as we are providing a default navigation toolbar an AR integration. If you need more customization or more freedom when it comes to add more components, we are still recommended to use our web components.
Example
The minimal configuration to use the iframe is to include the model URL as a query parameter modelUrl in the iframe URL.
<iframe
src="https://viewer.s3d.adobe.io?modelUrl=https://cdn.substance3d.com/v2/files/public/SheenChair.glb"
></iframe>IFrame API
The iframe support a set of query parameters to configure the viewer.
Note: To keep things simple, some parameters that are accessible through web components are not available in the iframe. We are working to add more features to this iframe, if you have some demands, please let us know.
| Query Param | Default Value | Remark | Description | Options |
|---|---|---|---|---|
modelUrl | None | Required | URL to the 3D model to be displayed | Any valid URL |
loader | None | - | Loader to use with the model | glb, ply, obj, stl |
iblUrl | None | - | URL to the Image-Based Lighting (IBL) asset | Any valid URL |
iblVisible | false | - | Boolean to toggle the visibility of the IBL | true or false |
cameraOrbit | None | - | Overrides the default camera orbit, defined by alpha (longitudinal rotation), beta (latitudinal rotation), and radius (distance from target). | Three values separated by white space (alpha beta radius). Each value can either be auto or a numeric value (rotation in radians). For example: 3.14 auto 5 |
cameraTarget | None | - | Overrides the default camera target, defined by a x y z world space coordinate. | Three values separated by white space (x y z). Each value can either be auto or a numeric value (distance in world space). For example: auto 2 auto |