Как запустить анимацию в json модели с помощью three.js?

1
2
3
4
5
6

var loader = new THREE.JSONLoader();
loader.load('model.json', function (geometry, materials) {
    var material = new THREE.MeshFaceMaterial(materials);
    var mesh = new THREE.Mesh(geometry, material);
    // действия после успешной загрузки
});

1

var mixer = new THREE.AnimationMixer(mesh);

1
2

var clips = THREE.AnimationClip.CreateFromMorphTargetSequences(geometry.morphTargets, 30);
mixer.clipAction(clips[0]).play(); // запустите первую анимацию

1
2
3
4
5

function animate() {
    requestAnimationFrame(animate);
    mixer.update(deltaTime);
    // обновление сцены и рендеринг
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

var scene, camera, renderer, mixer;

init();
animate();

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var loader = new THREE.JSONLoader();
    loader.load('model.json', function (geometry, materials) {
        var material = new THREE.MeshFaceMaterial(materials);
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        mixer = new THREE.AnimationMixer(mesh);
        var clips = THREE.AnimationClip.CreateFromMorphTargetSequences(geometry.morphTargets, 30);
        mixer.clipAction(clips[0]).play();
    });

    camera.position.z = 5;
}

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

    if (mixer) {
        mixer.update(deltaTime);
    }
}