鼠标上下移动只改变相机视角

8.7小节给大家讲解了，通过鼠标左右移动，旋转玩家角色模型player，相机跟着player同步旋转。

player.add(camera);//相机作为player子对象

document.addEventListener('mousemove', (event) => {
    if(leftButtonBool){
        player.rotation.y -= event.movementX / 600;
    } 
});

本节课给大家讲解，鼠标上下移动后，只改变相机视角，但是不改变玩家角色模型的姿态角度,换句话说，就是玩家角色模型始终站在地面上不会倾斜。

有问题：通过player改变相机上下俯仰视角

event.movementY的值改变player.rotation.x的值，这样虽然可以通过player控制子对象相机视角上下俯仰，但是玩家角色模型也必须跟着旋转，这样会改变人与地面位置关系，你可以思考下，该怎么解决？

document.addEventListener('mousemove', (event) => {
    if(leftButtonBool){
        // 左右旋转
        player.rotation.y -= event.movementX / 600;
        // 玩家角色绕x轴旋转  视角上下俯仰
        player.rotation.x -= event.movementY / 600;
    } 
});

鼠标上下移动只改变相机视角，不改变player角度

可以在相机camera和玩家角色模型player之间，嵌入一个子节点cameraGroup，作为相机的父对象，作为玩家角色模型player的子对象。

// 层级关系：player  <—— camera
player.add(camera);//相机作为player子对象

// 层级关系：player <—— cameraGroup <—— camera
const cameraGroup = new THREE.Group();
cameraGroup.add(camera);
player.add(cameraGroup);

通过camera的父对象cameraGroup控制相机姿态角度变化。

document.addEventListener('mousemove', (event) => {
    if(leftButtonBool){
        // 左右旋转
        player.rotation.y -= event.movementX / 600;
        // 鼠标上下滑动，让相机视线上下转动
        // 相机父对象cameraGroup绕着x轴旋转,camera跟着转动
        cameraGroup.rotation.x -= event.movementY / 600;
    } 
});

限制视线上下浮动范围

你可以根据需要，约束上下浮动角度范围，比如我设置上下俯仰范围-15度~15度，共30度。

思路很简单，一旦判断.rotation.x小于-15度，就设置为-15度，大于15度，就设置为15度。

// 上下俯仰角度范围
const angleMin = THREE.MathUtils.degToRad(-15);//角度转弧度
const angleMax = THREE.MathUtils.degToRad(15);
document.addEventListener('mousemove', (event) => {
    if(leftButtonBool){
        // 左右旋转
        player.rotation.y -= event.movementX / 600;
        // 鼠标上下滑动，让相机视线上下转动
        // 相机父对象cameraGroup绕着x轴旋转,camera跟着转动
        cameraGroup.rotation.x -= event.movementY / 600;
        // 一旦判断.rotation.x小于-15，就设置为-15，大于15，就设置为15
        if (cameraGroup.rotation.x < angleMin) {
            cameraGroup.rotation.x = angleMin;
        }
        if (cameraGroup.rotation.x > angleMax) {
            cameraGroup.rotation.x = angleMax
        };
    } 
});