ThreeJS第一人称视角处理

简介

第一人称控件指针锁定API允许您在游戏界面中锁定鼠标或其他指针设备，以便您不用绝对定位光标就可以获得坐标变化值，从而准确地判断用户正在做什么，并且还可以防止用户意外地进入另一块屏幕或别的什么地方，从而导致误操作。

在ThreeJs中实现第一人称操作有一个控件FirstPersonControl, 但是就这个控件使用起来有一些弊端; 所以我们这边使用PointerLockControls写了一个控件。

常用方法属性

方法属性	描述
getObject().translateX	锁定控件对象，可通过此设置锁定控件的位置
isLocked	判断当前鼠标是否锁定
Lock	鼠标锁定开始

使用方法：

1、首先需要引入 PointerLockControls 控件文件

2、创建PointerLockControls对象，并把相机传入，放到我们的场景中
let controls = new THREE.PointerLockControls( camera );
scene.add(controls );

3、鼠标锁定只有通过用户才能触发，所以需要在页面上添加dom标签，并实现点击之后锁定

点击要实现如下方法 control.lock();

当我们锁定了这个控件之后，鼠标移动只会改变在场景中的视角，是不能够选中其他东西的，退出点击键盘Esc键。

4、通过实例化的对象可以通过 getObject() 获取到控制对象，可以设置它的位置来调整进入场景的位置。最后将对象放置到 scene 场景当中。

controls.getObject().position.y = 50;
controls.getObject().position.x = 100;
scene.add( controls.getObject() );

5、最后，在 render 当中，我们让 controls 调用 update 函数实现更新

controls.getObject().translateX( velocity.x * delta );
controls.getObject().translateY( velocity.y * delta );
controls.getObject().translateZ( velocity.z * delta );

这里我们注意一下controls.getObject().translateX( velocity.x * delta )方法和直接改变位置
controls.getObject().position.x += ( velocity.x * delta )的区别，translate方法会根据视角重新调整前后左右，而直接修改位置则以最先视角准，不会修改主视角。

实现按键移动

我们要实现可以通过键盘案例进行控制器位置调整，首先就是要监听事件，所以我们监听的键盘按下事件和键盘抬起事件：

document.addEventListener( 'keydown', onKeyDown, false );
document.addEventListener( 'keyup', onKeyUp, false );

当鼠标按下时，开始移动

var onKeyDown = function ( event ) {
  switch ( event.keyCode ) {
  case 38: // up
  case 87: // w
  moveForward = true;
  break;
  case 37: // left
  case 65: // a
  moveLeft = true;
  break;
  case 40: // down
  case 83: // s
  moveBackward = true;
  break;
  case 39: // right
  case 68: // d
  moveRight = true;
  break;
  case 32: // space
  if ( canJump === true ) velocity.y += 350;
    canJump = false;
    break;
  }
};

当鼠标抬起来时，停止移动

var onKeyUp = function ( event ) {
switch ( event.keyCode ) {
case 38: // up
case 87: // w
moveForward = false;
break;
case 37: // left
case 65: // a
moveLeft = false;
break;
case 40: // down
case 83: // s
moveBackward = false;
break;
case 39: // right
case 68: // d
moveRight = false;
break;
}
};

最后，在 render 渲染中，进行判断当前的移动方向，实现的当前的移动，

var time = performance.now();
var delta = ( time - prevTime ) / 1000;
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
direction.z = Number( moveForward ) - Number( moveBackward );
direction.x = Number( moveLeft ) - Number( moveRight );
direction.normalize(); // this ensures consistent movements in all directions
if ( moveForward || moveBackward ) velocity.z -= direction.z * 400.0 * delta;
if ( moveLeft || moveRight ) velocity.x -= direction.x * 400.0 * delta;
controls.getObject().translateX( velocity.x * delta );
//controls.getObject().position.x += ( velocity.x * delta );
controls.getObject().translateY( velocity.y * delta );
//controls.getObject().position.y += ( velocity.y * delta ); // new behavior
//controls.getObject().position.z += ( velocity.z * delta ); // new behavior
controls.getObject().translateZ( velocity.z * delta );

使用Raycaster实现简单的碰撞检测

比如当我们在场景中撞到墙的时候是不能穿越墙的，这里就要用到碰撞检测。他所用的原理就是如果选中了就代表着要和他接触，如果接触就设定不能再往前了，就是这样一个检测，我们这里举例只使用了上下（垂直方向）碰撞。

raycaster.ray.origin.copy( controls.getObject().position );
raycaster.ray.origin.y -= 10;
var intersections = raycaster.intersectObjects( objects );
var onObject = intersections.length > 0;
if ( onObject === true ) {
velocity.y = Math.max( 0, velocity.y );
canJump = true;
}
if ( controls.getObject().position.y < 10 ) {
velocity.y = 0;
controls.getObject().position.y = 10;
canJump = true;
}

举例：

第一步：添加模拟游览按钮

模拟游览

第二步：点击按钮，锁定第一人称视角游览控件。

    document.getElementById("tour").addEventListener('click', function () {
        store.lockControl();
    }, false);

第三步：

