Using Environment

Environments or IBLs are a powerful feature of the A3D Viewer that allow you to set the background and lighting conditions for your 3D scenes. They can significantly enhance the visual quality of your models by providing realistic lighting and reflections.

The viewer provides a default studio environment that should work with most of the models.

Using Custom Environment

Preparing your environment file

If you want to use a custom environment, you can create your own. The Viewer supports loading environment maps in various formats, including HDR, EXR and ENV. As this viewer is built on top of Babylon.js, we recommend using the ENV format as it :

provides faster loading times compared to other formats within Babylon.js
can store additional metadata such as lighting direction for more precise shadows loading time

To create your ENV file, you can use the Babylon.js Environment Texture Tool here https://www.babylonjs.com/tools/ibl/

Using the environment in your scene

You can easily use custom environment this way :


<!-- The containing viewer, you can ref this to style it like the width/height -->
<a3d-viewer>
  <!-- The 3d mesh to display, replace src with your url -->
  <a3d-model
    src="https://cdn.substance3d.com/v2/files/public/SheenChair.glb"
  ></a3d-model>
  <a3d-environment
    visible
    src="https://cdn.substance3d.com/v2/files/public/Atelier1K.env"
  ></a3d-environment>
</a3d-viewer>