Download a copy of the Sunrise viewer JavaScript from https://www.adobe.com/go/sunriseviewer
Last updated on
Mar 19, 2024
Project Sunrise generates a 3D web viewer for every asset in a project. To share this viewer with customers, you will need access to modify JavaScript and HTML content on your chosen website.
To add a Sunrise 3D viewer to a website:
Note:
All files that need to be uploaded to your website, except the Sunrise viewer JavaScript, are included in the ZIP file for your project.
-
-
Upload the Sunrise viewer JavaScript file to your website.
-
Upload the Sunrise optimized model and configuration to your website. These files will be named <your-model-name>-web.glb and <your-model-name>-config.json.
-
If your model includes hotspots, upload the hotspots file to your website. The hotspots file is called <your-model-name>-hotspots.json.
-
Upload the IBL light source. This file can have different names but will be the only file with an HDR extension in your project.
-
On the page that you want to embed the 3D viewer, add the following HTML:
<divclass="sunrise-viewer"data-model-url="/path/to/your/model.glb"data-config-url="/path/to/your/config.json"data-ibl-url="/path/to/your/IBL.hdr"data-hotspot-url="/path/to/your/hotspots.json" // optional></div><div class="sunrise-viewer" data-model-url="/path/to/your/model.glb" data-config-url="/path/to/your/config.json" data-ibl-url="/path/to/your/IBL.hdr" data-hotspot-url="/path/to/your/hotspots.json" // optional > </div><div class="sunrise-viewer" data-model-url="/path/to/your/model.glb" data-config-url="/path/to/your/config.json" data-ibl-url="/path/to/your/IBL.hdr" data-hotspot-url="/path/to/your/hotspots.json" // optional > </div>
-
Import the Sunrise viewer JavaScript once per page:
<script src="Path/to/viewer.js" type="text/javascript"></script><script src="Path/to/viewer.js" type="text/javascript"></script><script src="Path/to/viewer.js" type="text/javascript"></script>
