Visit the Documentation of the upcoming Threlte 6.
  1. @threlte/core
  2. SpotLight

@threlte/core

SpotLight

This module will be moved to @threlte/extras at some point in the future. Please read the update notice.

This light gets emitted from a single point in one direction, along a cone that increases in size the further from the light it gets.

This light can cast shadows.

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


Example

<script>
  import { SpotLight, Mesh } from '@threlte/core'
  let mesh
</script>

<Meshbind:mesh />
<SpotLight position={{ x: 3, y: 3 }} target={mesh} />

Properties

// optional
position: Position | undefined = undefined
scale: Scale | undefined = undefined
rotation: Rotation | undefined = undefined
lookAt: LookAt | undefined = undefined
viewportAware: boolean = false
receiveShadow: boolean | undefined = undefined
frustumCulled: boolean | undefined = undefined
renderOrder: number | undefined = undefined
visible: boolean | undefined = undefined
dispose: boolean | undefined = undefined
userData: Record<string, any> | undefined = undefined
color: THREE.ColorRepresentation | undefined = undefined
intensity: number | undefined = undefined
angle: number | undefined = undefined
decay: number | undefined = undefined
distance: number | undefined = undefined
penumbra: number | undefined = undefined
power: number | undefined = undefined
target: LookAt | undefined = undefined
shadow:
  | boolean
  | {
      mapSize?: [number, number]
      camera?: { near?: number; far?: number }
      bias?: number
      radius?: number
    }
  | undefined = undefined

Bindings

inViewport: boolean
light: THREE.SpotLight

Events

viewportenter: undefined
viewportleave: undefined