本例在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 requestAnimationFramerequestAnimationFrame(render);webGLRenderer.render(scene, camera);}

總結

以上是生活随笔為你收集整理的Three.js中添加指南针的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。