@threlte/extras
Environment
Scene environment map implementation with included loaders and ground projected environment.
Usage
Pass absolute path to path. For example, if you are using sveltekit and you put your files in static/envmap/hdr then path will be /envmap/hdr/
The component decides whether to use cubic or equirectangular map based on the files prop. Provide a string array for cubic or a string for equirectangular.
Currently supported formats are 'ldr' (.jpg, .png, etc.) and 'hdr' .hdr. Format is inferred based on file extension but it can be provided in format prop.
isBackground prop controls if environment is set as the background of scene. This is not related to GroundProjection which produces a faux background effect by creating a spherical object textured by the provided environment.
<!-- Cubic jpg envmap -->
<Environment
path = '/envmap/bridge_cube/'
files= {['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg']}
isBackground={true}
format="ldr"
groundProjection={{ radius: 200, height: 5, scale: {x: 100, y: 100, z: 100}}}
/>
<!-- Equirectangular jpg envmap -->
<Environment
path = '/envmap/'
files='pisa_1k.jpg'
isBackground={true}
/>
<!-- Cubic hdr envmap -->
<Environment
path = '/envmap/pisaHdr/'
files={[['px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr']]}
isBackground={true}
groundProjection={{ radius: 200, height: 5, scale: {x: 100,y: 100,z: 100} }}
/>
<!-- Equirectangular hdr envmap -->
<Environment
path = '/envmap/'
files='shanghai_riverside_1k.hdr'
isBackground={true}
format="hdr"
groundProjection={{ radius: 200, height: 5, scale: {x: 100,y: 100,z: 100} }}
/>
Properties
// required
files: string | string[] = ''
// optional
format: 'ldr' | 'hdr' = undefined
path: string | undefined = undefined
isBackground: boolean = undefined
groundProjection: {
radius: number
height: number
scale: Scale
} = undefined
encoding: THREE.TextureEncoding = undefined