threlte logo
@threlte/extras

<SoftShadows>

This component is a port of the component <SoftShadows> from drei.

It injects Percentage-Closer Soft Shadows (PCSS) into Three.js’ shader chunk. Mounting and unmounting this component will lead to all shaders being be re-compiled, although it will only cause overhead if <SoftShadows> is mounted after the scene has already rendered, if it mounts with everything else in your scene shaders will compile naturally.

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import { Theatre } from '@threlte/theatre'
  import Scene from './Scene.svelte'
  import state from './state.json'
</script>

<div>
  <Canvas>
    <Theatre config={{ state }}>
      <Scene />
    </Theatre>
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>
<script lang="ts">
  import { types } from '@theatre/core'
  import { T, useThrelte } from '@threlte/core'
  import { Environment, OrbitControls, Portal, SoftShadows } from '@threlte/extras'
  import { SheetObject } from '@threlte/theatre'
  import type { DirectionalLightHelper } from 'three'
  import Suzanne from './Suzanne.svelte'

  const { scene } = useThrelte()

  let lightHelper: DirectionalLightHelper
</script>

<T.PerspectiveCamera
  makeDefault
  position={[0, 10, 20]}
  fov={36}
>
  <OrbitControls />
</T.PerspectiveCamera>

<Suzanne />

<SheetObject
  key="Light"
  props={{}}
  onchange={() => {
    lightHelper?.update()
  }}
