P3D相机方向

时间:2017-11-21 02:18:39

标签: processing processing.js

我有一个很大的领域。有一个红点围绕球体移动。我想跟随那个红点移动到球体。所以我的相机必须随着红点移动。但有一个问题。现在,我正在体验的是展览B中所展示的内容。我希望我的动画能够实现展览A中所示的观点。

I want my animation to realize the point of view shown in exhibit A.

这是我到目前为止的代码。我觉得这很简单。我有3个变量来控制我的眼睛,我有3个变量来控制目标的位置。红点也位于目标位置。我在x-y中添加了2架飞机,这让我不会因为旋转而感到困惑。

这是一个小提琴:

https://jsfiddle.net/da8nza6y/

float radius = 1000;
float view_elevation = 1500;
float target_elevation = 300;

float x_eye;
float y_eye;
float z_eye;

float x_aim;
float y_aim;
float z_aim;
float h;
float theta;

void setup() {
  size(600, 600, P3D);
  theta = 0;
  h = 30;
}

void draw() {

  theta += 0.5;
  theta = theta%360;

  x_eye = (radius+view_elevation)*cos(theta*PI/180);
  y_eye = 0;
  z_eye = (radius+view_elevation)*sin(theta*PI/180);

  x_aim = (radius+target_elevation)*cos((theta+h)*PI/180);
  y_aim = 0;
  z_aim = (radius+target_elevation)*sin((theta+h)*PI/180);

  camera(x_eye, y_eye, z_eye, x_aim, y_aim, z_aim, 0, 0, -1);

  background(255);

  // the red dot
  pushMatrix();
    translate(x_aim, y_aim, z_aim);
    fill(255, 0, 0, 120);
    noStroke();
    sphere(10);
  popMatrix();

  // the big sphere
  noStroke();
  fill(205, 230, 255);
  lights();
  sphere(radius);

  // the orange plane
  pushMatrix();
    translate(0, 0, 10);
    fill(255, 180, 0, 120);
    rect(-2000, -2000, 4000, 4000);
  popMatrix();

  // the green plane
  pushMatrix();
    translate(0, 0, -10);
    fill(0, 180, 0, 120);
    rect(-2000, -2000, 4000, 4000);
  popMatrix();

}

所以腌渍就是这样,红点(它在xz平面中的位置由角度(theta + h)给出,距离(半径+ target_elevation)距离原点)与xy平面交叉的那一刻,一切都颠倒了倒转。

现在,我试图控制camera()函数中的最后3个变量,但我感到困惑。该功能的文档在这里:

https://processing.org/reference/camera_.html

有人能看到解决这个问题的方法吗?

另外,我确信我可以旋转球体(我可以做)并且没有这些问题,但我确定我将使用这个动画,我觉得有些事情要来用这种方法会更容易。虽然我可能弄错了。

1 个答案:

答案 0 :(得分:0)

我相信我已经解决了自己的问题。

在调用camera()函数之前,我在draw中添加了以下行:

  if ((x_eye- x_aim) < 0) {
    z_orientation = 1;
  } else {
    z_orientation = -1;
  }

我注意到触发翻转的不是(theta+h),而是视图和目标的相对位置。

这是一个更新的小提琴:

https://jsfiddle.net/da8nza6y/1/

相关问题