【发布时间】：2017-07-23 00:11:19
【问题描述】：
我完全不知道如何解释这个问题，因为如果你看一下我制作的以下视频，它是不言自明的。
没有角度 - https://www.youtube.com/watch?v=R_GtaXWpP9c&feature=youtu.be
角度 - https://www.youtube.com/watch?v=RoaZMccGYGo&feature=youtu.be
正如您在无角度版本中看到的，您可以完全正常地旋转 Y 轴，但是当您控制 X 轴（如“角度”视频中所示）时，您会以一种奇怪的方式旋转，这是有道理的。正如您可能已经猜到的那样，我希望 X 轴保持不变，而 Y 轴保持从左到右移动，我不希望 Y 轴从正变为负。
我希望这是有道理的，希望有一个很好的解释，我可能错过了一个包含所有公式的网站，但我不确定“问题”被称为什么。
我的旋转脚本的一些代码：
var pressed = [0,0,0,0,0,0,0,0];
function update() {
$('#w').html(pressed);
}
setInterval(update, 100);
$(document).keydown(function(evt) {
if (evt.which == 87) {
pressed[0] = 1;
}
if(evt.which == 68) {
pressed[1] = 1;
}
if(evt.which == 65) {
pressed[2] = 1;
}
if(evt.which == 83) {
pressed[3] = 1;
}
if(evt.which == 39) {
pressed[4] = 1;
}
if(evt.which == 37) {
pressed[5] = 1;
}
if(evt.which == 38) {
pressed[6] = 1;
}
if(evt.which == 40) {
pressed[7] = 1;
}
//console.log(evt.which);
});
$(document).keyup(function(evt) {
if (evt.which == 87) {
pressed[0] = 0;
}
if(evt.which == 68) {
pressed[1] = 0;
}
if(evt.which == 65) {
pressed[2] = 0;
}
if(evt.which == 83) {
pressed[3] = 0;
}
if(evt.which == 39) {
pressed[4] = 0;
}
if(evt.which == 37) {
pressed[5] = 0;
}
if(evt.which == 38) {
pressed[6] = 0;
}
if(evt.which == 40) {
pressed[7] = 0;
}
});
function check_pressed() {
if(pressed[0] == 1){
camera.position.z = camera.position.z - 0.1;
}
if(pressed[1] == 1){
camera.position.x = camera.position.x + 0.1;
}
if(pressed[2] == 1){
camera.position.x = camera.position.x - 0.1;
}
if(pressed[3] == 1){
camera.position.z = camera.position.z + 0.1;
}
if(pressed[4] == 1){
if(camera.rotation.y <= Math.PI * -2) {
camera.rotation.y = 0;
} else {
camera.rotation.y -= 0.03;
}
}
if(pressed[5] == 1){
if(camera.rotation.y >= Math.PI * 2) {
camera.rotation.y = 0;
} else {
camera.rotation.y += 0.03;
}
}
if(pressed[6] == 1){
if(camera.rotation.x >= 0.5) {
camera.rotation.x = 0.5;
} else {
camera.rotation.x += 0.01;
}
}
if(pressed[7] == 1){
if(camera.rotation.x <= 0) {
camera.rotation.x = 0;
} else {
camera.rotation.x -= 0.01;
}
}
}
setInterval(check_pressed, 20);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/movement.js"></script>
<script>
var cubes = [];
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
//var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
for(i = 0; i < 4; i++) {
if(i == 0) {
material = new THREE.MeshBasicMaterial( { color: 0x63AEDB } );
} else {
material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
}
cubes[i] = new THREE.Mesh( geometry, material );
scene.add( cubes[i] );
}
cubes[1].position.x = -2;
cubes[1].position.z = 2;
cubes[2].position.x = 2;
cubes[2].position.z = 2;
cubes[3].position.z = 4;
camera.position.z = 2;
camera.rotation.y = 0;
//console.log(camera.rotation.x);
var render = function () {
requestAnimationFrame( render );
//cubes[1].rotation.x += 0.00;
//cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>【问题讨论】：
-
你如何旋转你的相机？你有一些代码要显示吗？
-
这里有完整的代码。我做了一个小系统，它可以检查你是否按住按钮，这就是为什么这么小的系统有这么多代码......我还对你能走多远等做了一些限制。
-
见stackoverflow.com/questions/32157515/…。进行实验，直到您了解欧拉角在 three.js 中的工作原理。