Renderer
This component manages THREE.WebGLRenderer. It is the main component containing cameras and scenes.
Features
Drie provides some of the common features not contained in three.js by default.
Renderer auto resize
Modern web is based on complex responsive layouts. Drie allows you to make your renderer canvas responsive. It is based on ResizeObserver watching renderer's parent element dimensions.
It can be disabled using the autoResize prop. When disabled, you are required to provide width andheight prop.
Frame limiter
Frame limiter may increase performance of your scenes. The limit defaults to 60 FPS.
It can be disabled by setting the frameLimit prop to -1.
Note
Browser will usually limit the frame rate to 60 FPS.
Props
| Prop name | Description | Type | Default |
|---|---|---|---|
alpha | Controls the default clear alpha value. | boolean | false |
antialias | Whether to perform antialiasing. | boolean | false |
autoResize | Flag marking whether the renderer auto resizes to match parent dimensions. | boolean | true |
camera | Name of the active camera when using multiple cameras. | string | |
height | Height of the renderer. Specify if autoResize if disabled. | number | 0 |
frameLimit | Set FPS limit for the renderer. Use -1 to disable frame limitter. | number | 60 |
onBeforeRender | Callback to fire before each animation frame is rendered. This is typically used for animations. Use this instead of window.setInterval. | TSFunctionType | () => {} |
shadowMapEnabled | If set, use shadow maps in the scene. | boolean | false |
width | Width of the renderer. Specify if autoResize if disabled. | number | 0 |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |
Expose
three
You can access the managed
THREE.WebGLRendererinstance using the exposedthreeproperty.
Example code
<Renderer ref="renderer"> ... </Renderer>
const renderer = ref(null);
onMounted(() => {
// Do something with the THREE.WebGLRenderer instance
const threeRenderer = renderer.value.three;
});