鼠标左右拖动改变玩家视角

本节课给大家讲解一个新功能，就是你按住鼠标左键，左右拖动，改变玩家角色和相机的视角。

了解鼠标滑动事件规则

如果你不了解前端HTML5鼠标滑动事件的规则，可以跟着视频学习一遍，如果你非常熟悉，可以直接快进到下一步。

// 鼠标滑动期间，会不停地多次触发鼠滑动事件，直到不再滑动
document.addEventListener('mousemove', (event) => {
    console.log('触发1次');
});

鼠标持续滑动时候，会多次触发滑动事件。event.movementX表示本次触发事件相对上次，鼠标左右方向滑动的距离，单位是像素，往右滑动是正，往左滑动是负。

document.addEventListener('mousemove', (event) => {
    console.log('鼠标每次x方向移动距离', event.movementX);
});

鼠标控制玩家转向

通过鼠标左右滑动距离控制玩家角色模型player旋转。

document.addEventListener('mousemove', (event) => {
    // 注意rotation.y += 与 -= 区别，左右旋转时候方向相反
    //event.movementX缩小一定倍数改变旋转控制的灵敏度
    player.rotation.y -= event.movementX / 600;
});

鼠标左键拖动时候，旋转玩家角色

鼠标左键拖动定义：鼠标左键按下，不松开，左右滑动

1. 记录鼠标左键状态

let leftButtonBool = false;//记录鼠标左键状态
document.addEventListener('mousedown', () => {
    leftButtonBool = true;
});
document.addEventListener('mouseup', () => {
    leftButtonBool = false;
});

2. 判断鼠标左键状态，决定是否旋转玩家角色

document.addEventListener('mousemove', (event) => {
    //鼠标左键按下时候，才旋转玩家角色
    if(leftButtonBool){
        player.rotation.y -= event.movementX / 600;
    } 
});

测试上节课代码：相机随着player旋转

上节课，给大家讲解过，相机对象是玩家角色模型的子对象，玩家角色player旋转的时候，子对象相机自然跟着同步旋转，你可以测试下执行player.add(camera)与不执行的区别。

//相机作为player子对象，会跟着player平移或旋转
player.add(camera);
camera.position.set(0, 1.6, -5.5);
camera.lookAt(0, 1.6, 0);