Three.js中添加指南针

本例在three.js中添加一个指南针。

前提：
1.three.js中场景的控制是使用OrbitControl控制相机，换言之，世界坐标系的旋转其实转动的是相机，即相机的转向即为世界坐标系的转向。本利以z轴负方向为正北方向，只考虑XOZ平面的方向。

2.使用一个jQuery旋转库：http://blog.csdn.net/sinolzeng/article/details/40377637

3.在html中添加一张指南针的图片，在three.js中的 循环重绘方法 中调用图片的旋转方法即可。

代码就更简单了：

function render() {
    //根据当前的位置计算与z轴负方向的夹角，即为正北方方向。如果使用camera的rotation.y你会发现得出的弧度制范围是-90到90，指南针就不能旋转360度了。
    var dir = new THREE.Vector3(-camera.position.x, 0, -camera.position.z).normalize();
    var theta = Math.atan2(-dir.x, -dir.z);

     //指南针旋转
     $('#imgCompass').rotate(THREE.Math.radToDeg(theta));

     var delta = clock.getDelta();
     orbitControls.update(delta);

     // render using requestAnimationFrame
     requestAnimationFrame(render);

     webGLRenderer.render(scene, camera);

}