如何实现一个指南针控件

在ThingJS在线开发里，是提供了一个指南针控件的，如下图

实际预览效果如下图

也能看，找两张好看的图片放上去也能用，但是这个没有任何事件，相当于能看，不能扩展，既然如此，那我们就写一个定义的指南针。

首先要明白指南针的原理，一般指南针用于地图，用来指向北极（或南极）的方向。但是在3D空间里没有南极、北极一说。通常用当前摄像机看的方向与空间向量(0,0,-1)取夹角，得出来的角度就是指针需要旋转的角度。

• 创建一个2D页面用于指示，代码如下。
  
  1. $('#div2d').append(
     
  2. `<div id="compass" style="position:absolute;left: 20px; top: 100px; width: 100px; height:100px">
     
  3. <div style="background:url('https://www.thingjs.com/static/images/compass.png');background-repeat: repeat;position: absolute;left: 0;width: 100%;height: 100%;background-size: contain;"></div>
     
  4. </div>`)

  复制代码
  
  
• 获取摄像机与空间向量(0,0,-1)的夹角。
  
  1. -app.renderCamera.rotation.z

  复制代码
  
  
• 注册摄像机视角改变事件，当摄像机视角改变的时候，更新图片旋转角度。
  
  1. // 注册摄像机视角改变事件，更新指南针图片朝向
     
  2. app.on(THING.EventType.CameraChange, function () {
     
  3.     $('#compass div').css('transform', 'rotateZ(10deg)')
     
  4.         });

  复制代码
  
  
• 此时，一个新的指南针空间就做好了，指南针也是一个2D页面，可对其进行样式控制、添加事件。完整代码如下。
  
  1. class Compass {
     
  2.     constructor(param) {
     
  3.         if (!param || !param.app) {
     
  4.             return Object.create(null);
     
  5.         }
     
  6.         this.init(param);
     
  7.     }
     
  8.     init(param) {
     
  9.         this.app = param.app;
     
  10.         // 创建2D页面
      
  11.         $('#div2d').append(
      
  12.         `<div id="compass" style="position:absolute;left: 20px; top: 100px; width: 100px; height:100px">
      
  13.         <div style="background:url('https://www.thingjs.com/static/images/compass.png');background-repeat: repeat;position: absolute;left: 0;width: 100%;height: 100%;background-size: contain;"></div>
      
  14.         </div>`)
      
  15.         var _this = this;
      
  16.         // 点击图片复原
      
  17.         $('#compass').on('click', function () {
      
  18.             // 摄像机旋转角度复位
      
  19.             _this.app.camera.rotateAround({
      
  20.                 target: _this.app.camera.target,
      
  21.                 yRotateAngle: _this.getRotation() / Math.PI * 180,
      
  22.                 time: 600
      
  23.             })
      
  24.         });
      
  25.         // 注册摄像机视角改变事件，更新指南针图片朝向
      
  26.         this.app.on(THING.EventType.CameraChange, function () {
      
  27.             $('#compass div').css('transform', 'rotateZ(' + _this.getRotation() / Math.PI * -180 + 'deg)')
      
  28.         });
      
  29.     }
      
  30.     /**
      
  31.      * 获取旋转角度
      
  32.      */
      
  33.     getRotation() {
      
  34.         let cameraRotation = this.app.renderCamera.rotation;
      
  35.         return -cameraRotation.z;
      
  36.     }
      
  37. }

  复制代码
  
  
• 调用方法如下
  
  

至此，一个可以复位、可以控制的指南针就做好了。
如有建议，欢迎留言。