三个 JS Camera Orientation returns 值在 180 度而不是 360 度
Three JS Camera Orientation returns value in 180 degrees instead of 360 degrees
我正在尝试使用飞行控制在 Three.JS 场景中构建指南针插图。我在远离我的飞机的地方放置了一个北点,并将其用作北参考。我希望指南针根据从相机到 space 中的点的角度旋转。我使用以下方法来确定角度,但当我旋转而不是继续从 181 到 360 时,它吐出的是从 1 到 180,然后又回到 179。知道这是为什么吗?
var vector = new THREE.Vector3(0, 0, -1);
vector.applyQuaternion(camera.quaternion);
angle = vector.angleTo(north.position);
var degree = angle * (180 / 3.14159);
console.log(degree);
compass2.rotation.y = (angle);
我将 link 加入该项目,以便您可以实际查看问题。
www.googledrive.com/host/0B_XkORRtWN2OcGstUjE5R0RRRWc/PDSFlythrough.html
已解决!我选择了一个不同的系统,在这个系统中,我将辅助摄像头放在一个圆柱体内,端盖关闭,并设置为显示网格的背面。然后我简单地添加了代码来匹配从 camera1 到 camera1 的旋转角度。即时指南针!
//Load Compass Model
var compassGeometry = new THREE.CylinderGeometry(30, 30, 30, 20, 1, 1);
var compassMaterial = new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('assets/CompassTexture.svg')
});
compass2 = new THREE.Mesh(compassGeometry, compassMaterial);
compass2.material.side = THREE.BackSide;
compass2.rotation.x = 1.57;
compass2.rotation.y = 0.10;
scene2.add(compass2)
//Animate
function animate() {
requestAnimFrame(animate);
controls.update(1);
//match camera2 rotation to camera1
camera2.rotation.x = camera.rotation.x;
camera2.rotation.y = camera.rotation.y;
camera2.rotation.z = camera.rotation.z;
render();
}
我正在尝试使用飞行控制在 Three.JS 场景中构建指南针插图。我在远离我的飞机的地方放置了一个北点,并将其用作北参考。我希望指南针根据从相机到 space 中的点的角度旋转。我使用以下方法来确定角度,但当我旋转而不是继续从 181 到 360 时,它吐出的是从 1 到 180,然后又回到 179。知道这是为什么吗?
var vector = new THREE.Vector3(0, 0, -1);
vector.applyQuaternion(camera.quaternion);
angle = vector.angleTo(north.position);
var degree = angle * (180 / 3.14159);
console.log(degree);
compass2.rotation.y = (angle);
我将 link 加入该项目,以便您可以实际查看问题。
www.googledrive.com/host/0B_XkORRtWN2OcGstUjE5R0RRRWc/PDSFlythrough.html
已解决!我选择了一个不同的系统,在这个系统中,我将辅助摄像头放在一个圆柱体内,端盖关闭,并设置为显示网格的背面。然后我简单地添加了代码来匹配从 camera1 到 camera1 的旋转角度。即时指南针!
//Load Compass Model
var compassGeometry = new THREE.CylinderGeometry(30, 30, 30, 20, 1, 1);
var compassMaterial = new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('assets/CompassTexture.svg')
});
compass2 = new THREE.Mesh(compassGeometry, compassMaterial);
compass2.material.side = THREE.BackSide;
compass2.rotation.x = 1.57;
compass2.rotation.y = 0.10;
scene2.add(compass2)
//Animate
function animate() {
requestAnimFrame(animate);
controls.update(1);
//match camera2 rotation to camera1
camera2.rotation.x = camera.rotation.x;
camera2.rotation.y = camera.rotation.y;
camera2.rotation.z = camera.rotation.z;
render();
}