three.js, Объект не принимает позицию другого объекта

#javascript #threejs

Кольца Сатурна должны быть вокруг Сатурна (он окрашен в Юпитер), а они вокруг Солнца.
Позицию Сатурна они не воспринимают, в отличие от других объектов.

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/
    

Ответы

Ответ 1

С позицией "колец" все нормально. Не нормально - с их масштабом:

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 раз меньше
}