1. @threlte/core
  2. DirectionalLight

@threlte/core

DirectionalLight

The <DirectionalLight> component accepts a property target which acts like the property lookAt: Provide either a Position ({ x: 5, z: 3 }) or another Object3D instance. In the latter case the DirectionalLight will track the provided object. This is especially useful if you want to move the area that the shadow is applied to.

See the three.js DirectionalLight documentation for details.

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


Example

<script>
  import { DirectionalLight } from '@threlte/core'
</script>

<DirectionalLight shadow intensity={0.6} position={{ x: 3, y: 10, z: 3 }} target={{ x: 1 }} />

Properties

// optional
position: Position | undefined = undefined
scale: Scale | undefined = undefined
rotation: Rotation | 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
target: Position | THREE.Object3D | undefined = undefined
shadow:
  | boolean
  | {
      mapSize?: [number, number] | undefined
      camera?:
        | {
            left?: number | undefined
            right?: number | undefined
            top?: number | undefined
            bottom?: number | undefined
            near?: number | undefined
            far?: number | undefined
          }
        | undefined
      bias?: number | undefined
      radius?: number | undefined
    }
  | undefined = undefined

Bindings

inViewport: boolean
light: THREE.DirectionalLight

Events

viewportenter: undefined
viewportleave: undefined