three.jsによる一人称シューティングゲームのコントロール

Question

私はthree.jsと3Dを完全に新しくしました。私は本当にシンプルな一人称シューティングゲームを作ろうとしています。私は例のヒープを見つけましたが、それらはすべて実際に複雑に見えます。私はそれを使用する前にコードを理解したい。私が問題を抱えているのは、カメラの回転です。それ以外は問題ありません。私のアプローチはあまり効果がありません。ここにすべての私のコード（125行）

var width = window.innerWidth, height = window.innerHeight, 
    scene = new THREE.Scene(), 
    camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000), 
    renderer = new THREE.WebGLRenderer(), 
    mouse = { 
     x: 0, 
     y: 0, 
     movedThisFrame: false 
    }; 
renderer.setSize(width, height); 
document.body.appendChild(renderer.domElement); 

var geometry = new THREE.BoxGeometry(1, 1, 1); 
var material = new THREE.MeshBasicMaterial({ 
    color: 0x00ff00 
}); 
var cube = new THREE.Mesh(geometry, material); 
scene.add(cube); 
var floorgeometry = new THREE.BoxGeometry(100,0.1,100); 
var floormaterial = new THREE.MeshBasicMaterial({ 
    color: 0xff0000 
}); 
var floor = new THREE.Mesh(floorgeometry, floormaterial); 
floor.position.y = -1; 
scene.add(floor); 

var keys = { 
    w: false, 
    a: false, 
    s: false, 
    d: false 
}; 

camera.position.z = 5; 

function radDeg(radians) { 
    return radians * 180/Math.PI; 
} 

function degRad(degrees) { 
    return degrees * Math.PI/180; 
} 

function rotateCam() { 
    if (!mouse.movedThisFrame) { 
    mouse.x = 0; 
    mouse.y = 0; 
    } 
    /* 

    What am I doing wrong here? 

    */ 
    camera.rotation.x -= mouse.y * 0.001; 
    camera.rotation.y -= mouse.x * 0.001; 
    camera.rotation.z = 0; 

    mouse.movedThisFrame = false; 
} 

function moveCam() { 
    var rotation = camera.rotation.y % (Math.PI * 2), motion = [0,0]; 
    if (keys.w) { 
    motion[0] += 0.1 * Math.cos(rotation); 
    motion[1] += 0.1 * Math.sin(rotation); 
    } 
    if (keys.a) { 
    motion[0] += 0.1 * Math.cos(rotation + degRad(90)); 
    motion[1] += 0.1 * Math.sin(rotation + degRad(90)); 
    } 
    if (keys.s) { 
    motion[0] += 0.1 * Math.cos(rotation - degRad(180)); 
    motion[1] += 0.1 * Math.sin(rotation - degRad(180)); 
    } 
    if (keys.d) { 
    motion[0] += 0.1 * Math.cos(rotation - degRad(90)); 
    motion[1] += 0.1 * Math.sin(rotation - degRad(90)); 
    } 

    camera.position.z -= motion[0]; 
    camera.position.x -= motion[1]; 
} 

window.onload = function() { 
    renderer.domElement.onclick = function() { 
    console.log('requested pointer lock'); 
    renderer.domElement.requestPointerLock(); 
    }; 

    renderer.domElement.onmousemove = function(e) { 
    if (!mouse.movedThisFrame) { 
     mouse.x = e.movementX; 
     mouse.y = e.movementY; 
     mouse.movedThisFrame = true; 
    } 
    }; 

    document.onkeydown = function(e) { 
    var char = String.fromCharCode(e.keyCode); 
    if (char == 'W') 
     keys.w = true; 
    else if (char == 'A') 
     keys.a = true; 
    else if (char == 'S') 
     keys.s = true; 
    else if (char == 'D') 
     keys.d = true; 
    }; 

    document.onkeyup = function(e) { 
    var char = String.fromCharCode(e.keyCode); 
    if (char == 'W') 
     keys.w = false; 
    else if (char == 'A') 
     keys.a = false; 
    else if (char == 'S') 
     keys.s = false; 
    else if (char == 'D') 
     keys.d = false; 
    }; 

    function animate() { 
    requestAnimationFrame(animate); 
    rotateCam(); 
    moveCam(); 
    renderer.render(scene, camera); 
    } 
    animate(); 
}; 

問題がrotateCam機能であるが、だ私は0にそれを設定していていても、z軸上で回転しているようです。それはうまく動作せず、私は本当に理由を知らない。

this questionのコードも試してみましたが、うまくいきませんでした。

Answer 1

最初の人のコントロールは、考えるより複雑です。あなたの角度計算を把握しても、ポインタがロックされていない場合、マウスはウィンドウの端に当たって回転が止まります。

ポインタロックの例（http://threejs.org/examples/#misc_controls_pointerlock）から始めることをお勧めします。これは3jの最初の人のコントロールの例です。