Animating 3D Model that comes with animation

Questions
3

Ok great thanks, I have it animating at this point, however, it seems that the animation doesn’t seem to be working as intended. It’s a little hard to describe what the animation looks like,Is there a place where I can show my code or a video of what it looks like?

I’m not sure if I set the model size correctly based off what the animation looks like. Here’s a screenshot of what the model looks like during a part of its animation. It looks part of the world is stuck inside of the world.

image
image745×855 477 KB

This is my .ts file:

export class PanelTwoComponent implements OnInit {




  constructor() { }

  ngOnInit() {
    let scene, camera, renderer;
    const worldContainer = document.getElementById('world');
    const clock = new THREE.Clock();

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdddddd);
    // camera = new THREE.PerspectiveCamera(40, window.innerWidth/ window.innerHeight, 1, 5000);
    camera = new THREE.PerspectiveCamera(.1, 1 / 1, .1, 6000);
    camera.rotation.y = 45 / 180 * Math.PI;
    camera.position.x = 800;
    camera.position.y = 100;
    camera.position.z = 1000;




    const control = new OrbitControls(camera, worldContainer);


    renderer = new THREE.WebGLRenderer({ antialias: true });


    renderer.setSize(worldContainer.clientWidth, worldContainer.clientHeight);
    scene.background = new THREE.Color(0x000000);


    document.getElementById('world').appendChild(renderer.domElement);
    let loader = new GLTFLoader();

    loader.load('./../../../assets/3d/scene.gltf', function (gltf) {


      console.log(gltf);

      //The Model
      let world = gltf.scene.children[0];
      //The Models Animation
      const animation = gltf.animations[0];

      const mixer = new THREE.AnimationMixer(world);
      const action = mixer.clipAction(animation);

      action.play();

      // world.scale.set(10, 10, 10);
      scene.add(gltf.scene);

      animate();

      function animate() {
        renderer.render(scene, camera);
        requestAnimationFrame(animate);

        const delta = clock.getDelta();
        // console.log(delta);


        mixer.update(delta);




      }
    });

  }
}