特定の見出しのvector3を作成します

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 
); 
} 

私はこれが、このためにクォータニオンを使用するよりもずっと簡単であると考えています。より複雑な3次元回転が必要な場合は、四元数が多くの意味を持ちます。それはまさに​​です。

この関数は、指定された方向を指す単位ベクトル（長さ1のベクトル）を返します（fromAngle(0) === [1, 0, 0]、fromAngle(Math.PI/2) === [0, 1, 0]など）。