threejs课程笔记-19 位移、速度、加速度（向量）

匀速动画（向量表示速度）

前面介绍过threejs的Vector3类可以表示物体的位置，也可以表示物体速度、位移等有方向的量。 下面给写一个物体匀速运动的动画案例，已知物体的初始位置、物体的速度，然后写一个物体的运动动画效果。

向量表示物体速度

const v = new THREE.Vector3(10,0,10);//物体运动速度

速度 x 间隔时间，然后累加计算位移

const v = new THREE.Vector3(10,0,10);//物体运动速度
const clock = new THREE.Clock();//时钟对象
// 渲染循环
function render() {
    const spt = clock.getDelta();//两帧渲染时间间隔(秒)
    // 在spt时间内，以速度v运动的位移量
    const dis = v.clone().multiplyScalar(spt);
    // 网格模型当前的位置加上spt时间段内运动的位移量
    mesh.position.add(dis);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

 物体下落动画（重力加速度）

本节课给大家讲解一个物体抛出去落在地面的动画效果，注意学习本节课内容之前，确保你已经掌握上节课关于匀速动画的讲解

已知条件

// 物体初始位置
mesh.position.set(0,100,0);

//物体初始速度
const v = new THREE.Vector3(30,0,0);

//重力加速度 重力加速度是y轴的负方向
const g = new THREE.Vector3(0, -9.8, 0);

速度 x 间隔时间，然后累加计算位移

• 速度v = 加速度g x 时间t
• 位移x = 速度v x 时间t

重力加速度乘以每次渲染时间，与原来的速度累加，可以更新当前的速度。

const v = new THREE.Vector3(30, 0, 0);    //物体初始速度
const clock = new THREE.Clock();          //时钟对象
const g = new THREE.Vector3(0, -9.8, 0);  //重力加速度
// 渲染循环
function render() {
    if (mesh.position.y > 0) {
        const spt = clock.getDelta();//两帧渲染时间间隔(秒)
        //spV:重力加速度在时间spt内对速度的改变
        const spV = g.clone().multiplyScalar(spt);
        v.add(spV);//v = v + spV  更新当前速度
        // 在spt时间内，以速度v运动的位移量
        const dis = v.clone().multiplyScalar(spt);
        // 网格模型当前的位置加上spt时间段内运动的位移量
        mesh.position.add(dis);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();