Üç kullanıcıyla ilk kez tetikleyici denetimleri

Question

Tamamen yepyeni bir şekilde üç.js ve 3B ekindeyim. Gerçekten basit bir first person shooter yapmaya çalışıyorum. Çok fazla örnek buldum ama hepsi çok karmaşık görünüyor. Kodu kullanmadan önce anlamak istiyorum. Sorun yaşadığım şey kamera rotasyonu. Her şey yolunda. Benim yaklaşımım işe yaramıyor. İşte tüm kodu (125 hat)

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(); 
}; 

sorun rotateCam işlevinde olduğu var ben 0'a o ayarlıyorum rağmen z ekseninde dönen gibi görünüyor. Oldukça çalışmıyor ve nedenini gerçekten bilmiyorum.

Ayrıca kodu this question kullanmayı denedim, ancak çalışmadı.

Answer 1

İlk kişi denetimleri, düşündüğünüzden daha karmaşıktır. Açı matrisinizi anlasanız bile, işaretçi kilitlenmediğinde, fare pencere kenarına çarpar ve durur.

3js için ilk kişi denetimlerinin bir örneği olan işaretçi kilit örneğiyle (http://threejs.org/examples/#misc_controls_pointerlock) başlamanızı öneririm.