a3d-environment
Description
Description
The a3d-environment adds an environment map. The purpose of en environment map is to provide a global illumination for your 3D mesh. a3d-environment accepts a url to an environment file (.env) in its src attribute.
Installation
Using npm :
npm install @a3d-viewer/viewerImporting the a3d-environment :
import '@a3d-viewer/viewer'Usage
To update your environment map just a3d-environment as a direct child of the a3d-viewer. The a3d-environment should at least have the src attribute pointing to your environment file.
<a3d-viewer>
<a3d-environment src="URL_TO_ENV_FILE"></a3d-environment>
<!-- .... -->
</a3d-viewer>Attributes
src
The src attribute indicates the source url of your environment file.
<a3d-viewer>
<a3d-environment src="URL_TO_ENV_FILE"></a3d-environment>
<!-- .... -->
</a3d-viewer>visible
The visible attribute sets the environment map visible in background.
<a3d-viewer>
<a3d-environment
id="myEnvMap"
src="URL_TO_ENV_FILE"
visible
></a3d-environment>
<!-- .... -->
</a3d-viewer>
<script>
const envMap = document.querySelector('#myEnvMap')
envMap.visible = true
</script>blur-level
The blur-level attribute blurs the environment map. Value starts at 0 (not blurred) and max value is 1. Default value is 0.
<a3d-viewer>
<a3d-environment
id="myEnvMap"
src="URL_TO_ENV_FILE"
visible
blur-level="0.1"
></a3d-environment>
<!-- .... -->
</a3d-viewer>
<script>
const envMap = document.querySelector('#myEnvMap')
envMap.blurLevel = 0.3
</script>rotation-y
The rotation-y attribute rotates the environment map on the Y axis in radians. Value starts at 0 and max is 2 * Pi. Default value is 0.
<a3d-viewer>
<a3d-environment
id="myEnvMap"
src="URL_TO_ENV_FILE"
rotation-y="0.5"
></a3d-environment>
<!-- .... -->
</a3d-viewer>
<script>
const envMap = document.querySelector('#myEnvMap')
envMap.rotationY = 0.3
</script>intensity
The intensity attribute sets the intensity of the environment map. Value starts at 0 (black environment) and does not have a max value but it starts to be very bright at 5 and above.
Default value is 1.
<a3d-viewer>
<a3d-environment
id="myEnvMap"
src="URL_TO_ENV_FILE"
intensity="2"
></a3d-environment>
<!-- .... -->
</a3d-viewer>
<script>
const envMap = document.querySelector('#myEnvMap')
envMap.intensity = 1.5
</script>