threlte logo
@threlte/extras

<Sky>

This component adds a Three.js Sky object to the scene, renders that on-demand to a cubemap which is assigned to the default scene as the environment map.

<script lang="ts">
  import { Pane, Slider, Checkbox, Button, Folder } from 'svelte-tweakpane-ui'
  import { Canvas } from '@threlte/core'
  import { Sky } from '@threlte/extras'
  import { spring } from 'svelte/motion'
  import Scene from './Scene.svelte'

  const presets = {
    sunset: {
      turbidity: 10,
      rayleigh: 3,
      azimuth: 180,
      elevation: 0.5,
      mieCoefficient: 0.005,
      mieDirectionalG: 0.7,
      exposure: 0.37
    },
    noon: {
      turbidity: 0.65,
      rayleigh: 0.17,
      azimuth: 180,
      elevation: 85,
      mieCoefficient: 0.013,
      mieDirectionalG: 0.7,
      exposure: 1
    },
    afternoon: {
      turbidity: 4.78,
      rayleigh: 0.3,
      azimuth: 180,
      elevation: 30,
      mieCoefficient: 0.002,
      mieDirectionalG: 0.86,
      exposure: 0.65
    },
    night: {
      turbidity: 20,
      rayleigh: 0.57,
      azimuth: 180,
      elevation: -5,
      mieCoefficient: 0.038,
      mieDirectionalG: 0,
      exposure: 0.26
    }
  }

  const springValues = spring(presets.sunset, {
    damping: 0.95,
    precision: 0.0001,
    stiffness: 0.05
  })

  let setEnvironment = true
  let turbidity = presets.sunset.turbidity
  let rayleigh = presets.sunset.rayleigh
  let azimuth = presets.sunset.azimuth
  let elevation = presets.sunset.elevation
  let mieCoefficient = presets.sunset.mieCoefficient
  let mieDirectionalG = presets.sunset.mieDirectionalG
  let exposure = presets.sunset.exposure

  const applyPreset = (preset: keyof typeof presets) => {
    turbidity = presets[preset].turbidity
    rayleigh = presets[preset].rayleigh
    azimuth = presets[preset].azimuth
    elevation = presets[preset].elevation
    mieCoefficient = presets[preset].mieCoefficient
    mieDirectionalG = presets[preset].mieDirectionalG
    exposure = presets[preset].exposure
  }

  $: {
    springValues.set({
      turbidity: turbidity,
      rayleigh: rayleigh,
      azimuth: azimuth,
      elevation: elevation,
      mieCoefficient: mieCoefficient,
      mieDirectionalG: mieDirectionalG,
      exposure: exposure
    })
  }
</script>

<Pane
  title="Sky"
  position="fixed"
>
  <Checkbox
    bind:value={setEnvironment}
    label="Set Environment"
  />
  <Slider
    bind:value={turbidity}
    label="Turbidity"
    min={0}
    max={20}
  />
  <Slider
    bind:value={rayleigh}
    label="Rayleigh"
    min={0}
    max={4}
  />
  <Slider
    bind:value={azimuth}
    label="Azimuth"
    min={-180}
    max={180}
  />
  <Slider
    bind:value={elevation}
    label="Elevation"
    min={-5}
    max={90}
  />
  <Slider
    bind:value={mieCoefficient}
    label="Mie Coefficient"
    min={0}
    max={0.1}
  />
  <Slider
    bind:value={mieDirectionalG}
    label="Mie Directional G"
    min={0}
    max={1}
  />
  <Slider
    bind:value={exposure}
    label="Exposure"
    min={0}
    max={2}
  />
  <Folder title="Presets">
    <Button
      title="Noon"
      on:click={() => {
        applyPreset('noon')
      }}
    />
    <Button
      title="Afternoon"
      on:click={() => {
        applyPreset('afternoon')
      }}
    />
    <Button
      title="Sunset"
      on:click={() => {
        applyPreset('sunset')
      }}
    />
    <Button
      title="Night"
      on:click={() => {
        applyPreset('night')
      }}
    />
  </Folder>
</Pane>

<div>
  <Canvas>
    <Sky
      {setEnvironment}
      turbidity={$springValues.turbidity}
      rayleigh={$springValues.rayleigh}
      azimuth={$springValues.azimuth}
      elevation={$springValues.elevation}
      mieCoefficient={$springValues.mieCoefficient}
      mieDirectionalG={$springValues.mieDirectionalG}
    />

    <Scene exposure={$springValues.exposure} />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>
<script lang="ts">
  import { T, useThrelte } from '@threlte/core'
  import { Grid, OrbitControls } from '@threlte/extras'
  import { SphereGeometry } from 'three'
  import { DEG2RAD } from 'three/src/math/MathUtils.js'

  export let exposure = 1

  const { renderer, invalidate } = useThrelte()

  $: {
    renderer.toneMappingExposure = exposure
    invalidate()
  }

  const sphereGeo = new SphereGeometry(2.5, 32, 32)
</script>

<T.PerspectiveCamera
  position={[0, 7, 18]}
  fov={60}
  near={1}
  far={20000}
  makeDefault
>
  <OrbitControls
    enableZoom={true}
    maxPolarAngle={85 * DEG2RAD}
    enableDamping
    target={[0, 2.5, 0]}
  />
</T.PerspectiveCamera>

<T.Mesh
  castShadow
  position.x={3}
  position.y={2.5}
>
  <T is={sphereGeo} />
  <T.MeshStandardMaterial
    roughness={0.1}
    metalness={1}
  />
</T.Mesh>

<T.Mesh
  position.x={-3}
  castShadow
  position.y={2.5}
>
  <T is={sphereGeo} />
  <T.MeshStandardMaterial />
</T.Mesh>

<Grid
  cellColor="white"
  sectionColor="white"
/>

Usage

<script lang="ts">
  import { T, Canvas } from '@threlte/core'
  import { Sky } from '@threlte/extras'
</script>

<Canvas>
  <Sky elevation={0.5} />

  <T.PerspectiveCamera
    makeDefault
    position={[0, 3, 18]}
    fov={60}
    oncreate={(ref) => {
      ref.lookAt(0, 0, 0)
    }}
  />
</Canvas>

Environment

By default, this component will render the sky to the scene environment. This can be disabled by setting the setEnvironment prop to false.

<Sky setEnvironment={false} />

Performance

The <Sky> component will only re-render the cubemap when the properties change.

Component Signature

Props

name
type
required
default
azimuth
number
no
180
cubeMapSize
number
no
128
elevation
number
no
2
mieCoefficient
number
no
0.005
mieDirectionalG
number
no
0.7
rayleigh
number
no
3
scale
number
no
1000
setEnvironment
boolean
no
true
turbidity
number
no
10
webGLRenderTargetOptions
number
no
{}
Previous Page <Grid>
Next Page <SoftShadows>