2016-08-24 50 views
0

我有以下代码以旋转我的绕x轴的相机在一个场景three.js所:在three.js所旋转相机工作不正常

var cameraOrginX = 0, cameraOrginY = 0, cameraOrginZ = 0; 
var cameraEndX = 0, cameraEndY = 0, cameraEndZ = 1000; 
var angle = 0; 

function init(){ 
    camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.set(0,0,1000); 

    //ROTATE THE CAMERA 
    var radians = angle * Math.PI/180.0; 

    cameraEndY = Math.cos(radians) * (cameraEndY-cameraOrginY) - Math.sin(radians) * (cameraEndZ-cameraOrginZ) + cameraOrginY; 
    cameraEndZ = Math.sin(radians) * (cameraEndY-cameraOrginY) + Math.cos(radians) * (cameraEndZ-cameraOrginZ) + cameraOrginZ; 
    // 

    //CAMERA NEW POS 
    camera.position.x = cameraOrginX + cameraEndX; 
    camera.position.y = cameraOrginY + cameraEndY; 
    camera.position.z = cameraOrginZ + cameraEndZ; 
    console.log(camera.position.y + " " + camera.position.z); 
} 

当我的角度变量设置为0我的相机位置在x = 0,y = 0,z = 1000;这是期望和好的。

但是当我改变角度为90度,例如我的位置变为x = 0 y = -1000 z = -999,99999;而你会预期位置为x = 0,y = -1000,z = 0;

为什么会发生这种情况?可能有人为0的例外,我解释一下我做错了:)

所有的角度给我怪异的位置:(

如果有任何需要更多的代码或jsfidle只是问我:)

回答

1
​​

你不能在cameraEndZ计算中使用cameraEndY,因为它已经被更新。您应该使用此rotation计算中的旧坐标yz,而不是更新的坐标。改为使用以下内容 -

var cosTheta = Math.cos(radians); 
var sinTheta = Math.sin(radians); 

var a = cosTheta * (cameraEndY-cameraOrginY); 
var b = sinTheta * (cameraEndZ-cameraOrginZ); 
var c = sinTheta * (cameraEndY-cameraOrginY); 
var d = cosTheta * (cameraEndZ-cameraOrginZ); 


cameraEndY = a - b + cameraOrginY; 
cameraEndZ = c + d + cameraOrginZ; 
+0

谢谢你的作品像魅力:) – FutureCake