Q&A
ベストアンサー
回答ありがとうございます！
PointerLock を 使ったらうまくいきました！
https://developer.mozilla.org/ja/docs/Web/API/Pointer_Lock_API
コード
<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>
alert("開始後に画面をクリックしてください")
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)
//追加したコード------------------------------------------------
document.addEventListener("click",function(){
document.body.requestPointerLock()//PinterLock の着火イベント
})
//-------------------------------------------------------------
//ここから下は自分の書いたコードではないです
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>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/21 05:57