Three.JS - 球を形成するランダムな方向の点を周回する粒子

Question

私はすべての粒子が同じ座標に、そして次々とランダムな方向に配置されている粒子システムを持っています。球体を形成する場面。

私が今までに達成したのは、現在の角度に基づいてサインとコサインを計算するだけで、Z軸に沿って中心を周回する一連のVector3オブジェクト（パーティクル）のグループです。

私は数学ではあまりよくありません。私は正確に何を探すべきか分からないのです。ここで

は、私が書いたものです：あなたが生きて、それを見たい場合は

var scene = new THREE.Scene(); 

let container = document.getElementById('container'), 
    loader = new THREE.TextureLoader(), 
    renderer, 
    camera, 
    maxParticles = 5000, 
    particlesDelay = 50, 
    radius = 50, 
    sphereGeometry, 
    sphere; 

loader.crossOrigin = true; 

function init() { 

    let vw = window.innerWidth, 
     vh = window.innerHeight; 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(vw, vh); 
    renderer.setPixelRatio(window.devicePixelRatio); 

    camera = new THREE.PerspectiveCamera(45, vw/vh, 1, 1000); 
    camera.position.z = 200; 
    camera.position.x = 30; 
    camera.position.y = 30; 
    camera.lookAt(scene.position); 
    scene.add(camera); 

    let controls = new THREE.OrbitControls(camera, renderer.domElement); 

    let axisHelper = new THREE.AxisHelper(50); 
    scene.add(axisHelper); 

    container.appendChild(renderer.domElement); 

    window.addEventListener('resize', onResize, false); 

} 

function onResize() { 

    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 

    renderer.setSize(window.innerWidth, window.innerHeight);  

} 

function draw() { 

    sphereGeometry = new THREE.Geometry(); 
    sphereGeometry.dynamic = true; 

    let particleTexture = loader.load('https://threejs.org/examples/textures/particle2.png'), 
     material = new THREE.PointsMaterial({ 
      color: 0xffffff, 
      size: 3, 
      transparent: true, 
      blending: THREE.AdditiveBlending, 
      map: particleTexture, 
      depthWrite: false 
     }); 

     for (let i = 0; i < maxParticles; i++) { 

      let vertex = new THREE.Vector3(radius, 0, 0); 
      vertex.delay = Date.now() + (particlesDelay * i); 
      vertex.angle = 0; 
      sphereGeometry.vertices.push(vertex); 

     } 

     sphere = new THREE.Points(sphereGeometry, material); 
     scene.add(sphere); 

} 

function update() { 

    for (let i = 0; i < maxParticles; i++) { 

     let particle = sphereGeometry.vertices[i]; 

     if (Date.now() > particle.delay) { 

      let angle = particle.angle += 0.01; 

      particle.x = radius * Math.cos(angle); 

      if (i % 2 === 0) { 
       particle.y = radius * Math.sin(angle); 
      } else { 
       particle.y = -radius * Math.sin(angle); 
      } 

     } 


    } 

    sphere.geometry.verticesNeedUpdate = true; 

} 

function render() { 

    update(); 
    renderer.render(scene, camera); 
    requestAnimationFrame(render); 

} 

init(); 
draw(); 
render(); 

そして、ここではJSFiddleです： https://jsfiddle.net/kekkorider/qs6s0wv2/

EDIT：Working example

誰かが私に手をお願いできます？

ありがとうございます！

Answer 1

各パーティクルを特定のランダムな軸を中心に回転させます。 3D空間でparametric equation of a circleに従うか、THREE.js回転行列を使用することができます。

今、すべてのパーティクルがベクトル（0、0、1）の周りを回転しています。パーティクルはx軸から始まるので、すべてのパーティクルがy-z平面（0、y、z）のランダムなベクトルを中心に回転するようにします。これは、頂点の作成時に定義することができます。

vertex.rotationAxis = new THREE.Vector3(0, Math.random() * 2 - 1, Math.random() * 2 - 1); 
vertex.rotationAxis.normalize(); 

今、あなたはちょうどあなたがそれぞれの更新を作成した軸のランダムな回転を使用して粒子のそれぞれのTHREE.Vector3.applyAxisAngle(axis, angle)メソッドを呼び出すことができます合計に

particle.applyAxisAngle(particle.rotationAxis, 0.01); 

をアップ、これは、それがどのように見えるべきかである。）（

ドロー：

... 
for (let i = 0; i < maxParticles; i++) { 

    let vertex = new THREE.Vector3(radius, 0, 0); 
    vertex.delay = Date.now() + (particlesDelay * i); 
    vertex.rotationAxis = new THREE.Vector3(0, Math.random() * 2 - 1, Math.random() * 2 - 1); 
    vertex.rotationAxis.normalize(); 
    sphereGeometry.vertices.push(vertex); 
} 
... 

更新（）：

... 
for (let i = 0; i < maxParticles; i++) { 

    let particle = sphereGeometry.vertices[i]; 

    if (Date.now() > particle.delay) { 
     particle.applyAxisAngle(particle.rotationAxis, 0.01); 
    } 
} 
...