首页 文章

旋转相机三.js无法正常工作

提问于
浏览 1935 次
0

我有以下代码在three.js场景中围绕x轴旋转我的相机：

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只是问我:)

javascript three.js rotation

1 回答

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

    您无法在 cameraEndZ 计算中使用 cameraEndY ，因为它已经更新 . 您应该在此 rotation 计算中使用旧的 y 和 z 坐标，而不是更新的坐标 . 请改用以下内容 -

    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;
    回复于

相关问题