reactjs - Why got null in useRef with 3dModel ReactThreeFiber GSAP? and how i can update it - Stack Overflow

admin管理员组

文章数量:1122832

gsap.registerPlugin(ScrollTrigger, useGSAP);

const Scene = () => {
  const creamTubeRef = useRef<Group>(null);


  useGSAP(() => {
    
    const scrollTl = gsap.timeline({
      defaults: {
        duration: 2,
      },
      scrollTrigger: {
        trigger: ".hero",
        start: "top top",
        end: "bottom bottom",
        scrub: 1.5,
        markers: true,
      },
    });

    if (creamTubeRef.current) {
      console.log("e");
      scrollTl
        .to(creamTubeRef.current.rotation, { y: Math.PI * 2 })
        .to(creamTubeRef.current.position, { x: -5.2, y: -0.7, z: -2 }, 0);
    }
  });

  

  return (
    <View className=" border-4  pointer-events-none sticky top-0 z-50 -mt-[100vh] h-screen w-full md:block">
      {/* <gridHelper /> */}

      <group position:{[0,0,0]} ref={creamTubeRef}>
        <OneCreamtube  />
      </group>

      
    </View>
  );
};

export default Scene;

<OneCreamTube /> is a regular 3D model that renders fine.

I tried to animate the position of the <OneCreamTube /> component using GSAP. However, I got an issue where the useRef hook initially returned null for the reference, and it failed to update even after the component was successfully rendered and the reference should no longer be null. How can I fix this? Thanks in advance!

本文标签： reactjsWhy got null in useRef with 3dModel ReactThreeFiber GSAP and how i can update itStack Overflow