Three.js - интерполяция ключевых кадров - PullRequest
Новая
       55

Three.js - интерполяция ключевых кадров

0 голосов
/ 19 октября 2019

Я получаю некоторые глюки при отключении объектов при установке их масштаба на 0.

Настройка:

Я получил куб с масштабом 1 в кадре 50& шкала 0 в кадре 51 .

Я в основном использую это, чтобы отключить объекты в моей анимации (используя gltf или fbx). Когда я играю анимацию в three.js, кажется, что ключевой кадр как-то интерполирован. Таким образом, между шкалой 1 и шкалой 0. есть небольшой сбой

Посмотрите здесь

Что я пробовал до сих пор:

  • Установка частоты кадров анимации 60 кадров в секунду
  • Установка фиксированной частоты кадров 50 кадров в секунду в three.js и настройка анимации 50 кадров в секунду
  • Экспорт из разных программ (cinema 4d &blender)
  • Экспорт в различные форматы (gltf & fbx)

У меня такое ощущение, что three.js все еще выполняет некоторые интерполяции для анимаций.

кто-нибудь знает обходной путь для этого?

1 Ответ

0 голосов
/ 19 октября 2019

Я забыл добавить свой код…

Модель загрузки кода: 

var loader = new THREE.GLTFLoader().setPath( 'gltf/' );

loader.load( 'test' +  '.glb', function ( gltf ) {
    gltf.scene.traverse( function ( child ) {
        scene.add(gltf.scene);
        const model = gltf.scene;
        mixer = new THREE.AnimationMixer( model );

    gltf.animations.forEach(( clip ) => {
        const animation = mixer.clipAction(clip);
        mixer.clipAction( gltf.animations[ 0 ] ).play();
        animation.play();
    });

Настройки рендеринга кода: 

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setClearColor( 0xffffff, 0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight*0.7 );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );

Код анимации 

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    render();
}

function render() {
    const delta = clock.getDelta();
    if (mixer && mixer !== null) {
        mixer.update(delta);
    }
}

renderer.render(scene, camera);
...