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

Пользователь

от aubree , в категории: JavaScript , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от chloe.keebler , 8 месяцев назад

@aubree 

Для запуска анимации в формате JSON модели с помощью three.js, вам понадобятся следующие шаги:

  1. Загрузите модель JSON с использованием THREE.JSONLoader. Настройте обработчик события onLoad, который будет вызываться после успешной загрузки модели.
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. Создайте экземпляр THREE.AnimationMixer и передайте ему scene и geometry, чтобы создать анимацию из модели.
1
var mixer = new THREE.AnimationMixer(mesh);


  1. Если ваша модель содержит несколько анимаций, вы можете получить список анимаций при помощи THREE.AnimationClip.CreateFromMorphTargetSequences и передать их в mixer.
1
2
var clips = THREE.AnimationClip.CreateFromMorphTargetSequences(geometry.morphTargets, 30);
mixer.clipAction(clips[0]).play(); // запустите первую анимацию


  1. В обновлении анимации в каждом кадре вызывайте метод mixer.update, чтобы обновить состояние анимации.
1
2
3
4
5
function animate() {
    requestAnimationFrame(animate);
    mixer.update(deltaTime);
    // обновление сцены и рендеринг
}


  1. Запустите анимацию вызовом requestAnimationFrame(animate).


Вот полный пример кода, который объединяет все перечисленные шаги:

 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);
    }
}


Убедитесь, что путь к файлу модели JSON (model.json) указан правильно в коде выше.