Hi guys,
I am very new at using three JS.
I am trying to create something cool with threeJS, react and typescript. According to my best friend google, unrealBloomPass is a component that can be used to create a cool bloomEffect.
problem is in the title, I get an error and it just doexn’t recognize the component (I think).
import { Canvas, extend } from "@react-three/fiber";
import { Suspense } from "react";
import { Points } from "./Points";
import { UnrealBloomPass, OutlinePass } from "three-stdlib";
import { Effects } from "@react-three/drei";
import React from "react";
export interface AnimationCanvasProps {
[key: string]: string;
}
extend({ UnrealBloomPass, OutlinePass });
export const AnimationCanvas: React.FC<AnimationCanvasProps> = () => {
return (
<Canvas camera={{ position: [100, 10, 0], fov: 75 }}>
<Suspense fallback={null}>
<Effects disableGamma>
<unrealBloomPass threshold={1} strength={1.0} radius={0.5} />
</Effects>
<Points />
</Suspense>
</Canvas>
);
};