Анимация на Three.js

Question

Сделал на Three.js вывод 3D модели, у модели так же есть анимации. По документации сделал всё вроде правильно, но анимация не запускается. Хотя при выводе в console.log проблем не увидел.
Вот мой код:

<!DOCTYPE html>
<html>
<head>
    <title>3D Model</title>
    <style>
        .container-model {
            width: 100%;
        }
        #myCanvas {
            display: flex;
            align-content: center;
            align-items: center;
            margin: 0 auto;
        }
        body {
            background-color: rgb(31, 31, 31);
        }
        canvas {
            position: relative;
        }
        canvas::before {
          content: "";
          position: absolute;
          top: 0; 
          left: 0;
          width: 100%; 
          height: 100%;  
          opacity: .4;
          background-image: radial-gradient(circle, #ffbc00, #ff8a60, #ff71b0, #da84ef, #5799ff);
        }
    </style>
</head>
<body>
    <div class="container-model">
        <canvas id="myCanvas"></canvas>
    </div>

    <script src="js/three.js"></script>
    <script src="js/GLTFLoader.js"></script>
    <script src='https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js'></script>

    <script>
        var renderer,
        scene,
        camera,
        myCanvas = document.getElementById('myCanvas');

        //RENDERER
        renderer = new THREE.WebGLRenderer({
          canvas: myCanvas,
          antialias: true,
          alpha: true
        });
        renderer.setClearColor(0x000000, 0);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth-50, window.innerHeight-50);

        //CAMERA
        camera = new THREE.PerspectiveCamera(7, window.innerWidth / window.innerHeight, 1, 5000 );
        camera.position.set(-45, 5, 45);

        var controls = new THREE.OrbitControls(camera, myCanvas);

        controls.enableDamping = true;
        controls.target.set(0, 1, 0);
        controls.minPolarAngle = Math.PI / 3;
        controls.maxPolarAngle = Math.PI / 2;

        //SCENE
        scene = new THREE.Scene();

        //LIGHTS
        var light = new THREE.AmbientLight(0x404040, 5);
        scene.add(light);

        var light2 = new THREE.DirectionalLight(0xfffde1, 2);
        light2.position.set(15 , 7, 30)
        light2.target.position.set(0, 0, 0);
        scene.add(light2);
        scene.add(light2.target);

        //const helper = new THREE.DirectionalLightHelper(light2);
        //scene.add(helper);


        // LOADER
        var gltfLoader = new THREE.GLTFLoader();
        var clock = new THREE.Clock();

        let mixer;

        gltfLoader.load( "model/scene.gltf", model =>  {
            console.log("Содержимое модели: ", model);
            mixer = new THREE.AnimationMixer(model.scene);
            const clips = model.animations;
            console.log("Список аннимаций: ", clips); // --> Анимации у модели


            function update () {
                mixer.update( deltaSeconds );
            }

            const clip = THREE.AnimationClip.findByName( clips, 'mixamo.com' );
            const action = mixer.clipAction( clip );
            if (clip != null) {
                action.play();
                console.log('Анимация запущена...');
            } else {
                console.log('Такой анимации не существует...');
            }

            scene.add(model.scene);
        });

        //RENDER
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

Вот 3D модель: Ссылка на скачивание с YandexDisk

Подскажите пожалуйста, что не так делаю.

БЛОГ НА HUSL

Анимация на Three.js

Ответы (0 шт):