How to add the meteor effect in the skybox in react three fiber

Questions
,
1

Hey Everyone … i am trying to add the meteor showing effect in the scene and i almost got succeed but i release it will not work that way i did something like this

import { useRef, useState } from 'react';
import { Points, PointMaterial } from '@react-three/drei';
import { useLoader, useFrame } from "@react-three/fiber";
import { TextureLoader } from "three";
import { generateRectangularPositions } from '../Utility/GenerateCoordinatePosition';

const ShootingStar = (props) => {
   const groupRef = useRef();
   return (
      <group ref={groupRef}>
         {
            Array(10).fill('').map((_, i) => {
               return <Star key={i} />;
            })
         }
      </group>
   );
};

const Star = (props) => {
   const starTexture = useLoader(TextureLoader, './ShootingStar.png');
   const starRef = useRef();
   const [positions] = useState(new Float32Array(generateRectangularPositions(100 , 100)));
   const speed = 0.1;
   useFrame(({ viewport, camera }) => {
      starRef.current.position.y -= speed;
      starRef.current.position.x += speed;
      const { width, height } = viewport;

      const isObjectOutsideViewport =
         starRef.current.position.x > width ||
         starRef.current.position.y > height;


      if (isObjectOutsideViewport) {
         starRef.current.position.set(...new Float32Array(generateRectangularPositions(100 , 100)));
      }
      // starRef.current.rotation.x = camera.rotation.x;
      // starRef.current.rotation.y = camera.rotation.y;
      // starRef.current.rotation.z = camera.rotation.z;
   });
   return (
      <Points ref={starRef} positions={positions}
         stride={3} frustumCulled={props} >
         <PointMaterial
            map={starTexture}
            transparent={true}
            size={15}
            sizeAttenuation={true}
            depthWrite={false}
         />
      </Points>
   );
};
export default ShootingStar;

please guide me how to do this in proper way with or without shader

2

which effect, and which shader? it’s not entirely clear to me what you need. does the code you have there work? and what about the skybox? a skybox normally refers to to a textured cube with side=backside.

3

I want meteor shower effect like this
meteor shower example in three3d
and yes skybox is the textured cube with backside

i can’t figure out the logic