>
  {#snippet children({ Transform, selected })}
    <Transform>
      <T.DirectionalLight
        position={[0, 0, 0]}
        castShadow
        shadow.mapSize.width={1024}
        shadow.mapSize.height={1024}
        shadow.bias={0.0001}
      >
        {#snippet children({ ref })}
          {#if selected}
            <Portal object={scene}>
              <T.DirectionalLightHelper
                bind:ref={lightHelper}
                args={[ref]}
              />
            </Portal>
          {/if}
        {/snippet}
      </T.DirectionalLight>
    </Transform>
  {/snippet}
</SheetObject>

<SheetObject
  key="Shadows"
  props={{
    soft: true,
    size: types.number(25, {
      range: [0, 100]
    }),
    focus: types.number(0, {
      range: [0, 10]
    }),
    samples: types.number(10, {
      range: [0, 100]
    })
  }}
>
  {#snippet children({ values })}
    {#if values.soft}
      <SoftShadows
        focus={values.focus}
        size={values.size}
        samples={values.samples}
      />
    {/if}
  {/snippet}
</SheetObject>

<Environment
  path="/hdr/"
  files="mpumalanga_veld_puresky_1k.hdr"
/>
<!--
Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
Command: npx @threlte/gltf@1.0.1 ./Suzanne.glb -t -s
-->
<script lang="ts">
  import { T } from '@threlte/core'
  import { useGltf } from '@threlte/extras'
  import { Sequence, Sheet, SheetObject } from '@threlte/theatre'
  import type * as THREE from 'three'

  type GLTFResult = {
    nodes: {
      Suzanne: THREE.Mesh
      Icosphere: THREE.Mesh
      Cylinder: THREE.Mesh
      Floor: THREE.Mesh
    }
    materials: {
      Mat: THREE.MeshStandardMaterial
    }
  }

  const gltf = useGltf<GLTFResult>('/models/Suzanne.glb')
</script>

<T.Group dispose={false}>
  {#await gltf then gltf}
    <Sheet name="Suzanne">
      <Sequence
        autoplay
        iterationCount={Infinity}
      />
      <SheetObject key="Suzanne">
        {#snippet children({ Transform })}
          <Transform>
            <T.Mesh
              castShadow
              receiveShadow
              geometry={gltf.nodes.Suzanne.geometry}
              material={gltf.materials.Mat}
              rotation={[-0.62, 0, 0]}
            />
          </Transform>
        {/snippet}
      </SheetObject>
    </Sheet>

    <Sheet name="Icosphere">
      <Sequence
        autoplay
        iterationCount={Infinity}
      />
      <SheetObject key="Icosphere">
        {#snippet children({ Transform })}
          <Transform>
            <T.Mesh
              castShadow
              receiveShadow
              geometry={gltf.nodes.Icosphere.geometry}
              material={gltf.materials.Mat}
              rotation={[-0.62, 0.09, 1.4]}
            />
          </Transform>
        {/snippet}
      </SheetObject>
    </Sheet>

    <Sheet name="Cylinder">
      <Sequence
        autoplay
        iterationCount={Infinity}
      />
      <SheetObject key="Cylinder">
        {#snippet children({ Transform })}
          <Transform>
            <T.Mesh
              castShadow
              receiveShadow
              geometry={gltf.nodes.Cylinder.geometry}
              material={gltf.materials.Mat}
            />
          </Transform>
        {/snippet}
      </SheetObject>
    </Sheet>

    <T.Mesh
      receiveShadow
      geometry={gltf.nodes.Floor.geometry}
      material={gltf.materials.Mat}
      position={[0, -0.1, 0]}
    />
  {/await}
</T.Group>
{
  "sheetsById": {
    "Box": {
      "staticOverrides": {
        "byObject": {
          "Box": {
            "position": {
              "x": -0.8181591173352025,
              "y": -1.4641087811500046,
              "z": 7.480952349241813
            },
            "rotation": {
              "x": 0,
              "y": 61.01858555446879,
              "z": 0
            },
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            },
            "materialColor": {
              "r": 0,
              "g": 0,
              "b": 0,
              "a": 1
            },
            "opacity": 1,
            "emissive": {
              "r": 0,
              "g": 0.00392156862745098,
              "b": 0.0196078431372549,
              "a": 1
            },
            "color": {
              "r": 1,
              "g": 0.14901960784313725,
              "b": 0,
              "a": 1
            },
            "floatIntensity": 0,
            "roughness": 0.418,
            "metalness": 0.6139240506329124,
            "html": {
              "position": {
                "x": 0,
                "y": 1.5709407768131078,
                "z": 0
              },
              "rotation": {
                "x": 0,
                "y": 0,
                "z": 0
              },
              "scale": {
                "x": 1,
                "y": 1,
                "z": 1
              }
            }
          }
        }
      },
      "sequence": {
        "subUnitsPerUnit": 30,
        "length": 10,
        "type": "PositionalSequence",
        "tracksByObject": {
          "Box": {
            "trackData": {
              "YvCk5XcEbV": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box:[\"position\",\"x\"]",
                "keyframes": [
                  {
                    "id": "N-HL7q-Ho9",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "ahiZC37zxQ",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "h3T8gYQ2jq": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box:[\"position\",\"y\"]",
                "keyframes": [
                  {
                    "id": "6X77NlinAT",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": -1.6574962507555557
                  },
                  {
                    "id": "TG8R5_-OFH",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "zBvS2eRIjP": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box:[\"position\",\"z\"]",
                "keyframes": [
                  {
                    "id": "7Ajl_XbDvW",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 11.210939599125854
                  },
                  {
                    "id": "NfzY_VZ3Cu",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": -5
                  }
                ]
              },
              "-F5mUmCrYl": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box:[\"rotation\",\"x\"]",
                "keyframes": [
                  {
                    "id": "nRLU6ICRUg",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 7.8
                  },
                  {
                    "id": "oUIdHcq8Tl",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 30.000000000000018
                  }
                ]
              },
              "DYLA79WxJj": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box:[\"rotation\",\"y\"]",
                "keyframes": [
                  {
                    "id": "QgpWXY-6Qx",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 45
                  },
                  {
                    "id": "Wcr083n-Wo",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 45.000000000000014
                  }
                ]
              },
              "rokyYn1NaI": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box:[\"rotation\",\"z\"]",
                "keyframes": [
                  {
                    "id": "Ax8nn_LgQK",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": -1.343808101064193e-16
                  },
                  {
                    "id": "uBwo1LCH7o",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": -2.248991783197472e-15
                  }
                ]
              },
              "oyqS30CwcD": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box:[\"scale\",\"x\"]",
                "keyframes": [
                  {
                    "id": "KOXMS7Sz1B",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  },
                  {
                    "id": "d7g8_--OKU",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  }
                ]
              },
              "4YS7OyK_HZ": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box:[\"scale\",\"y\"]",
                "keyframes": [
                  {
                    "id": "PtkdA3APZ2",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  },
                  {
                    "id": "D5AHPi8oUV",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  }
                ]
              },
              "R9eWFmFxi1": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box:[\"scale\",\"z\"]",
                "keyframes": [
                  {
                    "id": "yQe-guL-mV",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  },
                  {
                    "id": "HygYq9U4i0",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  }
                ]
              },
              "0Y9QeGZLqF": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box:[\"floatIntensity\"]",
                "keyframes": [
                  {
                    "id": "Ax01QHBhxj",
                    "position": 2.933,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "Nnt8mpJ_2F",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 4
                  }
                ]
              }
            },
            "trackIdByPropPath": {
              "[\"position\",\"x\"]": "YvCk5XcEbV",
              "[\"position\",\"y\"]": "h3T8gYQ2jq",
              "[\"position\",\"z\"]": "zBvS2eRIjP",
              "[\"rotation\",\"x\"]": "-F5mUmCrYl",
              "[\"rotation\",\"y\"]": "DYLA79WxJj",
              "[\"rotation\",\"z\"]": "rokyYn1NaI",
              "[\"scale\",\"x\"]": "oyqS30CwcD",
              "[\"scale\",\"y\"]": "4YS7OyK_HZ",
              "[\"scale\",\"z\"]": "R9eWFmFxi1",
              "[\"floatIntensity\"]": "0Y9QeGZLqF"
            }
          }
        }
      }
    },
    "Scene": {
      "staticOverrides": {
        "byObject": {
          "Directional Light 1": {
            "position": {
              "x": -0.9184335258502159,
              "y": 5.6988319063589845,
              "z": 3.9482853627985675
            },
            "rotation": {
              "x": 0,
              "y": 0,
              "z": 0
            },
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            },
            "intensity": 1.2658227848101258
          },
          "Directional Light 2": {
            "position": {
              "x": -8.510737943028529,
              "y": -7.578903602798855,
              "z": 3.095527250975193
            },
            "rotation": {
              "x": 0,
              "y": 0,
              "z": 0
            },
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            },
            "intensity": 0.481012658227849,
            "color": {
              "r": 1,
              "g": 1,
              "b": 1,
              "a": 1
            }
          },
          "Camera": {
            "position": {
              "x": -1.7035070675335056,
              "y": 20.19263058502501,
              "z": 2.6529651093808915
            },
            "rotation": {
              "x": -83.76271306815725,
              "y": -4.183923582652951,
              "z": -33.72496066824407
            },
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            }
          }
        }
      },
      "sequence": {
        "subUnitsPerUnit": 30,
        "length": 10,
        "type": "PositionalSequence",
        "tracksByObject": {
          "Camera": {
            "trackData": {
              "CIKWP9G0pE": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Camera:[\"fov\"]",
                "keyframes": []
              },
              "KKpe5gFc9N": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Camera:[\"position\",\"x\"]",
                "keyframes": [
                  {
                    "id": "5kEcBAOZaT",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.455, 0.03],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "SqHYBpJdRN",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "NVrrrE3jcl": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Camera:[\"position\",\"y\"]",
                "keyframes": [
                  {
                    "id": "fjjZRptYi6",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.455, 0.03],
                    "type": "bezier",
                    "value": 16
                  },
                  {
                    "id": "-uNrZ9C3ME",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 10
                  }
                ]
              },
              "pJDfFIuzJQ": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Camera:[\"position\",\"z\"]",
                "keyframes": [
                  {
                    "id": "AiP5p7Tu_U",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.455, 0.03],
                    "type": "bezier",
                    "value": 2
                  },
                  {
                    "id": "M2kKSBIMJr",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 19
                  }
                ]
              },
              "ms80Z7GfT_": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Camera:[\"rotation\",\"x\"]",
                "keyframes": [
                  {
                    "id": "6YGzQPF1Cm",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.42732063773250667, 0.0387719298245614],
                    "type": "bezier",
                    "value": -81.83482633669205
                  },
                  {
                    "id": "-V7pt--YkS",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.4153542958370239, 0.9637719298245613, 0.5, 0],
                    "type": "bezier",
                    "value": -27.320930507778307
                  }
                ]
              },
              "jBSvsQIhg6": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Camera:[\"rotation\",\"y\"]",
                "keyframes": [
                  {
                    "id": "-jzAu-vc41",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.455, 0.03],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "EzUfzIab-s",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.515, 0.955, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "C8SbjHlv-E": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Camera:[\"rotation\",\"z\"]",
                "keyframes": [
                  {
                    "id": "ZSWvTPoQ-E",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.455, 0.03],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "nyMoco_KGB",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.515, 0.955, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "t2VkyIsT2A": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Camera:[\"scale\",\"x\"]",
                "keyframes": [
                  {
                    "id": "kUEax7w1Vm",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  },
                  {
                    "id": "an1LAZtqGl",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  }
                ]
              },
              "V5P-54Ubt6": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Camera:[\"scale\",\"y\"]",
                "keyframes": [
                  {
                    "id": "A-9v2tTfh9",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  },
                  {
                    "id": "iBcXuc-6GK",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  }
                ]
              },
              "6X_tDlnHko": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Camera:[\"scale\",\"z\"]",
                "keyframes": [
                  {
                    "id": "U9_A0gvYRD",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  },
                  {
                    "id": "QBXblzXzDp",
                    "position": 10,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  }
                ]
              }
            },
            "trackIdByPropPath": {
              "[\"fov\"]": "CIKWP9G0pE",
              "[\"position\",\"x\"]": "KKpe5gFc9N",
              "[\"position\",\"y\"]": "NVrrrE3jcl",
              "[\"position\",\"z\"]": "pJDfFIuzJQ",
              "[\"rotation\",\"x\"]": "ms80Z7GfT_",
              "[\"rotation\",\"y\"]": "jBSvsQIhg6",
              "[\"rotation\",\"z\"]": "C8SbjHlv-E",
              "[\"scale\",\"x\"]": "t2VkyIsT2A",
              "[\"scale\",\"y\"]": "V5P-54Ubt6",
              "[\"scale\",\"z\"]": "6X_tDlnHko"
            }
          }
        }
      }
    },
    "Threlte-Composite": {
      "staticOverrides": {
        "byObject": {
          "Box Top": {
            "position": {
              "x": 0,
              "y": 2,
              "z": 0
            },
            "rotation": {
              "x": 0,
              "y": 0,
              "z": 0
            },
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            },
            "color": {
              "r": 0,
              "g": 0,
              "b": 0,
              "a": 1
            },
            "metalness": 0,
            "roughness": 0.2,
            "envMapIntensity": 10
          },
          "Box Bottom X+": {
            "position": {
              "x": 2,
              "y": 0,
              "z": 0
            },
            "rotation": {
              "x": 0,
              "y": 0,
              "z": 0
            },
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            },
            "color": {
              "r": 0,
              "g": 0,
              "b": 0,
              "a": 1
            },
            "roughness": 0.2,
            "metalness": 0,
            "envMapIntensity": 10
          },
          "Box Bottom X-": {
            "position": {
              "x": -2,
              "y": 0,
              "z": 0
            },
            "rotation": {
              "x": 0,
              "y": 0,
              "z": 0
            },
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            },
            "color": {
              "r": 0,
              "g": 0,
              "b": 0,
              "a": 1
            },
            "emissive": {
              "r": 0,
              "g": 0.00030352698352941176,
              "b": 0.0015176349176470587,
              "a": 1
            },
            "roughness": 0.2,
            "metalness": 0,
            "envMapIntensity": 1
          },
          "Box Bottom Z+": {
            "position": {
              "x": 0,
              "y": 0,
              "z": 2
            },
            "rotation": {
              "x": 0,
              "y": 0,
              "z": 0
            },
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            },
            "color": {
              "r": 0,
              "g": 0,
              "b": 0,
              "a": 1
            },
            "roughness": 0.2,
            "metalness": 0
          },
          "Box Bottom Z-": {
            "position": {
              "x": 0,
              "y": 0,
              "z": -2
            },
            "rotation": {
              "x": 0,
              "y": 0,
              "z": 0
            },
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            },
            "color": {
              "r": 0,
              "g": 0,
              "b": 0,
              "a": 1
            },
            "roughness": 0.2,
            "metalness": 0
          },
          "Composite": {
            "rotation": {
              "y": 45,
              "x": 0,
              "z": 0
            },
            "floatIntensity": 2.7215189873417724,
            "rotationIntensity": 0,
            "rotationSpeed": 0.17088607594936536,
            "floatSpeed": 1.9936708860759493,
            "glow": {
              "position": {
                "x": -0.04425743507387843,
                "y": -1.022192353560099,
                "z": -5.0821500162005
              },
              "rotation": {
                "x": 0,
                "y": 0,
                "z": 0
              },
              "scale": {
                "x": 1.5,
                "y": 1.5,
                "z": 2
              }
            },
            "opacity": 0.43670886075949356,
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            },
            "position": {
              "y": 1
            }
          },
          "Floor": {
            "color": {
              "r": 0.0196078431372549,
              "g": 0.0196078431372549,
              "b": 0.0196078431372549,
              "a": 1
            },
            "emissive": {
              "r": 0,
              "g": 0,
              "b": 0,
              "a": 1
            }
          },
          "Directional Light 1": {
            "intensity": 1,
            "position": {
              "x": -13.044685116424557,
              "y": 10.40484255540645,
              "z": 3.7056597804992015
            },
            "rotation": {
              "x": 0,
              "y": 0,
              "z": 0
            },
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            }
          },
          "Directional Light 2": {
            "position": {
              "x": 7.2444619237008485,
              "y": 0.39470578644456733,
              "z": -4.513386540591839
            },
            "rotation": {
              "x": 0,
              "y": 0,
              "z": 0
            },
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            },
            "color": {
              "r": 1,
              "g": 1,
              "b": 1,
              "a": 1
            },
            "intensity": 0.14833563620218715
          },
          "Box Middle": {
            "scale": {
              "x": 1,
              "y": 1,
              "z": 1
            },
            "color": {
              "r": 0,
              "g": 0,
              "b": 0,
              "a": 1
            },
            "roughness": 0.2,
            "metalness": 0,
            "envMapIntensity": 10,
            "emissive": {
              "r": 0,
              "g": 0,
              "b": 0,
              "a": 1
            }
          },
          "Ambient Light": {
            "intensity": 0.16075949367088568,
            "color": {
              "r": 0.13333333333333333,
              "g": 0.03529411764705882,
              "b": 0.7254901960784313,
              "a": 1
            }
          },
          "Fill Light": {
            "intensity": 0.3037974683544304
          },
          "Glow": {
            "position": {
              "x": -0.011481084105283028,
              "y": -0.9726258441492436,
              "z": -4.451709051273078
            },
            "rotation": {
              "x": -22.259350847770644,
              "y": 0,
              "z": 0
            },
            "scale": {
              "x": 1.3,
              "y": 1,
              "z": 0.9
            },
            "opacity": 1,
            "color": {
              "r": 0.47058823529411764,
              "g": 0.2549019607843137,
              "b": 1,
              "a": 1
            },
            "opacita": 0.9873417721518987,
            "colora": {
              "r": 0.25098039215686274,
              "g": 0.25882352941176473,
              "b": 1,
              "a": 1
            },
            "opacity2": 0,
            "color2": {
              "r": 0.058823529411764705,
              "g": 0.12549019607843137,
              "b": 1,
              "a": 1
            }
          }
        }
      },
      "sequence": {
        "subUnitsPerUnit": 30,
        "length": 20,
        "type": "PositionalSequence",
        "tracksByObject": {
          "Box Bottom X+": {
            "trackData": {
              "3QmrZS3F5R": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Bottom X+:[\"rotation\",\"x\"]",
                "keyframes": [
                  {
                    "id": "RToO0iCgGa",
                    "position": 1.1,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "JAmETQ_iKc",
                    "position": 8.367,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "CCgqIu6GTU",
                    "position": 15.933,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "X-7zT-bvcz": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Bottom X+:[\"rotation\",\"y\"]",
                "keyframes": [
                  {
                    "id": "iVGo1q0JO6",
                    "position": 1.1,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "SWEHErxhXf",
                    "position": 8.367,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "sxdaa00wUC",
                    "position": 15.933,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "je7FvGImfz": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Bottom X+:[\"rotation\",\"z\"]",
                "keyframes": [
                  {
                    "id": "k5aH1GGv2K",
                    "position": 1.1,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "ne9a3CaPQW",
                    "position": 8.367,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "_ZqRRZeS02",
                    "position": 15.933,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "ei66TPwVPP": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Bottom X+:[\"position\",\"x\"]",
                "keyframes": [
                  {
                    "id": "x64IuW0AKd",
                    "position": 1.1,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 1.9999999999999996
                  },
                  {
                    "id": "zEK9E4czZx",
                    "position": 8.367,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 2
                  },
                  {
                    "id": "9AbBvceQRT",
                    "position": 11.933,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 2
                  },
                  {
                    "id": "xCGuyAl8u1",
                    "position": 15.933,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 2
                  }
                ]
              },
              "GXsECfczOp": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Bottom X+:[\"position\",\"y\"]",
                "keyframes": [
                  {
                    "id": "XjJTMCMDBL",
                    "position": 1.1,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 21.934279254408594
                  },
                  {
                    "id": "f3YkiBwdS-",
                    "position": 8.367,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "acY9Uj6McO",
                    "position": 11.933,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "Fwnuh6rlg-",
                    "position": 15.933,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1.2489949921246877
                  }
                ]
              },
              "RlQQB6ps9F": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Bottom X+:[\"position\",\"z\"]",
                "keyframes": [
                  {
                    "id": "XSczU_K6xJ",
                    "position": 1.1,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 2.465190328815662e-32
                  },
                  {
                    "id": "wICMVOwGpn",
                    "position": 8.367,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "GcFNkuovhy",
                    "position": 11.933,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "mzRBW-sl-r",
                    "position": 15.933,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "AR5HXQM5BM": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Bottom X+:[\"envMapIntensity\"]",
                "keyframes": [
                  {
                    "id": "OZUrLYGubS",
                    "position": 0.9,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 1
                  },
                  {
                    "id": "5iDvm0lCfh",
                    "position": 3,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 10
                  }
                ]
              }
            },
            "trackIdByPropPath": {
              "[\"rotation\",\"x\"]": "3QmrZS3F5R",
              "[\"rotation\",\"y\"]": "X-7zT-bvcz",
              "[\"rotation\",\"z\"]": "je7FvGImfz",
              "[\"position\",\"x\"]": "ei66TPwVPP",
              "[\"position\",\"y\"]": "GXsECfczOp",
              "[\"position\",\"z\"]": "RlQQB6ps9F",
              "[\"envMapIntensity\"]": "AR5HXQM5BM"
            }
          },
          "Box Top": {
            "trackData": {
              "QPSmWsrhUd": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Top:[\"position\",\"x\"]",
                "keyframes": [
                  {
                    "id": "UwDQCND935",
                    "position": 3.433,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": -5.567460249556822e-16
                  },
                  {
                    "id": "CDctWp3dOB",
                    "position": 9.767,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "p28rUhHlDE",
                    "position": 11.633,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "JlyelGG8Et",
                    "position": 15.633,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "L3T30vYx7m": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Top:[\"position\",\"y\"]",
                "keyframes": [
                  {
                    "id": "ZQvc-c7c3B",
                    "position": 3.433,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 22.228566959223095
                  },
                  {
                    "id": "HaYF8gydIZ",
                    "position": 9.767,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 2
                  },
                  {
                    "id": "ExMPFQzmFB",
                    "position": 11.633,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 2
                  },
                  {
                    "id": "UuK1Pktgqf",
                    "position": 15.633,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 4.516558577702754
                  }
                ]
              },
              "zO5oBX8lQb": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Top:[\"position\",\"z\"]",
                "keyframes": [
                  {
                    "id": "luyzoT48qw",
                    "position": 3.433,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 2.465190328815662e-32
                  },
                  {
                    "id": "C11ORIypfg",
                    "position": 9.767,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "dhh2CZXOmC",
                    "position": 11.633,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "U0psTMn_M7",
                    "position": 15.633,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "kEjYexA4hL": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Top:[\"rotation\",\"x\"]",
                "keyframes": [
                  {
                    "id": "V0FzLbLQcd",
                    "position": 3.433,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "GcOQC_-eeP",
                    "position": 9.767,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "hPnd24WhVo",
                    "position": 15.633,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "pt4awVoPBd": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Top:[\"rotation\",\"y\"]",
                "keyframes": [
                  {
                    "id": "3jOnXGmpqR",
                    "position": 3.433,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "ZEoT4ZQhw7",
                    "position": 9.767,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "JdOO4JEOgj",
                    "position": 15.633,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              },
              "Ht7w8K3JFx": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Top:[\"rotation\",\"z\"]",
                "keyframes": [
                  {
                    "id": "gu9cKKd9OF",
                    "position": 3.433,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "IuaMcNlDhW",
                    "position": 9.767,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  },
                  {
                    "id": "RK83N74jjb",
                    "position": 15.633,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": 0
                  }
                ]
              }
            },
            "trackIdByPropPath": {
              "[\"position\",\"x\"]": "QPSmWsrhUd",
              "[\"position\",\"y\"]": "L3T30vYx7m",
              "[\"position\",\"z\"]": "zO5oBX8lQb",
              "[\"rotation\",\"x\"]": "kEjYexA4hL",
              "[\"rotation\",\"y\"]": "pt4awVoPBd",
              "[\"rotation\",\"z\"]": "Ht7w8K3JFx"
            }
          },
          "Box Bottom X-": {
            "trackData": {
              "Hu4BfrzbkQ": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Bottom X-:[\"position\",\"x\"]",
                "keyframes": [
                  {
                    "id": "Ed7gRc5fOG",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": -2.0000000000000004
                  },
                  {
                    "id": "EPsjRamrAi",
                    "position": 6.9,
                    "connectedRight": true,
                    "handles": [0.355, 1, 0.5, 0],
                    "type": "bezier",
                    "value": -2
                  },
                  {
                    "id": "vG-G7vstrC",
                    "position": 12.267,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": -2
                  },
                  {
                    "id": "92CrsT-f6d",
                    "position": 16.267,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.5, 0],
                    "type": "bezier",
                    "value": -2
                  }
                ]
              },
              "n-WhhyeRXf": {
                "type": "BasicKeyframedTrack",
                "__debugName": "Box Bottom X-:[\"position\",\"y\"]",
                "keyframes": [
                  {
                    "id": "nyX8exMeDO",
                    "position": 0,
                    "connectedRight": true,
                    "handles": [0.5, 1, 0.215, 0.61],
                    "type": "bezier",
                    "value": 22.859292099518985
                  },
                  {
                    "id": "Z8bMSqbmfs",
                    "position": 6.9,
                    "connectedRight":