FirstPersonControls.js

https://github.com/josdirksen/learning-threejs/blob/master/chapter-09/07-first-person-camera.html

代码参考了
知乎作者：AanYip So https://zhuanlan.zhihu.com/p/20796329

1 . 先定义相机控件和间隔时间

1
2
let control;
const clock = new THREE.Clock(); //用于计算两次animationFrame之间间隔时间

2 . 在init（）函数里添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*第一人称视觉*/
        control = new THREE.FirstPersonControls( camera, canvas);
        control.movementSpeed = 100;   //镜头移速
        control.lookSpeed = 0.125;  //视觉改变速度
        control.lookVertical = true;  //是否允许视觉上下改变

        camera.lookAt(new THREE.Vector3(0, 0, 0));
       // window.addEventListener('mousemove', this.onMouseMove, false);
       //根据官方源码写的话如下
        var _onMouseMove = bind( control, control.onMouseMove );
        control.domElement.addEventListener( 'mousemove', _onMouseMove, false );
        
        function bind( scope, fn ) {

            return function () {

                fn.apply( scope, arguments );

            };

        }

3 . 添加到动画中再渲染

firstPersoncontrols.update(clock.getDelta());  //此处传入的delta是两次animationFrame的间隔时间，用于计算速度 

1
2
3
4
5
6
move() {
  control.update( clock.getDelta() );   

  renderer.render(scene,camera);
  requestAnimationFrame(()=>this.move());
}