javascript - 土星环 - 初始条件

Question

我正在研究土星系统的模拟，例如，它允许用户将其最大的卫星土卫六的质量增加到地球的质量，并查看其他卫星和土星环如何因此受到扰动。我对环的表示是一个粗略的粒子系统，其中每个粒子都以一组 x、y、z 位置和速度向量开始。如果我将 z 位置和速度矢量设置为 0，我会得到一个围绕土星旋转的相当漂亮的环，但问题是土星有一个 27 度的轴向倾斜(它的旋转轴与其轨道平面的倾 Angular ) ，因此您必须考虑 z 位置和速度矢量，以使模拟至少在一定程度上是真实的，但经过大量的提示和提示之后，我无法正确设置环的倾斜度。

这是为构成环的粒子创建初始条件的方法:

init() {

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

    const rad = Math.PI * 2 * Math.random();
    const dist = (25 + 20 * Math.random()) / 32000;

    this.particles.push({
      x: Math.cos(rad) * dist,
      y: Math.sin(rad) * dist,
      z: 0,
      vx: (Math.cos(rad + Math.PI / 2 + (Math.PI / 180 * 6 - Math.PI / 180 * 12) * 0) * Math.sqrt(500 / dist)) / 120,
      vy: (Math.sin(rad + Math.PI / 2 + (Math.PI / 180 * 6 - Math.PI / 180 * 12) * 0) * Math.sqrt(500 / dist)) / 120,
      vz: 0
    });

  }

}

有没有人可以帮我弄清楚如何根据上面的代码获得正确的 z 位置和速度矢量？如上所述，轴向倾斜应为 27 度。

Answer 1

只是关于如何做到这一点的概念:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 20);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setClearColor(0x101010);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var sun = new THREE.Mesh(new THREE.SphereGeometry(2, 16, 8), new THREE.MeshBasicMaterial({
  color: "orange"
}));
scene.add(sun);

var orbitGeom = new THREE.CircleGeometry(10, 32);
orbitGeom.rotateX(-Math.PI * 0.5);
orbitGeom.vertices.shift();
var orbit = new THREE.LineLoop(orbitGeom, new THREE.LineBasicMaterial({
  color: "yellow"
}));
scene.add(orbit);

var saturnSys = new THREE.Group();
var saturnSysAxis = new THREE.Vector3(0, 1, 0);
saturnSys.rotation.z = THREE.Math.degToRad(27);
saturnSys.add(new THREE.AxesHelper(5));
var saturnPlanet = new THREE.Mesh(new THREE.SphereGeometry(1, 8, 6), new THREE.MeshBasicMaterial({
  color: 0xFACE8D,
  wireframe: true
}));
saturnSys.add(saturnPlanet);

var saturnRingGeom = new THREE.Geometry();
var vertices = [];
for (let i = 0; i < 2000; i++) {
  let r = THREE.Math.randFloat(1.5, 4);
  let angle = THREE.Math.randFloat(0, Math.PI * 2);
  let v = new THREE.Vector3(
    Math.cos(angle) * r,
    0,
    Math.sin(angle) * r
  );
  v.angularVelocity = THREE.Math.randFloat(0.1, Math.PI);
  vertices.push(v);
}

saturnRingGeom.vertices = vertices;

var saturnRing = new THREE.Points(saturnRingGeom, new THREE.PointsMaterial({
  size: 0.1,
  color: "red"
}));
saturnSys.add(saturnRing);

scene.add(saturnSys);

var clock = new THREE.Clock();
var time = 0;
var delta = 0;

render();

function render() {
  requestAnimationFrame(render);
  delta = clock.getDelta();
  time += delta * 0.1;
  saturnSys.position.set(
    Math.cos(time) * 10,
    0,
    Math.sin(time) * 10
  );
  saturnPlanet.rotation.y = time * 3;
  saturnRing.geometry.vertices.forEach(v => {
    v.applyAxisAngle(saturnSysAxis, v.angularVelocity * delta);
  });
  saturnRing.geometry.verticesNeedUpdate = true;
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>