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/

편집 : Working example

누군가가 나에게 손을주지하시기 바랍니다 수를 ?

미리 감사드립니다.

Answer 1

각 입자가 임의의 임의의 축을 중심으로 회전하기를 원합니다. 3D 공간에서 parametric equation of a circle을 따르도록하거나 THREE.js 회전 행렬을 사용할 수 있습니다.

지금 모든 입자가 벡터 (0, 0, 1)을 회전합니다. 입자가 x 축에서부터 시작하기 때문에, 모든 입자가 y-z 평면 (0, y, z)에서 임의의 벡터를 중심으로 회전하기를 원합니다.

particle.applyAxisAngle(particle.rotationAxis, 0.01); 

하는 요약하자면 : 당신이 각 업데이트를 창조 축 지금은 그냥 무작위로 회전하여 각 입자에 THREE.Vector3.applyAxisAngle(axis, angle) 메소드를 호출 할 수

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

: 이것은 정점의 작성 중에 정의 할 수 있습니다 최대,이는 같이하는 방법입니다 :) (

무승부 :

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

01 23,516,

업데이트는() :

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

    let particle = sphereGeometry.vertices[i]; 

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