Three.js를 사용하여 벡터 경로를 기준으로 입자 구름을 정의하는 방법은 무엇입니까?

Question

저는 Three.js에서 입자 구름의 예를 연구하고 놀았습니다. 대부분은 모양 필드를 사용하여 입자 필드를 정의하거나 필드 전체에 무작위로 분포시키는 매개 변수를 사용합니다. 내가하고 싶은 것은 각 입자가 보이지 않는 벡터 경로에 상대적으로 근접한 입자 구름을 만드는 것입니다. 예를 들어, 가벼운 곡선 벡터 경로를 정의하면 모든 입자가 보이지 않는 방향을 따라 일정한 반지름 내에서 떠 다니고 끝까지 가늘어지면서 핫도그 모양의 입자 구름이 형성 될 수 있습니다. 따라서 입자를 만드는 방법을 알고 벡터 경로를 만드는 방법을 알고 있습니다. 어떻게이 두 가지를 서로 연결합니까? 감사!

Answer 1

두 점을 사용하여 경로를 정의 할 수 있습니다. 이 점을 p 및 q으로하고 v = p - q으로합시다. 경로에 누워있는 점은 M 일부 0 <= lambda <= 1의 벡터 방정식

M = (1 - lambda) * p + lambda * q 

을 충족해야합니다. 경우들이 주위 일주되도록 약간 작은 반경의 계산 된 좌표를 수정할

// p and q are instances of THREE.Vector3 
function pointOnPath(p, q) { 
    var lambda = Math.random(); 
    var scaledp = (new THREE.Vector3()).copy(p).multiplyScalar(1 - lambda); 
    var scaleq = (new THREE.Vector3()).copy(q).multiplyScalar(lambda); 
    var result = (new THREE.Vector3()).addVectors(scaledp, scaledq); 
    return result; 
} 

다음 : 따라서,는 랜덤 lambda 생성 위의 식의 값을 이용하여 상기 경로상의 임의의 포인트를 생성 할 수있다 경로. 작은 벡터 오프셋을 추가하면됩니다. 그러면 어떻게 그 벡터를 계산할 수 있을까요?

이후 벡터는 p에서 q까지의 선에 수직 인 평면에 있습니다. 위의 조건을 만족하는 무한 수의 벡터가 있으며 그 중 두 개는 e1 = (v.y, -v.x, 0)과 e2 = (v.z, 0, -v.x)입니다. lambda * e1 + mu * e2 형식의 벡터는 v에 수직이됩니다. 따라서 lambda 및 mu 만 생성하면 모든 것이 준비됩니다.

참고 : lambda 및 mu은 [-1; 1]가 아니라 [0; 1]. offset 벡터를 정규화하기 때문에 간격 [-0.5; 0.5]는 정규화가 [-1; 1]

마지막으로

function getVectorOffset(p, q, radius) { 
    var v = (new THREE.Vector3()).subVectors(q, p); 
    v.normalize(); 
    var e1 = new THREE.Vector3(v.y, -v.x, 0), 
     e2 = new THREE.Vector3(v.z, 0, -v.x); 
    e1.normalize(); 
    e2.normalize(); 

    var lambda = Math.random() - 0.5, 
     mu = Math.random() - 0.5; 
    var offset = e1.multiplyScalar(lambda).add(e2.multiplyScalar(mu)); 
    offset.normalize(); 
    offset.multiplyScalar(radius) // multiply the compute offset by the radius you'd like it to circle around 

    return offset; 

} 

, 원하는 지점 생성 :

function pointOnHotDog(p, q, radius) { 
    return pointOnPath(p, q).add(getVectorOffset(p, q, radius)); 
} 

여기에 이것에 대한 너무 많은 작업 jsfiddle