1. @threlte/extras
  2. Environment

@threlte/extras

Environment

Scene environment map implementation with included loaders and ground projected environment.

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


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