質問編集履歴
5
コメントがおかしかったです
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -78,14 +78,14 @@
|
|
|
78
78
|
var MouseSensitivity = 0.006
|
|
79
79
|
var _euler = new THREE.Euler( 0, 0, 0, 'YXZ' );//オイラー角?
|
|
80
80
|
document.addEventListener("mousemove",function(event){
|
|
81
|
-
const movementX = event.movementX || 0;//マウス
|
|
81
|
+
const movementX = event.movementX || 0;//マウス移動量X の取得 || はどちらかが True
|
|
82
|
-
// || 0 はたぶんマウスが動かなくなったら movementX = 0になる
|
|
82
|
+
// || 0 はたぶんマウスが動かなくなったら movementX = 0になる
|
|
83
|
-
// ↑↑マウスが動かないときでも 0 じゃなかったら 次にマウスを動かした際 視点の変化量が前の値になっ
|
|
83
|
+
// ↑↑マウスが動かないときでも 0 じゃなかったら 次にマウスを動かした際 視点の変化量が前の値になったままなので 急に動いておかしくなる
|
|
84
|
-
const movementY = event.movementY || 0;//マウス
|
|
84
|
+
const movementY = event.movementY || 0;//マウス移動量Y の取得
|
|
85
85
|
|
|
86
86
|
_euler.setFromQuaternion( camera.quaternion );//オイラー角に camera の quaternion適応 たぶん..
|
|
87
87
|
|
|
88
|
-
_euler.y -= movementX * MouseSensitivity;//マウス
|
|
88
|
+
_euler.y -= movementX * MouseSensitivity;//マウスの移動量に応じて 視点の変化量を決める
|
|
89
89
|
_euler.x -= movementY * MouseSensitivity;//
|
|
90
90
|
|
|
91
91
|
_euler.x = Math.max( Math.PI/2 - Math.PI, Math.min( Math.PI/2 - 0, _euler.x ) );
|
4
タイトルを訂正しました
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
FPSの視点移動はなぜカーソルが画面端までいって止まることがないのですか？
|
body
CHANGED
|
File without changes
|
3
質問を少し付け加えました
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
マウスの視点移動で画面端で
|
|
1
|
+
マウスの視点移動で画面端でカーソルが引っかからないようにしたいです
|
body
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
Three.js で マウスによるカメラの視点移動を作りたいのですが、
|
|
2
2
|
マウスが**画面端まで行くとマウスが画面端に引っ掛かり、視点移動が止まってしまいます**。
|
|
3
|
+
なぜFPSゲームなどの視点移動は画面端までカーソルが動くことによってそれ以上視点が動かせなくならないのですか？
|
|
3
4
|
マウスの視点移動で画面端でマウスが引っかからないようにするにはどうすれば良いですか？
|
|
4
5
|
また画面外でもマウスの座標を取得できたりしませんか？
|
|
5
6
|
回答よろしくお願いします！
|
2
コードの解説などを改善しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
</canvas>
|
|
12
12
|
<canvas id = "UI" style="position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,0);">
|
|
13
13
|
</canvas>
|
|
14
|
-
|
|
14
|
+
|
|
15
15
|
<!--Three.jsファイルロード-->
|
|
16
16
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js">
|
|
17
17
|
</script>
|
|
18
|
-
|
|
18
|
+
|
|
19
19
|
<script>
|
|
20
20
|
|
|
21
21
|
var width = window.innerWidth
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
|
|
29
29
|
//画面のリサイズに応じてレンダラーのサイズを調節する
|
|
30
30
|
window.addEventListener("resize",function(event){
|
|
31
|
-
width = window.innerWidth
|
|
31
|
+
width = window.innerWidth//タブ領域を含まないウィンドウサイズ
|
|
32
|
-
height = window.innerHeight
|
|
32
|
+
height = window.innerHeight//
|
|
33
33
|
renderer.setSize(width,height)
|
|
34
34
|
})
|
|
35
35
|
|
|
@@ -37,37 +37,37 @@
|
|
|
37
37
|
canvas: document.querySelector("#test")
|
|
38
38
|
})
|
|
39
39
|
renderer.setSize(width,height)
|
|
40
|
-
|
|
40
|
+
|
|
41
41
|
var scene=new THREE.Scene()
|
|
42
|
-
|
|
42
|
+
|
|
43
|
-
var camera=new THREE.PerspectiveCamera(45,width/height)
|
|
43
|
+
var camera=new THREE.PerspectiveCamera(45,width/height)//視野角,アスペクト比
|
|
44
44
|
camera.position.set(0,0,0)
|
|
45
45
|
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
|
|
48
|
-
const box0 = new THREE.Mesh(
|
|
48
|
+
const box0 = new THREE.Mesh(//青色の箱
|
|
49
|
-
new THREE.BoxGeometry(1,1,1),//
|
|
49
|
+
new THREE.BoxGeometry(1,1,1),//箱の大きさ
|
|
50
50
|
new THREE.MeshBasicMaterial({color:"blue"})
|
|
51
51
|
)
|
|
52
52
|
box0.position.set(3,0,0)
|
|
53
53
|
scene.add(box0)
|
|
54
|
-
|
|
54
|
+
|
|
55
|
-
var box1=new THREE.Mesh(//
|
|
55
|
+
var box1=new THREE.Mesh(//赤色の箱
|
|
56
|
-
new THREE.BoxGeometry(1,1,1),
|
|
56
|
+
new THREE.BoxGeometry(1,1,1),//箱の大きさ
|
|
57
57
|
new THREE.MeshBasicMaterial({color:"red"})
|
|
58
58
|
)
|
|
59
59
|
box1.position.set(-3,0,0)
|
|
60
60
|
scene.add(box1)
|
|
61
61
|
|
|
62
|
-
var box2=new THREE.Mesh(
|
|
62
|
+
var box2=new THREE.Mesh(//オレンジの箱
|
|
63
|
-
new THREE.BoxGeometry(1,1,1),
|
|
63
|
+
new THREE.BoxGeometry(1,1,1),//箱の大きさ
|
|
64
64
|
new THREE.MeshBasicMaterial({color:"orange"})
|
|
65
65
|
)
|
|
66
66
|
box2.position.set(0,0,3)
|
|
67
67
|
scene.add(box2)
|
|
68
68
|
|
|
69
|
-
var box3=new THREE.Mesh(
|
|
69
|
+
var box3=new THREE.Mesh(//緑の箱
|
|
70
|
-
new THREE.BoxGeometry(1,1,1),
|
|
70
|
+
new THREE.BoxGeometry(1,1,1),//箱の大きさ
|
|
71
71
|
new THREE.MeshBasicMaterial({color:"green"})
|
|
72
72
|
)
|
|
73
73
|
box3.position.set(0,0,-3)
|
|
@@ -79,34 +79,28 @@
|
|
|
79
79
|
document.addEventListener("mousemove",function(event){
|
|
80
80
|
const movementX = event.movementX || 0;//マウス座標X の取得 || はどちらかが True
|
|
81
81
|
// || 0 はたぶんマウスが動かなくなったら movementX = 0になるたぶん
|
|
82
|
-
// マウスが動かないときでも 0 じゃなかったら 次動か
|
|
82
|
+
// ↑↑マウスが動かないときでも 0 じゃなかったら 次にマウスを動かした際 視点の変化量が前の値になっているので 急に動いておかしくなる
|
|
83
|
-
//movementXをconsole.log()で出力してみるとわかりやすい
|
|
84
83
|
const movementY = event.movementY || 0;//マウス座標Y の取得
|
|
85
84
|
|
|
86
85
|
_euler.setFromQuaternion( camera.quaternion );//オイラー角に camera の quaternion適応 たぶん..
|
|
87
86
|
|
|
88
|
-
_euler.y -= movementX * MouseSensitivity;//マウス座標に応じて 変化量を決める
|
|
87
|
+
_euler.y -= movementX * MouseSensitivity;//マウス座標に応じて 視点の変化量を決める
|
|
89
88
|
_euler.x -= movementY * MouseSensitivity;//
|
|
90
89
|
|
|
91
90
|
_euler.x = Math.max( Math.PI/2 - Math.PI, Math.min( Math.PI/2 - 0, _euler.x ) );
|
|
92
|
-
camera.quaternion.setFromEuler( _euler );//cameraのquaternionにオイラー角適応たぶん
|
|
91
|
+
camera.quaternion.setFromEuler( _euler );//cameraのquaternionにオイラー角適応たぶん
|
|
93
|
-
|
|
92
|
+
|
|
94
93
|
//↑↑----------------------------------------------------------------------------
|
|
95
94
|
})
|
|
96
95
|
//ここから上は自分で書いたコードではないです
|
|
97
96
|
|
|
98
|
-
context.font="40px HGRE"
|
|
99
|
-
context.fillStyle = "white"
|
|
100
97
|
function animation(){
|
|
101
98
|
renderer.render(scene,camera)//レンダリング
|
|
102
|
-
requestAnimationFrame(animation)
|
|
99
|
+
requestAnimationFrame(animation)//ブラウザの更新毎で実行する
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
100
|
}
|
|
107
101
|
animation()
|
|
108
102
|
</script>
|
|
109
103
|
</body>
|
|
110
|
-
|
|
104
|
+
|
|
111
105
|
</html>
|
|
112
106
|
```
|
1
不要なコードの削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,8 +20,6 @@
|
|
|
20
20
|
|
|
21
21
|
var width = window.innerWidth
|
|
22
22
|
var height = window.innerHeight
|
|
23
|
-
var space = false
|
|
24
|
-
var speed = 0.01//回転速度
|
|
25
23
|
var canvas = document.getElementById("UI")
|
|
26
24
|
var context = canvas.getContext("2d")
|
|
27
25
|
|
|
@@ -47,7 +45,7 @@
|
|
|
47
45
|
|
|
48
46
|
|
|
49
47
|
|
|
50
|
-
const box0 = new THREE.Mesh(
|
|
48
|
+
const box0 = new THREE.Mesh(
|
|
51
49
|
new THREE.BoxGeometry(1,1,1),//,がいる 箱の大きさ
|
|
52
50
|
new THREE.MeshBasicMaterial({color:"blue"})
|
|
53
51
|
)
|