How to use the FirstPersonControls function from three

Find comprehensive JavaScript three.FirstPersonControls code examples handpicked from public code repositorys.

index.js

33
34
35
36
37
38
39
40
41
42
var renderer = new THREE.WebGLRenderer({canvas: roomCanvas});
renderer.setSize( roomCanvas.width, roomCanvas.height, false );

function addControls(){
    
    var controls = new THREE.FirstPersonControls(camera, roomCanvas);
    controls.lookSpeed = 0.2;
    controls.movementSpeed = 40;
    controls.noFly = false;
    controls.lookVertical = true;

+ 2 other calls in file

README.md?plain=1

GitHub: haosong/3D-Online-FPS

214
215
216
217
218
219
220
221
222
223


### 2.12 Control
有了界面以后，我们需要动态的控制我们的人物去运动。本质上我们就是控制场景中的Camera随着鼠标的移动以及键盘的操作，来进行相应的运动。我们使用FirstPersonControls这个控制类。在实现原理上，FirstPersonControls.js监听来自WASD以及上下左右键的事件，然后吧camera的position进行相应的移动。同时监听鼠标的移动操作，获取当前鼠标位置与页面中心点的位置偏差，然后利用这个位置偏差计算camera的lookAt角度。用以上两点，来模拟出这个第一视角控制类。我们通过如下代码添加这个control。
```javascript
controls = new THREE.FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 150;
controls.lookSpeed = 0.3;
controls.lookVertical = true;
```

index.js

GitHub: papermashea/cosmos

69
70
71
72
73
74
75
76
77
78
  stars.init(scene, universeScale);
  constll.init(scene, camera, universeScale);

  // CONTROLS
  controls = new THREE.OrbitControls( camera, renderer.domElement );
  //controls = new THREE.FirstPersonControls(camera);
  //controls.movementSpeed = 1;
  //controls.lookSpeed = 0.125;
  //controls.lookVertical = true;
};

AppWeb.js

GitHub: cjgammon/webvr-template

73
74
75
76
77
78
79
80
81
82
    this.renderer.effect.requestPresent();
    this.enterButton.classList.remove('show');
}

exitVR() {
    this.controls = new THREE.FirstPersonControls(this.renderer.camera);
    this.controls.lookSpeed = 0.05;
    this.controls.movementSpeed = 0;

    this.renderer.effect.exitPresent();

+ 3 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About