teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問FPSの視点移動はなぜカーソルが画面端までいって止まることがないのですか？

編集履歴

質問編集履歴

5

コメントがおかしかったです

2021/07/19 10:27

投稿

9nahito
9nahito

スコア45

test CHANGED
File without changes
test CHANGED
@@ -158,13 +158,13 @@
158
158
 
159
159
  document.addEventListener("mousemove",function(event){
160
160
 
161
- const movementX = event.movementX || 0;//マウス座標X の取得 || はどちらかが True
161
+ const movementX = event.movementX || 0;//マウス移動量X の取得 || はどちらかが True
162
-
162
+
163
- // || 0　はたぶんマウスが動かなくなったら movementX = 0になるたぶん
163
+ // || 0　はたぶんマウスが動かなくなったら movementX = 0になる
164
-
164
+
165
- // ↑↑マウスが動かないときでも 0 じゃなかったら 次にマウスを動かした際 視点の変化量が前の値になっているので 急に動いておかしくなる
165
+ // ↑↑マウスが動かないときでも 0 じゃなかったら 次にマウスを動かした際 視点の変化量が前の値になったままなので 急に動いておかしくなる
166
-
166
+
167
- const movementY = event.movementY || 0;//マウス座標Y の取得
167
+ const movementY = event.movementY || 0;//マウス移動量Y の取得
168
168
 
169
169
 
170
170
 
@@ -172,7 +172,7 @@
172
172
 
173
173
 
174
174
 
175
- _euler.y -= movementX * MouseSensitivity;//マウス座標に応じて 視点の変化量を決める
175
+ _euler.y -= movementX * MouseSensitivity;//マウスの移動量に応じて 視点の変化量を決める
176
176
 
177
177
  _euler.x -= movementY * MouseSensitivity;//
178
178
 

4

タイトルを訂正しました

2021/07/19 10:27

投稿

9nahito
9nahito

スコア45

test CHANGED
@@ -1 +1 @@
1
- マウスの視点移動で画面端でカーソルが引っかからないようにしたいです
1
+ FPSの視点移動はなぜカーソルが画面端までいって止まることがないのですか？
test CHANGED
File without changes

3

質問を少し付け加えました

2021/07/19 10:03

投稿

9nahito
9nahito

スコア45

test CHANGED
@@ -1 +1 @@
1
- マウスの視点移動で画面端でマウスが引っかからないようにしたいです
1
+ マウスの視点移動で画面端でカーソルが引っかからないようにしたいです
test CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  マウスが**画面端まで行くとマウスが画面端に引っ掛かり、視点移動が止まってしまいます**。
4
4
 
5
+ なぜFPSゲームなどの視点移動は画面端までカーソルが動くことによってそれ以上視点が動かせなくならないのですか？
6
+
5
7
  マウスの視点移動で画面端でマウスが引っかからないようにするにはどうすれば良いですか？
6
8
 
7
9
  また画面外でもマウスの座標を取得できたりしませんか？

2

コードの解説などを改善しました

2021/07/19 09:55

投稿

9nahito
9nahito

スコア45

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  </canvas>
26
26
 
27
-
27
+
28
28
 
29
29
  <!--Three.jsファイルロード-->
30
30
 
@@ -32,7 +32,7 @@
32
32
 
33
33
  </script>
34
34
 
35
-
35
+
36
36
 
37
37
  <script>
38
38
 
@@ -58,9 +58,9 @@
58
58
 
59
59
  window.addEventListener("resize",function(event){
60
60
 
61
- width = window.innerWidth
61
+ width = window.innerWidth//タブ領域を含まないウィンドウサイズ
62
-
62
+
63
- height = window.innerHeight
63
+ height = window.innerHeight//
64
64
 
65
65
  renderer.setSize(width,height)
66
66
 
@@ -76,13 +76,13 @@
76
76
 
77
77
  renderer.setSize(width,height)
78
78
 
79
-
79
+
80
80
 
81
81
  var scene=new THREE.Scene()
82
82
 
83
-
84
-
83
+
84
+
85
- var camera=new THREE.PerspectiveCamera(45,width/height)
85
+ var camera=new THREE.PerspectiveCamera(45,width/height)//視野角,アスペクト比
86
86
 
87
87
  camera.position.set(0,0,0)
88
88
 
@@ -90,11 +90,11 @@
90
90
 
91
91
 
92
92
 
93
-
94
-
93
+
94
+
95
- const box0 = new THREE.Mesh(
95
+ const box0 = new THREE.Mesh(//青色の箱
96
-
96
+
97
- new THREE.BoxGeometry(1,1,1),//,がいる 箱の大きさ
97
+ new THREE.BoxGeometry(1,1,1),//箱の大きさ
98
98
 
99
99
  new THREE.MeshBasicMaterial({color:"blue"})
100
100
 
@@ -104,11 +104,11 @@
104
104
 
105
105
  scene.add(box0)
106
106
 
107
-
108
-
107
+
108
+
109
- var box1=new THREE.Mesh(//45度付近
109
+ var box1=new THREE.Mesh(//赤色の箱
110
-
110
+
111
- new THREE.BoxGeometry(1,1,1),
111
+ new THREE.BoxGeometry(1,1,1),//箱の大きさ
112
112
 
113
113
  new THREE.MeshBasicMaterial({color:"red"})
114
114
 
@@ -120,9 +120,9 @@
120
120
 
121
121
 
122
122
 
123
- var box2=new THREE.Mesh(
123
+ var box2=new THREE.Mesh(//オレンジの箱
124
-
124
+
125
- new THREE.BoxGeometry(1,1,1),
125
+ new THREE.BoxGeometry(1,1,1),//箱の大きさ
126
126
 
127
127
  new THREE.MeshBasicMaterial({color:"orange"})
128
128
 
@@ -134,9 +134,9 @@
134
134
 
135
135
 
136
136
 
137
- var box3=new THREE.Mesh(
137
+ var box3=new THREE.Mesh(//緑の箱
138
-
138
+
139
- new THREE.BoxGeometry(1,1,1),
139
+ new THREE.BoxGeometry(1,1,1),//箱の大きさ
140
140
 
141
141
  new THREE.MeshBasicMaterial({color:"green"})
142
142
 
@@ -160,9 +160,7 @@
160
160
 
161
161
  // || 0　はたぶんマウスが動かなくなったら movementX = 0になるたぶん
162
162
 
163
- // マウスが動かないときでも 0 じゃなかったら 次動かすときに 視点の変化量がおかしくなる
163
+ // ↑↑マウスが動かないときでも 0 じゃなかったら 次にマウスを動かした際 視点の変化量が前の値になっているので 急に動いておかしくなる
164
-
165
- //movementXをconsole.log()で出力してみるとわかりやすい
166
164
 
167
165
  const movementY = event.movementY || 0;//マウス座標Y の取得
168
166
 
@@ -172,7 +170,7 @@
172
170
 
173
171
 
174
172
 
175
- _euler.y -= movementX * MouseSensitivity;//マウス座標に応じて 変化量を決める
173
+ _euler.y -= movementX * MouseSensitivity;//マウス座標に応じて 視点の変化量を決める
176
174
 
177
175
  _euler.x -= movementY * MouseSensitivity;//
178
176
 
@@ -180,9 +178,9 @@
180
178
 
181
179
  _euler.x = Math.max( Math.PI/2 - Math.PI, Math.min( Math.PI/2 - 0, _euler.x ) );
182
180
 
183
- camera.quaternion.setFromEuler( _euler );//cameraのquaternionにオイラー角適応たぶんｗ
181
+ camera.quaternion.setFromEuler( _euler );//cameraのquaternionにオイラー角適応たぶん
184
-
185
-
182
+
183
+
186
184
 
187
185
  //↑↑----------------------------------------------------------------------------
188
186
 
@@ -192,21 +190,11 @@
192
190
 
193
191
 
194
192
 
195
- context.font="40px HGRE"
196
-
197
- context.fillStyle = "white"
198
-
199
193
  function animation(){
200
194
 
201
195
  renderer.render(scene,camera)//レンダリング
202
196
 
203
- requestAnimationFrame(animation)
197
+ requestAnimationFrame(animation)//ブラウザの更新毎で実行する
204
-
205
-
206
-
207
-
208
-
209
-
210
198
 
211
199
  }
212
200
 
@@ -216,7 +204,7 @@
216
204
 
217
205
  </body>
218
206
 
219
-
207
+
220
208
 
221
209
  </html>
222
210
 

1

不要なコードの削除

2021/07/19 09:37

投稿

9nahito
9nahito

スコア45

test CHANGED
File without changes
test CHANGED
@@ -42,10 +42,6 @@
42
42
 
43
43
  var height = window.innerHeight
44
44
 
45
- var space = false
46
-
47
- var speed = 0.01//回転速度
48
-
49
45
  var canvas = document.getElementById("UI")
50
46
 
51
47
  var context = canvas.getContext("2d")
@@ -96,7 +92,7 @@
96
92
 
97
93
 
98
94
 
99
- const box0 = new THREE.Mesh(//-45度付近
95
+ const box0 = new THREE.Mesh(
100
96
 
101
97
  new THREE.BoxGeometry(1,1,1),//,がいる 箱の大きさ
102
98