vector - 如何在 3D 空间中旋转矢量？ P5.js

Question

这实际上是我关于 stackoverflow 的第一个问题 :)
首先，我想说我是编码新手，我想了解一些语法。基本上，我正在学习 codetrain 的教程 - 创建一个面向对象的分形树，我想知道基于下面的代码，我如何使它更“3D”。我想到的一种方法是旋转向量。我一直在寻找在 3D 空间中旋转以下向量的潜在解决方案。 codetrain 使用的示例是创建一个方向向量:direction = p5.Vector.Sub(this.begin, this.end)。然后他使用代码 direction.rotate(45)。我意识到你不能写 direction.rotateY(45)。我从 p5.js 语法中看到 .rotate() 只能用于二维向量。因此，是否有一种我不知何故忽略的语法，它根据以下代码在 3D 空间中旋转向量？
这是草图的代码。 Branch 类控制树的构造，而 branchA和 branchB功能是可以添加一些旋转的地方。

var tree = [];
var leaves = [];
var count = 0;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  angleMode(DEGREES)

  var randomangle = random(0, 90)
  var randomMinusAngle = random(0, -90)

  var a = createVector(0, 0, 0);
  var b = createVector(0, -100, 0);

  var root = new Branch(a, b);
  tree[0] = root;
}

//INPUT.

function mousePressed() {
  for (var i = tree.length - 1; i >= 0; i--) {
    if (!tree[i].finished) {
      tree.push(tree[i].branchA())
      tree.push(tree[i].branchB())
    }

    tree[i].finished = true;
  }

  count++
  if (count === 8) {
    for (var i = 0; i < tree.length; i++) {
      if (!tree[i].finished) {

        var leaf = tree[i].end.copy();

        leaves.push(leaf);
      }
    }
  }
}

function draw() {
  background(51);
  //orbitControl();
  rotateY(frameCount);
  translate(0, 200, 0);
  
  for (var i = 0; i < tree.length; i++) {
    tree[i].show();
    tree[i].rotateBranches();

    //tree[i].jitter();
  }

  //LEAVES
  for (var i = 0; i < leaves.length; i++) { //should  make the leaves an object in new script.
    fill(255, 0, 100);
    noStroke();
    ellipse(leaves[i].x, leaves[i].y, 8, 8);
  }
}

