Core Components
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.
Example
<script>
import { DirectionalLight } from 'threlte'
</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
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