使用three.js實現跟隨模型的第一人稱、第三人稱相機控制

       最近在我原有的“室內場景demo”的基礎上做了一個跟隨模型的第三人稱相機控制，以鍵盤wasd控制模型的行走，以鼠標控制模型的朝向。

在線地址

一、加載帶動畫的FBX模型

這裏使用了three.js中的FBXLoader來加載模型，模型加載完成之後創建動畫不播放，等鍵盤按下之後再播放動畫。

二、監聽鍵盤事件

鍵盤的按下和擡起都可以通過事件捕捉，當鼠標按下時，我們播放FBX模型的動畫，鼠標擡起時，結束動畫。

window.addEventListener('keydown', function (e) {
         keyDownWalk(e);
});
window.addEventListener('keyup', function (e) {
     keyUpWalkStop(e);
});

同時每個鍵都對應了一個鍵碼keyCode，也是唯一編碼。w鍵對應的值爲87，a鍵對應的值爲65，d鍵對應的值爲68，s鍵對應的值爲83，我們以w爲向前、a爲向左、s爲向後、d爲向右，更改模型人物的位置。

function keyDownWalk(e) {
        let keyCode = e.keyCode;
        let position = walkingMan.position, rotation = walkingMan.rotation.y;
        switch (keyCode) {
            case 87:        //w
                position.x += 0.02 * Math.cos(rotation);
                position.z += 0.02 * Math.sin(-rotation);
                break;
            case 65:        //a
                position.x += 0.02 * Math.cos(rotation + Math.PI/2);
                position.z += 0.02 * Math.sin(-rotation - Math.PI/2);
                break;
            case 68:        //d
                position.x += 0.02 * Math.cos(rotation - Math.PI/2);
                position.z += 0.02 * Math.sin(-rotation + Math.PI/2);
                break;
            case 83:        //s
                position.x -= 0.02 * Math.cos(rotation);
                position.z -= 0.02 * Math.sin(-rotation);
                break;
            default:
                break;
        }
    }

 

三、監聽鼠標位置

       監聽鼠標位置，當鼠標位於場景容器左側時，開始型左轉的動畫，當鼠標位置位於容器右側時，開始模型右轉動畫，其他位置時，模型停止旋轉。

四、更新相機位置

接下來就是更新相機了，實現相機跟隨模型主要是通過控制相機位置（position）和相機目標點（lookAt）來實現，以第三人稱爲例，這裏的相機位置可以設置爲與模型角度相反的方向上，距離爲定值的一個點，相機的目標點爲模型頭部向上的位置。

let desPosX = eyePosition[0] + Math.sin(eyeRotation), desPosZ = eyePosition[2] + Math.cos(eyeRotation);
camera.position.set(eyePosition[0] - 1.5 * Math.sin(eyeRotation), eyePosition[1] + 1, eyePosition[2] - 1.5 * Math.cos(eyeRotation));
camera.lookAt(new THREE.Vector3(desPosX, eyePosition[1], desPosZ));

五、後續

        第一人稱和第三人稱類似，也是通過控制相機位置（position）和相機目標點（lookAt）來實現，此時的相機位置需要設置在模型頭部附近。

       關於障礙物檢測，就是使用模型的位置和障礙物判斷空間關係，即將相交時，停止當前模型動畫和模型移動。