无法使用Three.js加载动画

如何解决无法使用Three.js加载动画

我正在将鸟的GLTF动画加载到我的3js应用程序中。有点困惑为什么它不起作用。如果控制台的对象是存储动画的数组索引为0。我也增加了旋转以进行测试，但也无法正常工作。非常感谢您的帮助。

var loader = new THREE.GLTFLoader();

loader.load("/assets/bird.gltf",function(gltf){
    
    //Loading in and positioning model
    var object = gltf.scene;
    object.scale.set(10,10,10);
    object.position.set (0,0);
    object.rotation.y = 0.5;

    //Playing Animation
     mixer = new THREE.AnimationMixer(gltf.scene);
     console.log(gltf.animations)
     mixer.clipAction( gltf.animations[0]).play();

    scene.add(object);  

});

解决方法

您确实没有正确更新THREE.AnimationMixer的实例。请创建THREE.Clock的实例，然后使用它来计算传递到混频器的时间增量值。查看更新的代码：

var scene,camera,renderer,controls,mixer,clock;
initialiseScene();
animate();

function initialiseScene() {

    //scene
    scene = new THREE.Scene( { antialias: true } );

    //FOV,Aspect ratio,Near clip,Far clip
    camera = new THREE.PerspectiveCamera( 75,window.innerWidth / window.innerHeight,1,20000 );

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

    clock = new THREE.Clock();

}

//CONTROLS
var controls = new THREE.OrbitControls( camera,renderer.domElement );
camera.position.set( - 50,50,0 );
controls.update();

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

//OBJECT LOADER
var loader = new THREE.GLTFLoader();

loader.load( "./assets/bird.gltf",function ( gltf ) {

    //Loading in and positioning model
    var object = gltf.scene;
    object.scale.set( 10,10,10 );
    object.position.set( 0,0 );
    object.rotation.y = 0.5;

    //Playing Animation
    mixer = new THREE.AnimationMixer( gltf.scene );
    console.log( gltf.animations );
    mixer.clipAction( gltf.animations[ 0 ] ).play();

    scene.add( object );

} );

//SKYBOX
const materialArray = [];
const texture_ft = new THREE.TextureLoader().load( 'assets/rainbow_ft.png' );
const texture_bk = new THREE.TextureLoader().load( 'assets/rainbow_bk.png' );
const texture_up = new THREE.TextureLoader().load( 'assets/rainbow_up.png' );
const texture_dn = new THREE.TextureLoader().load( 'assets/rainbow_dn.png' );
const texture_rt = new THREE.TextureLoader().load( 'assets/rainbow_rt.png' );
const texture_lf = new THREE.TextureLoader().load( 'assets/rainbow_lf.png' );

materialArray.push( new THREE.MeshBasicMaterial( { map: texture_ft } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: texture_bk } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: texture_up } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: texture_dn } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: texture_rt } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: texture_lf } ) );

for ( let i = 0; i < 6; i ++ )
    materialArray[ i ].side = THREE.BackSide;

const skyboxGeo = new THREE.BoxGeometry( 10000,10000,10000 );
const skybox = new THREE.Mesh( skyboxGeo,materialArray );
scene.add( skybox );

window.addEventListener( 'resize',() => {

    renderer.setSize( window.innerWidth,window.innerHeight );
    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

} );

//ANIMATE
function animate() {

    requestAnimationFrame( animate );

    if ( mixer ) mixer.update( clock.getDelta() );

    renderer.render( scene,camera );


}