Question

所以我想从p5.js中的一个工作示例中创建three.js中的2D流场。这是原始源代码：

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]等等。

创建具有特定标题的vector3

1 个答案: