使用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;
        }
    }

 

三、监听鼠标位置

       监听鼠标位置,当鼠标位于场景容器左侧时,开始型左转的动画,当鼠标位置位于容器右侧时,开始模型右转动画,其他位置时,模型停止旋转。

使用three.js实现跟随模型的第一人称、第三人称相机控制_第1张图片

四、更新相机位置

接下来就是更新相机了,实现相机跟随模型主要是通过控制相机位置(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)来实现,此时的相机位置需要设置在模型头部附近。

       关于障碍物检测,就是使用模型的位置和障碍物判断空间关系,即将相交时,停止当前模型动画和模型移动。

你可能感兴趣的:(three.js)