Can'；t使用three.js加载动画

我正在将一只鸟的GLTF动画加载到我的3js应用程序中。有点困惑为什么它不起作用。如果控制台日志te对象的数组索引为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, 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场景、摄影机、渲染器、控件、混合器、时钟；
initialiseScene（）；
制作动画（）；
函数initialiseScene（）{
//场面
scene=new-THREE.scene（{antialas:true}）；
//视场、纵横比、近剪辑、远剪辑
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，12000）；
//渲染器
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
时钟=新的三个时钟（）；
}
//控制
var controls=新的三个.OrbitControls（camera、renderer.doElement）；
摄像机位置设置（-50,50,0）；
控件更新（）；
//轻的
var灯光=新的三个环境灯光（0x404040，5）；//柔和的白光
场景。添加（灯光）；
//对象加载器
var loader=new THREE.GLTFLoader（）；
loader.load（“./assets/bird.gltf”，函数（gltf）{
//装载定位模型
var object=gltf.scene；
object.scale.set（10,10,10）；
object.position.set（0,0,0）；
object.rotation.y=0.5；
//播放动画
mixer=new THREE.AnimationMixer（gltf.scene）；
console.log（gltf.animations）；
mixer.clipAction（gltf.animations[0]）.play（）；
场景。添加（对象）；
} );
//天空盒
常数材料阵列=[]；
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（新的三网格基本材质（{map:texture_ft}））；
materialArray.push（新的三网格基本材质（{map:texture_bk}））；
materialArray.push（新的3.MeshBasicMaterial（{map:texture_up}））；
materialArray.push（新的三网格基本材质（{map:texture_dn}））；
materialArray.push（新的三网格基本材质（{map:texture_rt}））；
materialArray.push（新的三网格基本材质（{map:texture_lf}））；
for（设i=0；i<6；i++）
材料排列[i]。侧面=三。背面；
const skyboxGeo=新的三个.BoxGeometry（10000,10000,10000）；
常数skybox=新的三个网格（skyboxGeo，materialArray）；
场景.添加（skybox）；
window.addEventListener（'resize'，（）=>{
renderer.setSize（window.innerWidth、window.innerHeight）；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
} );
//生动活泼
函数animate（）{
请求动画帧（动画）；
if（mixer）mixer.update（clock.getDelta（））；
渲染器。渲染（场景、摄影机）；
}

您确实没有正确更新

THREE.AnimationMixer

的实例。请创建

THREE.Clock

的实例，然后使用它计算传递给混音器的时间增量值。查看更新的代码：

var场景、摄影机、渲染器、控件、混合器、时钟；
initialiseScene（）；
制作动画（）；
函数initialiseScene（）{
//场面
scene=new-THREE.scene（{antialas:true}）；
//视场、纵横比、近剪辑、远剪辑
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，12000）；
//渲染器
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
时钟=新的三个时钟（）；
}
//控制
var controls=新的三个.OrbitControls（camera、renderer.doElement）；
摄像机位置设置（-50,50,0）；
控件更新（）；
//轻的
var灯光=新的三个环境灯光（0x404040，5）；//柔和的白光
场景。添加（灯光）；
//对象加载器
var loader=new THREE.GLTFLoader（）；
loader.load（“./assets/bird.gltf”，函数（gltf）{
//装载定位模型
var object=gltf.scene；
object.scale.set（10,10,10）；
object.position.set（0,0,0）；
object.rotation.y=0.5；
//播放动画
mixer=new THREE.AnimationMixer（gltf.scene）；
console.log（gltf.animations）；
mixer.clipAction（gltf.animations[0]）.play（）；
场景。添加（对象）；
} );
//天空盒
常数材料阵列=[]；
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（新的三网格基本材质（{map:texture_ft}））；
materialArray.push（新的三网格基本材质（{map:texture_bk}））；
materialArray.push（新的3.MeshBasicMaterial（{map:texture_up}））；
materialArray.push（新的三网格基本材质（{map:texture_dn}））；
materialArray.push（新的三网格基本材质（{map:texture_rt}））；
materialArray.push（新的三网格基本材质（{map:texture_lf}））；
for（设i=0；i<6；i++）
材料排列[i]。侧面=三。背面；
const skyboxGeo=新的三个.BoxGeometry（10000,10000,10000）；
常数skybox=新的三个网格（skyboxGeo，materialArray）；
场景。添加（s）