围绕 z 轴旋转对象，取决于一个点答案

【问题标题】：Rotate object around z axis, depending on a point围绕 z 轴旋转对象，取决于一个点
【发布时间】：2019-06-20 19:32:30
【问题描述】：

我在 Three.js 的管子前面有一个像 HUD 这样的对象，但是这个 Hud 需要始终根据矢量点对齐自身。该矢量点是该点的高侧，因此无论管的方向和位置如何，对象都必须始终与该点对齐。为了说明一个问题，我附上了一张图片。

https://imgur.com/a/QNtz25E

图中绿色箭头代表管道，红色线代表矢量点，圆形图像必须绕z轴旋转才能对齐。

我尝试计算矢量点及其中心点的角度，以计算我必须在 z 轴上旋转多少才能将其与该点对齐。例如，这适用于对象不倒置的某些情况。为了放置对象，我使用了管子的最后一个点，并使用前一个点来保持它始终垂直。

rotateobject() {
    //set the object perpendicular to the pipe
      this.hudObj.lookAt(this.previouspoint);
      let zerovector = new THREE.Euler();
      //reset the rotation
      this.hudObj.rotation.copy(zerovector);
      this.hudObj.lookAt(this.previousActualPoint);

      //Line to be able to see if the object is aligned

      var material = new THREE.LineBasicMaterial({
        color: 0x0000ff
      });
      var geometry = new THREE.Geometry();
      geometry.vertices.push(
        new THREE.Vector3( this.previouspoint.x , this.previouspoint.y, this.previouspoint.z),
        new THREE.Vector3( ((this.previouspoint.x) + this.previouspointdata.highSide.x), ((this.previouspoint.y) + this.previouspointdata.highSide.y), ((this.previouspoint.z) + this.previouspointdata.highSide.z) ),
      );   
      var line = new THREE.Line( geometry, material );
      this.scene.add( line );
        /// calculate angle and rotate in z axis
      var angleRadians = Math.atan2(parseFloat(this.previouspointdata.highSide.y.toFixed(1)), parseFloat(this.previouspointdata.highSide.x.toFixed(1)));
      if (angleRadians > 0 && angleRadians < Math.PI / 2) {
        this.hudObj.rotateZ(-(Math.PI / 2 - angleRadians) );
      }//0-90
      else if (angleRadians < Math.PI && angleRadians > Math.PI / 2) {
        this.hudObj.rotateZ((angleRadians - Math.PI / 2) );
      }//90-180
      else if (angleRadians > -Math.PI && angleRadians < -Math.PI / 2) {
        this.hudObj.rotateZ((-Math.PI/2  + angleRadians) );
      }//-180-90
      else if (angleRadians < 0 && angleRadians > -Math.PI / 2) {
        this.hudObj.rotateZ(-(Math.PI / 2 - angleRadians));
      }//-0-90
      else if (angleRadians === 0) {

      } //0
      else if (angleRadians === Math.PI || angleRadians === -Math.PI) {
        this.hudObj.rotateZ(-(Math.PI / 2) );
      }//180
      else {
        if(Math.sign(angleRadians) === -1){
         this.hudObj.rotateZ( Math.PI );
        } 
       }

    }

我非常感谢您的帮助。谢谢大家的帮助

【问题讨论】：

红线是明确定义的（已知或至少可以计算），还是任意的？
抱歉，回复晚了，红线是我拥有的向量数组，因此定义明确

标签： javascript vector three.js 3d

【解决方案1】：

我认为您正在寻找的是球体上一个点的笛卡尔坐标。如果是这样，您需要知道：

球心坐标 - Xc, Yc 和 Zc - 球体半径 - r - 和两个角度 - phi 和 omega，然后你可以得到那个点的坐标 - Xp, Yp 和 Zp - 像这样：

Xp = Xc + (r * cos(omega) * sin(phi))
Yp = Yc + (r * cos(phi))
Zp = Zc + (r * sin(omega) * sin(phi))

see this image

然后，如果您需要面向中心的那个点的对象，您可以使用 THREE.js 中的 lookAt 函数

object.lookAt( Xc, Yc, Zc );

https://threejs.org/docs/#api/en/core/Object3D.lookAt

【讨论】：

让我试试你的解决方案，谢谢你的回复