function Branch(begin, end) {
  this.begin = begin;
  this.end = end;

  //bool to check whether it has finished spawning branch.
  this.finishedGrowing = false;

  this.show = function() {
    stroke(255);

    line(this.begin.x, this.begin.y, this.begin.z, this.end.x, this.end.y, this.end.z);
  }

  //var rotateValue = random(0, 45)

  this.branchA = function() {
    var direction = p5.Vector.sub(this.end, this.begin);

    direction.rotate(45)
    direction.mult(0.67);

    var newEnd = p5.Vector.add(this.end, direction);

    var randomss = p5.Vector.random3D(this.end, newEnd)
    var b = new Branch(this.end, newEnd);

    return b;
  }
  
  this.branchB = function() {
    var direction = p5.Vector.sub(this.end, this.begin)

    direction.rotate(-15);

    direction.mult(0.67);
    var newEnd = p5.Vector.add(this.end, direction);

    var b = new Branch(this.end, newEnd);

    return b;
  }
  
  this.rotateBranches = function() {
    // TODO
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

Answer 1

你没有错过任何东西。不幸的是，p5js 没有提供旋转 p5.Vector 的方法。在 3d 中(rotateX/rotateY/rotateZ 另一个答案中提到的函数变换 View 矩阵，该矩阵在世界空间基元绘制的位置发生变化，但这不是一回事，尽管它也可以使用以不同的 3d 方向绘制线条)。但是，您可以自己实现这一点。有几种方法可以进行 3d 旋转:您可以使用 Euler angles ，您可以使用 transformation matrices ，您可以使用 Quaternions .不过我觉得最容易理解的方法是axis-angle representation (四元数实际上只是一种对轴角旋转进行编码的特殊方式，以便可以有效地操纵和应用它们)。
在轴角表示中，您可以通过指定要旋转的轴和指示旋转多远的角度来旋转矢量。

在这个示例 gif 中，绿色箭头表示轴向量，紫色箭头表示正在旋转的向量(在这种情况下，它恰好穿过坐标系的每个轴)。
虽然它可能不是最有效的，但有一个简单的算法来计算这种旋转，称为 Rodrigues' rotation formula .给定一个向量 v 和轴向量 k (必须是单位向量，表示长度为1)，公式为:

注:⨯是向量叉积的符号，·是矢量点积的符号。如果你不熟悉这些，这不是太重要。只要知道它们是数学上组合两个向量的方法，叉积会产生一个新向量，而点积会产生一个数值。这是用 p5.js 实现的公式:

// Rotate one vector (vect) around another (axis) by the specified angle.
function rotateAround(vect, axis, angle) {
  // Make sure our axis is a unit vector
  axis = p5.Vector.normalize(axis);

  return p5.Vector.add(
    p5.Vector.mult(vect, cos(angle)),
    p5.Vector.add(
      p5.Vector.mult(
        p5.Vector.cross(axis, vect),
        sin(angle)
      ),
      p5.Vector.mult(
        p5.Vector.mult(
          axis,
          p5.Vector.dot(axis, vect)
        ),
        (1 - cos(angle))
      )
    )
  );
}

好的，有了这个，我们如何将它应用于有问题的草图。目前，分支方向向量在 XY 平面中始终是平坦的，并且在 fork 时始终围绕 Z 轴旋转。当我们开始让分支移动到 Z 维度时，这会变得有点复杂。首先，当 fork 时，我们需要找到一个与当前分支垂直的初始旋转轴。我们可以使用叉积来做到这一点(参见 findPerpendicular 辅助函数)。一旦我们有了那个轴，我们就可以执行 45 或 -15 的固定“叉”旋转。接下来我们围绕原始分支方向“扭曲”新的分支方向向量，这就是让我们的分支进入 Z 维度的原因。

let tree = [];

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  angleMode(DEGREES);

  const start = createVector(0, 0, 0);
  const end = createVector(0, -100, 0);

  tree[0] = new Branch(start, end);
}

function mousePressed() {
  // Add another iteration of branches
  for (let i = tree.length - 1; i >= 0; i--) {
    if (!tree[i].finished) {
      // Pick a random twist angle for this split.
      // By using the same angle we will preserve the fractal self-similarity while
      // still introducing depth. You could also use different random angles, but
      // this would produce some strange un-tree-like shapes.
      let angle = random(-180, 180);
      tree.push(tree[i].branchA(angle));
      tree.push(tree[i].branchB(angle));
    }

    tree[i].finished = true;
  }
}

function draw() {
  background(51);
  //orbitControl();
  rotateY(frameCount);
  translate(0, 200, 0);

  // Show all branches
  for (let i = 0; i < tree.length; i++) {
    tree[i].show();
  }
}

function Branch(begin, end) {
  this.begin = begin;
  this.end = end;

  //bool to check whether it has finished spawning branch.
  this.finishedGrowing = false;

  this.show = function() {
    stroke(255);

    line(this.begin.x, this.begin.y, this.begin.z, this.end.x, this.end.y, this.end.z);
  }

  this.branch = function(forkAngle, twistAngle) {
    let initialDirection = p5.Vector.sub(this.end, this.begin);

    // First we rotate by forkAngle.
    // We can rotate around any axis that is perpendicular to our current branch.
    let forkAxis = findPerpendicular(initialDirection);

    let branchDirection = rotateAround(initialDirection, forkAxis, forkAngle);

    // Next, rotate by twist axis around the current branch direction.
    branchDirection = rotateAround(branchDirection, initialDirection, twistAngle);
    branchDirection.mult(0.67);

    let newEnd = p5.Vector.add(this.end, branchDirection);
    return new Branch(this.end, newEnd);
  }

  this.branchA = function(twistAngle) {
    return this.branch(45, twistAngle);
  }

  this.branchB = function(twistAngle) {
    return this.branch(-15, twistAngle);
  }
}

function findPerpendicular(vect) {
  const xAxis = createVector(1, 0, 0);
  const zAxis = createVector(0, 0, 1);
  // The cross product of two vectors is perpendicular to both, however, the
  // cross product of a vector and another in the exact same direction is
  // (0, 0, 0), so we need to avoid that.
  if (abs(vect.angleBetween(xAxis)) > 0) {
    return p5.Vector.cross(xAxis, vect);
  } else {
    return p5.Vector.cross(zAxis, vect);
  }
}

function rotateAround(vect, axis, angle) {
  axis = p5.Vector.normalize(axis);
  return p5.Vector.add(
    p5.Vector.mult(vect, cos(angle)),
    p5.Vector.add(
      p5.Vector.mult(
        p5.Vector.cross(axis, vect),
        sin(angle)
      ),
      p5.Vector.mult(
        p5.Vector.mult(
          axis,
          p5.Vector.dot(axis, vect)
        ),
        (1 - cos(angle))
      )
    )
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>