glodrei
Version:
useful add-ons for react-three-fiber
69 lines (59 loc) • 2.02 kB
text/mdx
title: Stage
sourcecode: src/core/Stage.tsx
[](https://drei.pmnd.rs/?path=/story/staging-stage--stage-st)
<Grid cols={4}>
<li>
<Codesandbox id="57iefg" />
</li>
</Grid>
Creates a "stage" with proper studio lighting, 0/0/0 top-centred, model-shadows, ground-shadows and optional zoom to fit. Make sure to set `makeDefault` on your controls when `adjustCamera` is true!
```tsx
type StageProps = {
/** Lighting setup, default: "rembrandt" */
preset?:
| 'rembrandt'
| 'portrait'
| 'upfront'
| 'soft'
| { main: [x: number, y: number, z: number]; fill: [x: number, y: number, z: number] }
/** Controls the ground shadows, default: "contact" */
shadows?: boolean | 'contact' | 'accumulative' | StageShadows
/** Optionally wraps and thereby centers the models using <Bounds>, can also be a margin, default: true */
adjustCamera?: boolean | number
/** The default environment, default: "city" */
environment?: PresetsType | Partial<EnvironmentProps>
/** The lighting intensity, default: 0.5 */
intensity?: number
/** To adjust centering, default: undefined */
center?: Partial<CenterProps>
}
type StageShadows = Partial<AccumulativeShadowsProps> &
Partial<RandomizedLightProps> &
Partial<ContactShadowsProps> & {
type: 'contact' | 'accumulative'
/** Shadow plane offset, default: 0 */
offset?: number
/** Shadow bias, default: -0.0001 */
bias?: number
/** Shadow normal bias, default: 0 */
normalBias?: number
/** Shadow map size, default: 1024 */
size?: number
}
```
By default it gives you contact shadows and auto-centering.
```jsx
<Stage adjustCamera intensity={0.5} shadows="contact" environment="city">
<mesh />
</Stage>
```
For a little more realistic results enable accumulative shadows, which requires that the canvas, and models, can handle shadows.
```jsx
<Canvas shadows>
<Stage shadows="accumulative">
<mesh castShadow />
</Stage>
</Canvas>
```