for some reason, right after my scene loads its context is immediately lost
here are the relavent files-
#THREE.WebGLRenderer: Context Lost.
cinder quest
cframe.tsx -
"use client"
import { useEffect, useState } from "react";
interface CFrameProps {
src: string;
href: string;
className: string;
by: string;
}
//export const DynamicCFrame = dynamic(()=>import('./cframe.tsx'), {ssr:false});
export default function CFrame({ src, href, className, by }: CFrameProps) {
const [isClient, setIsClient] = useState(false);
const [isLoading, setIsLoading] = useState(true);
//const [hidden, setHidden] = useState(" hidden");
useEffect(() => {
setIsClient(true);
}, []);
useEffect(() => {
setIsLoading(true);
//setHidden(" hidden");
}, [src]);
const handleLoaded = () => {
console.log("loaded");
setIsLoading(false);
//setHidden("");
};
return (
<div className="w-full h-full">
{!isClient || isLoading ? (
<div className="flex text-engineering-orange text-2xl justify-center">
Loading...
</div>
) : null}
<iframe
id="cframe"
src={src}
className={className + (isLoading ? " hidden" : "")}
onLoad={handleLoaded}
>
<a href={href}>{by}</a>
</iframe>
</div>
);
}
page.tsx - ```tsx
i tried my best to optimize memory and re-renders, but idk. im new to this, i may have done something wrong 😭
limber seal
Context lost is not an error / anything to worry about
in r3f it'll always appear whenever you unmount <Canvas /> component
cinder quest
im a little confused. youve told me its not an error before, but im not sure what that means. does it mean that the context wont be lost in the web build?
limber seal
it's not an error - it's an indicator that you have removed (and maybe later re-added) <Canvas /> from the react tree
it doesn't block or crash anything - it's just a warning
if something's breaking - this is not the cause (it can be an indicator, but not the cause)
cinder quest
ohh. well i dont want it to lose context, its pretty important that it isnt lost. im trying to find the reason its being lost, idk what i could be doing that removes the canvas