|
匀速动画（向量表示速度）
前面介绍过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();
|