javascript - 创建具有特定标题的 vector3

Question

所以我想根据 p5.js 中的一个工作示例在 three.js 中创建一个二维流场。这是原始源代码:

var inc = 0.1; //Increment of noise
var yoff = 0;
var scl = var; //Scale of noise field 
var cols = rows = 10; 

for(var y = 0; y < rows; y++)
{
    var xoff = 0;
    for(var x = 0; x < cols; x++)
    {
        var index = x + y * cols;
        var angle = noise(xoff, yoff) * TWO_PI; //Create angle with Perlin noise
        var v = p5.Vector.fromAngle( angle ); //Create new vector from angle
        v.setMag( 0.1 ); //set magnitude of vector
        flowfield[index] = v;
        xoff += inc;
        stroke(0, 50);
        strokeWeight(1);
        push();
        translate(x * scl, y * scl);
        rotate(v.heading());
        line(0, 0, scl, 0);
        pop();
    }
    yoff += inc;
}

现在我想在 three.js 中复制 p5.Vector.fromAngle() 函数。

据我所知，我需要创建矢量，然后使用 .applyQuaternion(四元数)围绕 z 轴旋转矢量。然而，我正在围绕中心旋转矢量而不是改变它的航向。

var vector = new THREE.Vector3( 100, 100, 0 );

var angle = Math.random() * Math.PI * 2;
var quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), Math.PI / 2 );

vector.applyQuaternion( quaternion );

Answer 1

如果你只想使用 x/y 平面，函数基本上是这样的:

function fromAngle(angle) {
  return new THREE.Vector3(
    Math.cos(angle), Math.sin(angle), 0
  );
}

我相信这比使用四元数简单得多。如果你需要更复杂的三维旋转，四元数很有意义。也正是what p5.js does .

此函数将返回指向给定方向的单位向量(长度为 1 的向量)(因此 fromAngle(0) === [1, 0, 0], fromAngle(Math.PI/2) === [0, 1, 0] 等等)。