上节实现了镜头跟随,人物的静止、走路的动画切换:

这节来做方向控制功能。
想想你在玩设计游戏的时候 wasd 控制移动,那用什么控制方向呢?

鼠标!
鼠标左滑是左转,右滑是右转。
我们也实现这样的功能。
mousedown 的时候记录按下状态,mouseup 的时候改变状态。
mousemove 的时候,如果鼠标按下,就根据水平方向鼠标移动的距离来改变 rotation.y
写下试试:

let mousePressed = false;
document.addEventListener('mousedown', () => {
mousePressed = true;
});
document.addEventListener('mousemove', (e) => {
if(mousePressed) {
mesh.rotation.y -= e.movementX;
}
});
document.addEventListener('mouseup', () => {
mousePressed = false;
});
鼠标按下的时候,mousemove 根据 movementX 来移动 rotation。
试一下:

移动太快了,除以 500


这样就好多了。
但现在只是身子转过去了,走的时候还是沿着原来的方向:

改一下:

const dir = camera.getWorldDirection(new THREE.Vector3());
因为相机跟着人一起转,所以获取现在的相机方向就好了。

相机是在人后方上面往下看,所以方向往下去了。
我们改一下相机位置,让它水平看:

camera.position.y = 150;
camera.position.z = 300;
camera.lookAt(0, 150, 0);
再试下:

这样,调整方向后就是朝实时的新方向走了。
案例代码上传了小册仓库
总结
这节我们实现了方向调整功能。
首先监听 mousemove,根据 movementX 来调整 rotation 实现人物转向。
转向之后通过 camera.getWorldDriection 获取最新的相机方向。
然后渲染循环里每次移动都是朝着新方向,这样就实现了转向功能。