OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

LensFlare Issue in Three JS

  • Thread starter Thread starter majesticglue
  • Start date Start date
M

majesticglue

Guest
I'm using react three fiber and attempting to use the LensFlare Effect that's on the three js docs but I cannot seem to get it working at all. I'm getting no errors with this:

Code:
import { extend, useLoader } from "@react-three/fiber";
import {
  Lensflare,
  LensflareElement,
} from "three/examples/jsm/objects/Lensflare.js";
import { TextureLoader } from "three/src/loaders/TextureLoader";
import lensflare0 from "../assets/lensflare0.png";
import lensflare3 from "../assets/lensflare3.png";

extend({ Lensflare, LensflareElement });

const Flares = () => {
  const [flare0, flare3] = useLoader(TextureLoader, [lensflare0, lensflare3]);

  return (
    <pointLight
      intensity={3}
      position={[2, 2, 2]}
      color="white"
    >
      <lensflare>
        <lensflareElement texture={flare0} size={60} distance={0.6} />
        <lensflareElement texture={flare3} size={70} distance={0.7} />
        <lensflareElement texture={flare3} size={120} distance={0.9} />
        <lensflareElement texture={flare3} size={70} distance={1} />
      </lensflare>
    </pointLight>
  );
};

export default Flares;

anyone might have any idea?

<p>I'm using react three fiber and attempting to use the LensFlare Effect that's on the three js docs but I cannot seem to get it working at all. I'm getting no errors with this:</p>
<pre><code>import { extend, useLoader } from "@react-three/fiber";
import {
Lensflare,
LensflareElement,
} from "three/examples/jsm/objects/Lensflare.js";
import { TextureLoader } from "three/src/loaders/TextureLoader";
import lensflare0 from "../assets/lensflare0.png";
import lensflare3 from "../assets/lensflare3.png";

extend({ Lensflare, LensflareElement });

const Flares = () => {
const [flare0, flare3] = useLoader(TextureLoader, [lensflare0, lensflare3]);

return (
<pointLight
intensity={3}
position={[2, 2, 2]}
color="white"
>
<lensflare>
<lensflareElement texture={flare0} size={60} distance={0.6} />
<lensflareElement texture={flare3} size={70} distance={0.7} />
<lensflareElement texture={flare3} size={120} distance={0.9} />
<lensflareElement texture={flare3} size={70} distance={1} />
</lensflare>
</pointLight>
);
};

export default Flares;
</code></pre>
<p>anyone might have any idea?</p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top