Question

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

在图像中，绿色箭头代表管道，红色线代表指向矢量点，圆形图像必须围绕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 );
        } 
       }

    }

我非常感谢我对此提供的帮助。谢谢大家的帮助

Answer 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

根据点围绕z轴旋转对象

1 个答案: