I wanted to do animated scanlines, so I created this component
const AnimatedScanline = () => {
const ref = useRef<ScanlineEffect>(null!)
useFrame(({ clock }) => {
const elapsed = clock.getElapsedTime()
if (ref.current) {
ref.current.density = 2.25 + Math.sin(elapsed) * 0.5
}
})
return (
<Scanline
ref={ref}
blendFunction={BlendFunction.COLOR_DODGE}
density={2.25}
/>
)
}
Which does exactly what it's supposed to, unless I click the canvas, at which point the app crashes and throws errors to my log, but without the ref and useFrame part, it works without any issues.
Uncaught TypeError: cyclic object value
P util.tsx:38
frame react-reconciler.development.js:14492
renderWithHooks react-reconciler.development.js:3914
updateFunctionComponent react-reconciler.development.js:6059
beginWork react-reconciler.development.js:7632
runWithFiberInDEV react-reconciler.development.js:522
performUnitOfWork react-reconciler.development.js:12641
workLoopSync react-reconciler.development.js:12461
renderRootSync react-reconciler.development.js:12441
performWorkOnRoot react-reconciler.development.js:11960
performSyncWorkOnRoot react-reconciler.development.js:2152
flushSyncWorkAcrossRoots_impl react-reconciler.development.js:2013
processRootScheduleInMicrotask react-reconciler.development.js:2047
performWorkUntilDeadline scheduler.development.js:44
js scheduler.development.js:219
js scheduler.development.js:364
__require chunk-EWTE5DHJ.js:12
js index.js:6
__require chunk-EWTE5DHJ.js:12
React 2
__require chunk-EWTE5DHJ.js:12
js React
__require chunk-EWTE5DHJ.js:12
react-dom_client.js:17615
2 util.tsx:38:6
An error occurred in the component.
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.
Component Stack:
CanvasImpl react-three-fiber.esm.js:14
m index.tsx:83
Canvas unknown:0
div unknown:0
NetworkApp unknown:0
div unknown:0
div unknown:0
DraggableCore DraggableCore.js:75
Draggable Draggable.js:85
DragableWindow index.tsx:13
Windows Desktop.tsx:27
div unknown:0
Desktop unknown:0
App App.tsx:17
:1:145535
WebGL context was lost. three.module.js:15143:30
THREE.WebGLRenderer: Context Lost.
I wanted to do animated scanlines, so I created this component
Which does exactly what it's supposed to, unless I click the canvas, at which point the app crashes and throws errors to my log, but without the ref and useFrame part, it works without any issues.
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.
Component Stack:
CanvasImpl react-three-fiber.esm.js:14
m index.tsx:83
Canvas unknown:0
div unknown:0
NetworkApp unknown:0
div unknown:0
div unknown:0
DraggableCore DraggableCore.js:75
Draggable Draggable.js:85
DragableWindow index.tsx:13
Windows Desktop.tsx:27
div unknown:0
Desktop unknown:0
App App.tsx:17
:1:145535
WebGL context was lost. three.module.js:15143:30
THREE.WebGLRenderer: Context Lost.