What should I choose for a 3D object?(gsap , gltfjsx)

[oliver1999]

Hi all,

I want to rotate a 3D object using GSAP.

I imported my 3D model using gltfjsx so it became a JavaScript script

Now I do not know what to select and rotate it.

In the following code I was able to get the rotation of <group> and change it, but unfortunately it does not re-render
Because I work at React.
 

const SpinnigMesh = ({pos , args , color , speed=1 ,...props })=>{

  const [startRotate , setStartRotate] = useState(false)

  const [value , setValue] = useState(0)

 

  useEffect(() => {

    ScrollMagicPluginGsap(ScrollMagic, gsap);

    gsap.registerPlugin()

    const tl = new TimelineMax();

    TimelineMax.defaultOverwrite = false

    var controller = new ScrollMagic.Controller();

    

    tl.to(grp.props.rotation , 

      {

        1: 122,

        duration:0.5, 

      }

    );

 

    const scene = new ScrollMagic.Scene({

      triggerElement: ".s2",

      triggerHook: "onLeave",

  })

  .setTween(tl)

  .addTo(controller)

  .reverse(true)

  })

  

 

  const mesh = useRef(null);

  const group = useRef()

  const { nodes, materials } = useGLTF('../../../../wine.glb')

 

  const grp = 

  <group rotation={[Math.PI / 2, 0, 0]}>

  <mesh geometry={nodes.defaultMaterial.geometry} material={materials.bottle} />

  <mesh geometry={nodes.defaultMaterial_1.geometry} material={materials.wrap} />

  </group>

  

  return(

    <group rotation={[0,15.2,-0.3]} scale={1.5,1.4,1.4} ref={group} {...props} dispose={null}>

        <group ref={mesh} rotation={[-Math.PI / 2, 0, 0]}>

          {grp}

        </group>

    </group>

  )

}

[elegantseagulls]

It's difficult to debug this without a minimal example, can you setup a CodePen or CodeSandbox to replicate the issue?

 

Generally speaking though, you'll need run a render function for your GL/canvas via the GSAP Ticker, rAF, or onUpdate in order to make the actual rotations work.

 

[GreenSock]

Yeah, @elegantseagulls is right - a minimal demo is critical for us to help with something like this. Also, please beware that ScrollMagic is not a GreenSock product and we don't support it in these forums. I'd strongly recommend switching to ScrollTrigger which does everything ScrollMagic does plus much, much more. I'd be good to update to the more modern syntax too - see

 

Good luck!

[oliver1999]

12 hours ago, elegantseagulls said:

It's difficult to debug this without a minimal example, can you setup a CodePen or CodeSandbox to replicate the issue?

 

Generally speaking though, you'll need run a render function for your GL/canvas via the GSAP Ticker, rAF, or onUpdate in order to make the actual rotations work.

 

I want to clone this bottle and animations : https://meadlight.com/en
I cant set it on CodeSandbox because there was a problem by
```
import { useGLTF } from "@react-three/drei"
```

Can I record a video from codes & result in browser?

 

[oliver1999]

13 hours ago, GreenSock said:

Yeah, @elegantseagulls is right - a minimal demo is critical for us to help with something like this. Also, please beware that ScrollMagic is not a GreenSock product and we don't support it in these forums. I'd strongly recommend switching to ScrollTrigger which does everything ScrollMagic does plus much, much more. I'd be good to update to the more modern syntax too - see

 

Good luck!

 

Thank you, can you help me to import a 3d object (e.g. a bottle) and then rotate it by GSAP?

[elegantseagulls]

It looks like you're using react-three, check the docs there on how to update an object's render and use GSAP's onUpdate, gsap.ticker, or rAF to update the view as you animate it.

 

Here's an example of animating three.js with scroll trigger:

See the Pen GRooLza?editors=1010 by ste-vg (@ste-vg) on CodePen

[oliver1999]

21 hours ago, elegantseagulls said:

It looks like you're using react-three, check the docs there on how to update an object's render and use GSAP's onUpdate, gsap.ticker, or rAF to update the view as you animate it.

 

Here's an example of animating three.js with scroll trigger:

 

Thank you , my problem solved by using useRef and pass it to the <group> like following code:

````

  const rotateGSAP = useRef()

    const tl = new TimelineMax();

    tl.fromTo(rotateGSAP.current.rotation , 

      {

        y:0,

      },

      {

        y:40,

      }

    );
 

  return (

          <group ref={rotateGSAP} rotation={[Math.PI / 2, 0, 0]}>

            <mesh geometry={nodes.defaultMaterial.geometry} material={materials.bottle} />

            <mesh geometry={nodes.defaultMaterial_1.geometry} material={materials.wrap} />

          </group>
);

````