<CubeEnvironment>

<CubeEnvironment> is almost exactly like <Enviroment> but it has a few key differences, namely that its used to load and assign THREE.CubeTextures to scene.environment. Other differences will be listed below. For all other information please refer to the <Environment> documentation.

Show Code

• App.svelte
• Scene.svelte

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

  let autoRotateCamera = $state(false)
  let useEnvironment = $state(true)
  let environmentInputsDisabled = $derived(!useEnvironment)
  let environmentIsBackground = $state(true)
  let materialRoughness = $state(0)
  let materialMetalness = $state(1)

  const cubes = {
    bridge: 'bridge',
    pisa: 'pisa'
  }

  const pathMap = {
    bridge: '/textures/cube/Bridge2_cube/',
    pisa: '/textures/cube/pisaHDR/'
  }

  const filesMap = {
    bridge: ['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'],
    pisa: ['nx.hdr', 'ny.hdr', 'nz.hdr', 'px.hdr', 'py.hdr', 'pz.hdr']
  }

  let cube = $state(cubes.bridge)

  const environmentFilesPath = $derived(pathMap[cube as keyof typeof pathMap])
  const environmentFiles = $derived(filesMap[cube as keyof typeof filesMap])
  const environmentUrls = $derived(
    environmentFiles.map((file) => `${environmentFilesPath}${file}`)
  ) as [string, string, string, string, string, string]
</script>

<Pane
  position="fixed"
  title="CubeEnvironment"
>
  <Checkbox
    bind:value={useEnvironment}
    label="use <Environment>"
  />
  <Checkbox
    bind:value={environmentIsBackground}
    disabled={environmentInputsDisabled}
    label="is background"
  />
  <List
    bind:value={cube}
    disabled={environmentInputsDisabled}
    label="cube environment map"
    options={cubes}
  />
  <Folder title="material props">
    <Slider
      disabled={environmentInputsDisabled}
      bind:value={materialMetalness}
      label="metalness"
      min={0}
      max={1}
      step={0.1}
    />
    <Slider
      disabled={environmentInputsDisabled}
      bind:value={materialRoughness}
      label="roughness"
      min={0}
      max={1}
      step={0.1}
    />
  </Folder>
  <Folder title="camera">
    <Checkbox
      bind:value={autoRotateCamera}
      label="auto rotate"
    />
  </Folder>
</Pane>

<div>
  <Canvas>
    <Scene
      {autoRotateCamera}
      {environmentIsBackground}
      {environmentUrls}
      {materialMetalness}
      {materialRoughness}
      {useEnvironment}
    />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>

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

  type Props = {
    autoRotateCamera?: boolean
    environmentUrls: [string, string, string, string, string, string]
    environmentIsBackground?: boolean
    materialMetalness?: number
    materialRoughness?: number
    useEnvironment?: boolean
  }

  let {
    autoRotateCamera = false,
    environmentUrls,
    environmentIsBackground = true,
    materialMetalness = 1,
    materialRoughness = 0,
    useEnvironment = true
  }: Props = $props()
</script>

<T.PerspectiveCamera
  makeDefault
  position.z={5}
>
  <OrbitControls
    autoRotate={autoRotateCamera}
    autoRotateSpeed={0.15}
    enableDamping
  />
</T.PerspectiveCamera>

<T.Mesh>
  <T.TorusGeometry args={[1, 0.4, 36, 192]} />
  <T.MeshStandardMaterial
    metalness={materialMetalness}
    roughness={materialRoughness}
  />
</T.Mesh>

{#if useEnvironment}
  <CubeEnvironment
    isBackground={environmentIsBackground}
    urls={environmentUrls}
  />
{/if}

URLs

<CubeEnvironment>’s urls prop is a six-tuple of textures that comprise a cube texture. The first file’s extension decides which loader to use to load the files. Refer to the table below to determine which loader is used for each extension. The order of the urls is important. The order is [positiveX, negativeX, positiveY, negativeY, positiveZ, negativeZ].

extension	loader
.hdr	Three.HDRCubeTextureLoader
all others	Three.CubeTextureLoader

Grounded Skybox

<CubeEnvironment> is other than <Environment> not able to create a GroundedSkybox instance.

Component Signature

Props

name

type

required

default

description

---

isBackground

boolean

no

false

whether to set `scene.background` to the loaded environment texture

---

scene

THREE.Scene

no

useThrelte().scene

the scene that will have its environment and/or background set

---

texture

THREE.CubeTexture

no

a bindable of the loaded cube texture.

---

urls

[positiveX: string, negativeX: string, positiveY: string, negativeY: string, positiveZ: string, negativeZ: string]

no

a six-tuple of urls to load