threejs中的指南针

threejs中官方的指南针，非常的简陋，一个极其普通的箭头，可以改颜色，箭头处可以设置粗细宽度等，但是与箭头连接的直线是不能设置粗细的，然后也没啥然后了，

const dir = new THREE.Vector3( 1, 2, 0 );

//normalize the direction vector (convert to vector of length 1)
dir.normalize();

const origin = new THREE.Vector3( 0, 0, 0 );
const length = 1;
const hex = 0xffff00;

const arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
scene.add( arrowHelper );

能改的就上面那些属性指，位置，方向，长度，颜色，箭头的长宽
效果就是类似这样：

现实项目场景，很难能够同意直接使用这样的指南针，起码得是个罗盘吧~
所以，终极解决方案就是直接用一个盒子放一张二维得罗盘图片，然后通过计算夹角，根据反正切三角函数，求得相机相对于控制中心的相对坐标，然后在animate函数中每一帧都调用

 <img src="~@/assets/img/arrow.png" alt="" id="compass">

// 添加指南针loader
addArrow() {
  const dirx = this.$variables.camera.position.x - this.$variables.controls.target.x
  const dirz = this.$variables.camera.position.z - this.$variables.controls.target.z
  const theta = Math.atan2(dirx, dirz)*180/Math.PI + 90  //这个值得偏差需要自行调试，最好的方法就是保留arrowHelper中的，然后调到角度一致，旋转偏差最小
	const compass = document.getElementById('compass')
	compass.style.transform = 'rotateZ('+ theta +'deg)'
},

animate() {
      requestAnimationFrame(this.animate, this.$variables.renderer.domElement) // 再次调用animate方法实现刷新
      this.addArrow()
      this.$variables.renderer.render(
        this.$variables.scene,
        this.$variables.camera
      ) // 执行渲染操作
    },