本例在three.js中添加一個(gè)指南針。

前提：
1.three.js中場(chǎng)景的控制是使用OrbitControl控制相機(jī)，換言之，世界坐標(biāo)系的旋轉(zhuǎn)其實(shí)轉(zhuǎn)動(dòng)的是相機(jī)，即相機(jī)的轉(zhuǎn)向即為世界坐標(biāo)系的轉(zhuǎn)向。本利以z軸負(fù)方向?yàn)檎狈较?#xff0c;只考慮XOZ平面的方向。

2.使用一個(gè)jQuery旋轉(zhuǎn)庫(kù)：http://blog.csdn.net/sinolzeng/article/details/40377637

3.在html中添加一張指南針的圖片，在three.js中的 循環(huán)重繪方法 中調(diào)用圖片的旋轉(zhuǎn)方法即可。

代碼就更簡(jiǎn)單了：

function render() {//根據(jù)當(dāng)前的位置計(jì)算與z軸負(fù)方向的夾角，即為正北方方向。如果使用camera的rotation.y你會(huì)發(fā)現(xiàn)得出的弧度制范圍是-90到90，指南針就不能旋轉(zhuǎn)360度了。var dir = new THREE.Vector3(-camera.position.x, 0, -camera.position.z).normalize();var theta = Math.atan2(-dir.x, -dir.z);//指南針旋轉(zhuǎn)$('#imgCompass').rotate(THREE.Math.radToDeg(theta));var delta = clock.getDelta();orbitControls.update(delta);// render using requestAnimationFramerequestAnimationFrame(render);webGLRenderer.render(scene, camera);}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。