Javascript 三个JS相机方向以180度而不是360度返回值

Javascript 三个JS相机方向以180度而不是360度返回值,javascript,camera,three.js,compass,Javascript,Camera,Three.js,Compass,我正在尝试在一个带有飞行控件的Three.JS场景中构建一个指南针插入。我已将一个北点放置在离飞机较远的位置,并将其用作北参考。我希望指南针根据从相机到空间点的角度旋转。我用了下面的方法来确定角度,但是当我旋转时,它从1到180再到179,而不是从181到360。知道为什么吗 var vector = new THREE.Vector3(0, 0, -1); vector.applyQuaternion(camera.quaternion); angle = vector.ang

我正在尝试在一个带有飞行控件的Three.JS场景中构建一个指南针插入。我已将一个北点放置在离飞机较远的位置,并将其用作北参考。我希望指南针根据从相机到空间点的角度旋转。我用了下面的方法来确定角度,但是当我旋转时,它从1到180再到179,而不是从181到360。知道为什么吗

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);
我将链接到该项目,以便您可以看到该问题的实际情况


解决了!我选择了一个不同的系统,在这个系统中,我将辅助摄影机放置在一个圆柱体内,关闭端盖并设置为显示网格的背面。然后我简单地添加了代码来匹配从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();
    }

解决了!我选择了一个不同的系统,在这个系统中,我将辅助摄影机放置在一个圆柱体内,关闭端盖并设置为显示网格的背面。然后我简单地添加了代码来匹配从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();
    }