JimYuan's Blog

Sharing the things I learned

0%

FPS in ThreeJS

Posted on

Preface

It’s been a while that I updated my blog, and it’s about time. I spent some time learning Three.js recently. Before this, I only know basic html, css and javascript. Though some people might think that’s totally enough for being a front-end developer in the old days, there’s tons of great tools I needed to catch up with. I think I will catch up through doing some side projects.

To name a few, which at this point, I think I should definitely check them out in near future.

  • TypeScript
  • React
  • Webpack

FrontEnd - Roadmap

By a quick google search,
https://roadmap.sh/frontend

Though I am not sure if I will end up being a front-end developer, I want to put AEC models on web, so it kinda means I have to learn these…
I’ll do my best.

First Person Shooter

https://en.wikipedia.org/wiki/First-person_shooter

Basically, I was following this tutorial.
https://www.youtube.com/watch?v=Q_I0Tq61Ud8&t=744s

So, yeah.

The key ideas is to combine thess two parts.

  • PointerLockContorls
  • wasd control

https://threejs.org/docs/#examples/en/controls/PointerLockControls

PointerLockContorls

1
2
3
4
5
6
7
8
import {
  PointerLockControls
} from "three/examples/jsm/controls/PointerLockControls"

const controls = new PointerLockControls(camera, document.domElement);
window.addEventListener("click", () => {
  controls.lock();
});

wasd contorls

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
//前進か後進か変数宣言
let moveForward = false;
let moveBackward = false;
let moveLeft = false;
let moveRight = false;

//移動速度と移動方向の定義
const velocity = new THREE.Vector3();
const direction = new THREE.Vector3();



const onKeyDown = (e) => {
  switch (e.code) {
    case "KeyW":
      moveForward = true;
      console.log(moveForward)
      break;
    case "KeyS":
      moveBackward = true;
      break;
    case "KeyA":
      moveLeft = true;
      break;
    case "KeyD":
      moveRight = true;
      break;
  }
};

const onKeyUp = (e) => {
  switch (e.code) {
    case "KeyW":
      moveForward = false;
      console.log(moveForward)
      break;
    case "KeyS":
      moveBackward = false;
      break;
    case "KeyA":
      moveLeft = false;
      break;
    case "KeyD":
      moveRight = false;
      break;
  }
};


document.addEventListener("keydown", onKeyDown);
document.addEventListener("keyup", onKeyUp);

let prevTime = performance.now();


function animate() {
  requestAnimationFrame(animate);

  const time = performance.now();


  // 前進後進判定
  direction.z = Number(moveForward) - Number(moveBackward);
  direction.x = Number(moveLeft) - Number(moveRight);


  //ポインターがONになったら
  if (controls.isLocked) {
    const delta = (time - prevTime) / 1000;

    // decline
    velocity.z -= velocity.z * 5.0 * delta;
    velocity.x -= velocity.x * 5.0 * delta;

    if (moveForward || moveBackward) {
      velocity.z -= direction.z * 200 * delta;
    }

    if (moveRight || moveLeft) {
      velocity.x -= direction.x * 200 * delta;
    }



    controls.moveForward(-velocity.z * delta);
    controls.moveRight(-velocity.x * delta);
  }
  prevTime = time;
  renderer.render(scene, camera);
}

animate();