gsap gltf model animations keep refreshing to same angle on scroll

johndoe1231 · December 9, 2021

hey guys i am new to gsap and im trying to make introduce some interactivity with my gltf model using gsap. i want to make it that when i scroll from a section to another section it zooms out, then from another section to another section it rotates. however, the model seems to refresh itself, along with its animations when i tried to scroll, is there any solutions to this? currently the gltf model im using is https://sketchfab.com/3d-models/tyrannosaurus-rex-9d3a3e42c0054c35aa39c3ee07388d16. thanks in advance.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3d model</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        position: fixed; top: 0; left: 0;

      }
      div#test2 {
  height: 5000px;
}
    </style>
  </head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>  

  <body>
    <script type="module">
        import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.114/build/three.module.js';
        
        import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/OrbitControls.js';
        import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/loaders/GLTFLoader.js';
        import { RGBELoader } from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/loaders/RGBELoader.js';
        
        var container, controls;
        var camera, scene, renderer, mixer, clock;
        var obj
        
        init();
        animate();
        
        function init() {
        
          container = document.getElementById( 'test' );
          document.body.appendChild( container );
          
          

          camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 1000 );
        //   camera.position.set(0, 5, 30);
          camera.position.x = 0
          camera.position.y = 5
          camera.position.z = 10 


        
          scene = new THREE.Scene();
          scene.background = new THREE.Color(0xffffff);
          var light = new THREE.HemisphereLight(0xffffff,0x000000,10);
          scene.add(light);



          
          clock = new THREE.Clock();
        
              // model
          
              var loader = new GLTFLoader();
              loader.load( 'dinosaur.glb', function ( gltf ) {
        
                obj = scene.add( gltf.scene );
        
                mixer = new THREE.AnimationMixer( gltf.scene );
                
                gltf.animations.forEach( ( clip ) => {
                  
                    mixer.clipAction( clip ).play();
                  
                } );
        
              } );
        
        
          renderer = new THREE.WebGLRenderer( { antialias: true } );
          renderer.setPixelRatio( window.devicePixelRatio );
          renderer.setSize( window.innerWidth, window.innerHeight );
          renderer.toneMapping = THREE.ACESFilmicToneMapping;
          renderer.toneMappingExposure = 0.8;
          renderer.outputEncoding = THREE.sRGBEncoding;
          container.appendChild( renderer.domElement );
        

    //       function rotateFunction() {
    //     obj.rotation.y += 0.02;        
    //     console.log(obj.rotation.y)
        
    //   }

    //   document.addEventListener('scroll', function(e) { rotateFunction() });


        
        }
        function onWindowResize() {
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
        
          renderer.setSize( window.innerWidth, window.innerHeight );
        }
        
        //
        
        function animate() {
          requestAnimationFrame( animate );
          var delta = clock.getDelta();
          if ( mixer ) mixer.update( delta );
          renderer.render( scene, camera );
        
        }

        // function adjustCamera() {              
        // var t = scrollY / (5000 - innerHeight);
        // console.log(t)
        // // t is 0 to 1

        //     camera.position.z = 10 + 5 * t;


        //     }

        //     document.addEventListener('scroll', function(e) { adjustCamera() });

        gsap.registerPlugin(ScrollTrigger)
        ScrollTrigger.defaults({
        scrub: 3,
        ease: 'none',
        })
        const sections = document.querySelectorAll('.section')
        gsap.from(scene.position, {
        y: 1,
        duration: 1,
        ease: 'expo',
        })
        gsap.from('h1', {
        yPercent: 100,
        autoAlpha: 0,
        ease: 'back',
        delay: 0.3,
        })
        gsap.to(scene.rotation, {
        x: Math.PI * 2,
        scrollTrigger: {
            trigger: sections[1],
        },
        })
        gsap.to(scene.scale, {
        x: 2,
        y: 2,
        scrollTrigger: {
            trigger: sections[2],
        },
        })
        gsap.to(scene.rotation, {
        y: Math.PI * 2,
        scrollTrigger: {
            trigger: sections[3],
        },
        })

        /**
         * Animate
         */
        // const tick = () => {
        // const elapsedTime = clock.getElapsedTime()

        // //mesh.rotation.x += 0.01 * Math.sin(1)
        // //mesh.rotation.y += 0.01 * Math.sin(1)
        // //mesh.rotation.z += 0.01 * Math.sin(1)

        // // Update controls
        // controls.update()
        // // Render
        // renderer.render(scene, camera)

        // // Call tick again on the next frame
        // window.requestAnimationFrame(tick)
        // }
        /*------------------------------
        MouseMove
        ------------------------------*/
        function onMouseMove(e) {
        const x = e.clientX
        const y = e.clientY

        gsap.to(scene.rotation, {
            y: gsap.utils.mapRange(0, window.innerWidth, 1, -1, x),
            x: gsap.utils.mapRange(0, window.innerHeight, 1, -1, y),
        })
        }
        window.addEventListener('mousemove', onMouseMove)

See the Pen xxXOWRW by test123112 (@test123112) on CodePen

Cassie · December 9, 2021

Heya! Welcome to the GSAP forums.

I'm afraid it's really hard for us to debug without a working demo.

I've separated the code out into the correct panels - could you take a look and get this working so we can see what's going on and help you?

See the Pen qBPNYOz?editors=0010 by GreenSock (@GreenSock) on CodePen

Notifications

Messages

gsap gltf model animations keep refreshing to same angle on scroll

Recommended Posts

johndoe1231

Link to comment

Share on other sites

Cassie

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members