I'm trying to build a compass inset in a Three.JS scene with fly controls. I've placed a north point far away from my plane and am using it as a north reference. I want the compass to rotate based on the angle from the camera to the point in space. I've used the following to determine the angle but what it spits out goes from 1 to 180 and then to 179 back down as I rotate around instead of continuing from 181 to 360. Any idea why this is?
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);
I'll link to the project so you can see the issue in action.
www.googledrive.com/host/0B_XkORRtWN2OcGstUjE5R0RRRWc/PDSFlythrough.html
Solved! I opted for a different system in which I place the secondary camera inside of a cylinder with the end caps turned off and set to display the backside of the mesh. Then I simply added code to match the rotation angles from camera1 to camera1. Instant compass!
//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();
}