Кольца Сатурна должны быть вокруг Сатурна (он окрашен в Юпитер), а они вокруг Солнца. Позицию Сатурна они не воспринимают, в отличие от других объектов.
ring.position.x = saturn.position.x;
ring.position.z = saturn.position.z;
Возможно, это устаревшее значение для частиц, нового аналога в документации на нахожу.
var camera, scene, renderer;
var sun_geom, sun_mat, sun;
var mercury_geom, mercury_mat, mercury;
var venus_geom, venus_mat, venus;
var earth_geom, earth_mat, earth;
var mars_geom, mars_mat, mars;
var jupiter_geom, jupiter_mat, jupiter;
var saturn_geom, saturn_mat, saturn;
var ring_sarurn_geom, ring_saturn_mat, ring; //кольца
var uranus_geom, uranus_mat, uranus;
var neptune_geom, neptune_mat, neptune;
var t = 0;
var offset_y = 0;
var texture;
var r = 0.019;
var light;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.01, 10000 );
camera.position.z = 1;
camera.rotation.z = -Math.PI/20;
scene = new THREE.Scene();
light = new THREE.PointLight(0xffffff, 1.4, 7000);
light.position.set(100, 0, 0);
light.castShadow = true;
light.shadowMapWidth = 204;
light.shadowMapHeight = 204;
scene.add(light);
sun_geom = new THREE.SphereGeometry(0.12, 40, 40);
texture = new THREE.TextureLoader().load( 'https://upload.wikimedia.org/wikipedia/commons/9/99/Map_of_the_full_sun.jpg' );
sun_mat = new THREE.MeshBasicMaterial({map: texture});
sun = new THREE.Mesh(sun_geom, sun_mat);
scene.add(sun);
mercury_geom = new THREE.SphereGeometry(0.3829 *r, 10, 10);
texture5 = new THREE.TextureLoader().load( 'img/mercury.jpg' )
mercury_mat = new THREE.MeshBasicMaterial({map: texture5});
mercury = new THREE.Mesh(mercury_geom, mercury_mat);
scene.add(mercury);
venus_geom = new THREE.SphereGeometry(0.95*r, 10, 10);
texture4 = new THREE.TextureLoader().load( 'img/venus.jpg' )
venus_mat = new THREE.MeshBasicMaterial({map: texture4});
venus = new THREE.Mesh(venus_geom, venus_mat);
scene.add(venus);
earth_geom = new THREE.SphereGeometry(r, 10, 10);
texture2 = new THREE.TextureLoader().load( 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Whole_world_-_land_and_oceans_12000.jpg/500px-Whole_world_-_land_and_oceans_12000.jpg' );
earth_mat = new THREE.MeshBasicMaterial({map: texture2});
earth = new THREE.Mesh(earth_geom, earth_mat);
scene.add(earth);
mars_geom = new THREE.SphereGeometry(0.532*r, 10, 10);
texture3 = new THREE.TextureLoader().load( '' );
mars_mat = new THREE.MeshBasicMaterial({map: texture3});
mars = new THREE.Mesh(mars_geom, mars_mat);
scene.add(mars);
jupiter_geom = new THREE.SphereGeometry(2*r, 30, 30);
texture6 = new THREE.TextureLoader().load( 'https://vignette.wikia.nocookie.net/space-engine/images/a/a8/Jupiter_Oberfl%C3%A4che.jpg/revision/latest/scale-to-width-down/640?cb=20151220023337&path-prefix=de' )
jupiter_mat = new THREE.MeshBasicMaterial({map: texture6});
jupiter = new THREE.Mesh(jupiter_geom, jupiter_mat);
jupiter.castShadow = true;
scene.add(jupiter);
saturn_geom = new THREE.SphereGeometry(2*r, 30, 30);
texture7 = new THREE.TextureLoader().load( 'https://vignette.wikia.nocookie.net/space-engine/images/a/a8/Jupiter_Oberfl%C3%A4che.jpg/revision/latest/scale-to-width-down/640?cb=20151220023337&path-prefix=de' )
saturn_mat = new THREE.MeshBasicMaterial({map: texture7});
saturn = new THREE.Mesh(saturn_geom, saturn_mat);
scene.add(saturn);
ring_sarurn_geom = new THREE.Geometry();
ring_sarurn_mat = new THREE.PointsMaterial({ color: 0x3A3A3A, opacity: 0.3, size:1, sizeAttenuation: false });
for ( var i = 0; i < 20000; i ++ ){
var vertex = new THREE.Vector3();
vertex.x = Math.sin( Math.PI/180*i )*(5*r-i/2);
vertex.y = THREE.Math.randFloatSpread(10)*10;
vertex.z = Math.cos( Math.PI/180*i )*(4*r-i/2);
ring_sarurn_geom.vertices.push(vertex);
}
ring = new THREE.Points(ring_sarurn_geom, ring_sarurn_mat);
ring.castShadow = true;
scene.add(ring);
uranus_geom = new THREE.SphereGeometry(1.1*r, 30, 30);
texture8 = new THREE.TextureLoader().load( 'https://vignette.wikia.nocookie.net/space-engine/images/a/a8/Jupiter_Oberfl%C3%A4che.jpg/revision/latest/scale-to-width-down/640?cb=20151220023337&path-prefix=de' )
uranus_mat = new THREE.MeshBasicMaterial({map: texture8});
uranus = new THREE.Mesh(uranus_geom, uranus_mat);
scene.add(uranus);
neptune_geom = new THREE.SphereGeometry(1.1*r, 30, 30);
texture9 = new THREE.TextureLoader().load( 'https://vignette.wikia.nocookie.net/space-engine/images/a/a8/Jupiter_Oberfl%C3%A4che.jpg/revision/latest/scale-to-width-down/640?cb=20151220023337&path-prefix=de' )
neptune_mat = new THREE.MeshBasicMaterial({map: texture9});
neptune = new THREE.Mesh(neptune_geom, neptune_mat);
neptune.castShadow = true;
scene.add(neptune);
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
sun.rotation.y+=0.01;
mercury.rotation.y+=0.01;
venus.rotation.y+=0.01;
earth.rotation.y+=0.01;
mars.rotation.y+=0.01;
jupiter.rotation.y+=0.01;
saturn.rotation.y+=0.01;
uranus.rotation.y+=0.01;
neptune.rotation.y+=0.01;
/* mercury.position.x = Math.sin(t*0.35)*0.14;
mercury.position.z = Math.cos(t*0.35)*0.14;
venus.position.x = Math.sin(t*0.3)*0.18;
venus.position.z = Math.cos(t*0.3)*0.18;*/
earth.position.x = Math.sin(t*0.25)*0.25;
earth.position.z = Math.cos(t*0.25)*0.25;
/* mars.position.x = Math.sin(t*0.2)*0.3;
mars.position.z = Math.cos(t*0.2)*0.3; */
/*jupiter.position.x = Math.sin(t*0.1)*0.4;
jupiter.position.z = Math.cos(t*0.1)*0.4;*/
saturn.position.x = Math.sin(t*0.05)*0.45;
saturn.position.z = Math.cos(t*0.05)*0.45;
ring.position.x = saturn.position.x;
ring.position.z = saturn.position.z;
/*uranus.position.x = Math.sin(t*0.04)*0.5;
uranus.position.z = Math.cos(t*0.04)*0.5;*/
/*neptune.position.x = Math.sin(t*0.03)*0.55;
neptune.position.z = Math.cos(t*0.03)*0.55;*/
t+=Math.PI/180*2;
renderer.render( scene, camera );
}
https://jsfiddle.net/Nata_Hamster/9pdL97jm/
Ответ
С позицией "колец" все нормально. Не нормально - с их масштабом:
for (var i = 0; i < 20000; i++) {
var vertex = new THREE.Vector3();
vertex.x = Math.sin(Math.PI / 180 * i) * (0.5 * r - i / 2);
vertex.y = THREE.Math.randFloatSpread(1000);
vertex.z = Math.cos(Math.PI / 180 * i) * (0.4 * r - i / 2);
ring_sarurn_geom.vertices.push(vertex.multiplyScalar(0.00001)); // в 100 000 раз меньше
}