質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

FPSの視点移動はなぜカーソルが画面端までいって止まることがないのですか?

9nahito
9nahito

総合スコア28

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

0クリップ

896閲覧

投稿2021/07/18 09:44

編集2021/07/19 10:27

Three.js で マウスによるカメラの視点移動を作りたいのですが、
マウスが画面端まで行くとマウスが画面端に引っ掛かり、視点移動が止まってしまいます
なぜFPSゲームなどの視点移動は画面端までカーソルが動くことによってそれ以上視点が動かせなくならないのですか?
マウスの視点移動で画面端でマウスが引っかからないようにするにはどうすれば良いですか?
また画面外でもマウスの座標を取得できたりしませんか?
回答よろしくお願いします!
以下のコードを.htmlで保存し実行しています。

HTML

<html> <body style="margin:0"> <canvas id ="test"> </canvas> <canvas id = "UI" style="position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,0);"> </canvas> <!--Three.jsファイルロード--> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"> </script> <script> var width = window.innerWidth var height = window.innerHeight var canvas = document.getElementById("UI") var context = canvas.getContext("2d") canvas.width = height canvas.height = width //画面のリサイズに応じてレンダラーのサイズを調節する window.addEventListener("resize",function(event){ width = window.innerWidth//タブ領域を含まないウィンドウサイズ height = window.innerHeight// renderer.setSize(width,height) }) var renderer=new THREE.WebGLRenderer({ canvas: document.querySelector("#test") }) renderer.setSize(width,height) var scene=new THREE.Scene() var camera=new THREE.PerspectiveCamera(45,width/height)//視野角,アスペクト比 camera.position.set(0,0,0) const box0 = new THREE.Mesh(//青色の箱 new THREE.BoxGeometry(1,1,1),//箱の大きさ new THREE.MeshBasicMaterial({color:"blue"}) ) box0.position.set(3,0,0) scene.add(box0) var box1=new THREE.Mesh(//赤色の箱 new THREE.BoxGeometry(1,1,1),//箱の大きさ new THREE.MeshBasicMaterial({color:"red"}) ) box1.position.set(-3,0,0) scene.add(box1) var box2=new THREE.Mesh(//オレンジの箱 new THREE.BoxGeometry(1,1,1),//箱の大きさ new THREE.MeshBasicMaterial({color:"orange"}) ) box2.position.set(0,0,3) scene.add(box2) var box3=new THREE.Mesh(//緑の箱 new THREE.BoxGeometry(1,1,1),//箱の大きさ new THREE.MeshBasicMaterial({color:"green"}) ) box3.position.set(0,0,-3) scene.add(box3) //ここから下は自分の書いたコードではないです var MouseSensitivity = 0.006 var _euler = new THREE.Euler( 0, 0, 0, 'YXZ' );//オイラー角? document.addEventListener("mousemove",function(event){ const movementX = event.movementX || 0;//マウス移動量X の取得 || はどちらかが True // || 0 はたぶんマウスが動かなくなったら movementX = 0になる // ↑↑マウスが動かないときでも 0 じゃなかったら 次にマウスを動かした際 視点の変化量が前の値になったままなので 急に動いておかしくなる const movementY = event.movementY || 0;//マウス移動量Y の取得 _euler.setFromQuaternion( camera.quaternion );//オイラー角に camera の quaternion適応 たぶん.. _euler.y -= movementX * MouseSensitivity;//マウスの移動量に応じて 視点の変化量を決める _euler.x -= movementY * MouseSensitivity;// _euler.x = Math.max( Math.PI/2 - Math.PI, Math.min( Math.PI/2 - 0, _euler.x ) ); camera.quaternion.setFromEuler( _euler );//cameraのquaternionにオイラー角適応たぶん //↑↑---------------------------------------------------------------------------- }) //ここから上は自分で書いたコードではないです function animation(){ renderer.render(scene,camera)//レンダリング requestAnimationFrame(animation)//ブラウザの更新毎で実行する } animation() </script> </body> </html>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。