Javascript Three.js程序返回："；无法读取属性'；0'；“未定义”的定义；

以下代码用于根据四元数数据设置对象的动画：

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（{antialas:true，alpha:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var geometry=新的3.BoxGeometry（1,0.3,2）；
var material=new THREE.MeshBasicMaterial（{color:0xf4b942}）；
var obj=新的三个网格（几何体、材质）；
场景。添加（obj）；
var几何=新的三点几何（1,0.3,2）；
var edges=新的三条边几何体（几何体）；
var lines=新的三个.LineSegments（边，新的三个.LineBasicMaterial（{color:0x000000}））；
场景。添加（行）；
摄像机位置z=5；
渲染器。渲染（场景、摄影机）；
var xpos_o=obj.rotation.x；
var ypos_o=对象旋转y；
var zpos_o=对象旋转.z；
var xpos_lo=lines.rotation.x；
var ypos_lo=lines.rotation.y；
var zpos_lo=行.旋转.z；
设i=0；设m=0；
var animate=函数（四元数据）{
请求动画帧（动画）；
如果（m%5==0 | | m==0）{
如果（m！==0）{i++；}
如果（i>=quat_data.length）{
对象旋转x=xpos\u o；
对象旋转y=ypos_o；
物体旋转z=zpos_o；
lines.rotation.x=xpos\u lo；
lines.rotation.y=ypos_lo；
直线旋转z=zpos_lo；
i=0；
}
设quat=quat_数据[i]；
变量四元数=新的三个四元数（四元数[0]，四元数[1]，四元数[2]，四元数[3]）；
对象应用四元数（四元数）；
行。应用四元数（四元数）；
渲染器。渲染（场景、摄影机）；
}
m++；
}
var animate1=函数（）{
var quat_数据1=[[0.681492531，-0.01453572,0.711492547，-0.170668778]，
[-0.81103207,0.125979118,0.555748976,-0.132257921  ],
[-0.459080697,-0.267181198,-0.846533742,0.035103342  ],
[0.874097952,-0.166578614,-0.244525976,0.385231457  ],
...
制作动画（quat_data1）；
}
var animate2=函数（）{
var quat_数据2=[-0.395306087，-0.567475272，-0.168275478，-0.702416024]，
[0.591221013,-0.226393713,-0.208636898,0.745435603  ],
[-0.279990579,0.754847831,0.56444738,-0.182233852  ],
[-0.419803039,-0.623439075,-0.538698243,-0.380648559  ],
[0.878036311,0.088829796,-0.024437397,0.469642749  ],
...
制作动画（quat_数据2）；
}
var animate3=函数（）{
var quat_数据3=[-0.17958507,0.232682609，-0.217296778，-0.930800793]，
[-0.178598829,0.228014038,-0.2182292,-0.931927075  ],
[-0.177601473,0.223351625,-0.219152185,-0.933029522  ],
[-0.176574343,0.218685883,-0.220066047,-0.934113976  ],
[-0.175533915,0.214015872,-0.22097227,-0.935177153  ],
[-0.174483815,0.209350901,-0.221866773,-0.936217247  ],
[-0.173407996,0.204681945,-0.222753878,-0.937238325  ],
...
制作动画（quat_数据3）；
}

我省略了一些

四元数

数据，并将其替换为椭圆以节省空间。开始部分只是建立场景的几何体。动画函数采用一个

四元数

的数组。在每次迭代

requestAnimationFrame

后，m增加1，并且每次达到一个多值5的例子，它执行动画代码。（这是因为我想将60 fps的

requestAnimationFrame

转换为12 fps。）动画代码将I增加1（移动到下一个

quaternion

）并应用

四元数

。如果i超过

四元数

数据数组的长度，则它将循环回到数据的开头，并重置对象的原始方向

还有另外三个函数，

animate1

、

animate2

和

animate3

，它们使用不同的

quaternion

数据集来执行

animate

函数

当我单击html代码中的按钮以执行

animate1

时，控制台在下一行给出问题中所述的错误：

var四元数=新的三个四元数（四元数[0]、四元数[1]、四元数[2]、四元数[3]）；

问题在于动画（

requestAnimationFrame

）在错误的位置和错误的回调目标执行。回调函数传递一个参数，即时间值

您所期望的是，函数

animate

的输入是动画数据的数组，但它是单个时间值

你必须这样做：

var animate=函数（quat_数据）{
requestAnimationFrame（函数（）{animate（quat_data）；}）；
// [...]
}

看起来您知道哪一行抛出了错误。您知道错误的含义吗？

var animate = function (quat_data) {
    requestAnimationFrame( animate );

    // [...]

    let quat = quat_data[i]; 
    var quaternion = new THREE.Quaternion(quat[0],quat[1],quat[2],quat[3]);

    // [...]
}