function Store3D() {
    this.spriteIsShow=1; // 存在精灵系统 如：标签之类的
}

  开启鼠标锁定

    Store3D.prototype.lockControl=function() {
        if(this.spriteIsShow==1) // 如果锁定的时候场景中有精力系统会报错 
        {
            this.changeSpriteShow(); // 所以锁定之前的时候调用方法 隐藏精灵系统，具体精灵系统自行了解
        }
        // 因为我们要模拟第一人称进入场景 所以我们改变相机的位置
        this.camera.position.y = 100; 
        // 改变相机的视角
        this.camera.lookAt(0,100,0);
        // 模拟人的眼睛 人的眼睛就相当于现在相机的位置
        this.lockcontrols.getObject().position.x =0;
        this.lockcontrols.getObject().position.y =100;
        this.lockcontrols.getObject().position.z =580;
        this.lockcontrols.lock(); // 调用lock这个时候就锁定控件鼠标了
    },

第四步：第一人称视角移动

Store3D.prototype.firstPersonMove=function(){
    // 如果当前是锁定的，就要进行第一视角的移动
    if ( this.lockcontrols.isLocked === true ) {
        // 首先设置射线 用来做碰撞测试
        // 射线的初始位置就是第一人称对象的位置 那么他的方向就是我前面对象的方向
        this.raycaster.ray.origin.copy( this.lockcontrols.getObject().position );
        // 我们这里举例只检测垂直方向
        // 那么他朝向的位置 是当前位置往下
        this.raycaster.ray.origin.y -= 10;
        // 查看是否相交 如果相交将所有物体放入intersections这个变量
        var intersections = this.raycaster.intersectObjects( this.objects );
        // 如果intersections.length大于0 则说明他与下面的物体相交了 这时将onObject设置为true
        var onObject = intersections.length > 0;
        // 每次都获取上一次的间隔时间 因为根据性能不同每次调用循环函数的时间都是不一样的
        var time = performance.now();
        // 为了不让性能影响操作的速度 我们将他设置为一个因数 所谓性能高那么间隔时间就短
        var delta = ( time - this.prevTime ) / 1000;
        // 设置一下（10）减速因子 他越快整个过程中速度就会越慢 减速的过程就会越快
        this.velocity.x -= this.velocity.x * 10.0 * delta;
        this.velocity.z -= this.velocity.z * 10.0 * delta;
        this.velocity.y -= 9.8 * 100.0 * delta; // y轴跳跃的速度 100.0 = mass 
        
        // 鼠标操作的时候控制方向 的变量
        // 如果正数就是往前 负数就是往后
        this.direction.z = Number( this.moveForward ) - Number( this.moveBackward );
        this.direction.x = Number( this.moveLeft ) - Number( this.moveRight );
        // this ensures consistent movements in all directions
        this.direction.normalize(); 
        //注意velocity向量，这是一个缓冲值，为了保证鼠标抬起后，场景不直接暂停，而是有一个简短的过渡效果：
        if ( this.moveForward || this.moveBackward ) this.velocity.z -= this.direction.z * 2000.0 * delta;
        if ( this.moveLeft || this.moveRight ) this.velocity.x -= this.direction.x * 2000.0 * delta;

// 如果onObject为true，
        if ( onObject === true ) {
            // 此时需要将y轴的速度设置为0和之前速度的最大值
            this.velocity.y = Math.max( 0, this.velocity.y );
            this.canJump = true;
        }
// 计算每次在x,y,z轴移动的距离
        this.lockcontrols.getObject().translateX( this.velocity.x * delta );
        this.lockcontrols.getObject().position.y += ( this.velocity.y * delta ); // new behavior
        this.lockcontrols.getObject().translateZ( this.velocity.z * delta );
// 为了保证我永远是高于地面的 所以我设置当y小于100时就让y等于100
        if ( this.lockcontrols.getObject().position.y < 100 ) {
            this.velocity.y = 0;
            this.lockcontrols.getObject().position.y = 100;
            this.canJump = true;
        }
        this.prevTime = time;
    }
},

第五步：设置鼠标控制

    /**
     * 初始化PointLockControl
     * 设置鼠标控制
     */
    Store3D.prototype.initPointLockControl=function(object){
        this.lockcontrols = new THREE.PointerLockControls( this.camera );
        this.raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 10 );
        // 设置键盘按下监听事件
        var onKeyDown = function ( event ) {
            switch ( event.keyCode ) {
                case 38: // up
                case 87: // w
                    object.moveForward = true;
                    break;
                case 37: // left
                case 65: // a
                    object.moveLeft = true;
                    break;
                case 40: // down
                case 83: // s
                    object.moveBackward = true;
                    break;
                case 39: // right
                case 68: // d
                    object.moveRight = true;
                    break;
                case 32: // space
                    if ( object.canJump === true ) object.velocity.y += 350;
                    object.canJump = false;
                    break;
            }
        };
        // 设置键盘抬起监听事件
        var onKeyUp = function ( event ) {
            switch ( event.keyCode ) {
                case 38: // up
                case 87: // w
                    object.moveForward = false;
                    break;
                case 37: // left
                case 65: // a
                    object.moveLeft = false;
                    break;
                case 40: // down
                case 83: // s
                    object.moveBackward = false;
                    break;
                case 39: // right
                case 68: // d
                    object.moveRight = false;
                    break;
            }
        };
        document.addEventListener( 'keydown', onKeyDown, false );
        document.addEventListener( 'keyup', onKeyUp, false );
    },