Torus, Sphere Opacity

Questions
1

Hi All,

I’m using TweenMax and Three JS to create a solar system of planets rotating in space. I’m using TweenMax to fade In the planets along with the Torus, but the issue that I’m having is the Torus, is not fading in along with the planet, is there any reason for that, please let me know. I’ve pasted in my set of code in order to get a better understanding of the issue.

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer({antialias:true});
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );


  var solarsystem = new THREE.Group();
  var geometry = new THREE.SphereGeometry( 5, 32, 32 );

  var tgeometry = new THREE.TorusBufferGeometry( 10, 0.3, 16, 100 );
  var tmaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, transparent: true } );
  var torus1 = new THREE.Mesh( tgeometry, tmaterial );


  var planet1 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x48a091, transparent: true }) );// turqoise planet

  planet1.add(torus1)
  planet1.position.z = 150;

  var torus2 = new THREE.Mesh( tgeometry, tmaterial );

  var planet2 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x6cbe45, transparent: true }) );// green planet
  planet2.add(torus2);
  planet2.position.x = -180;

  var torus3 = new THREE.Mesh( tgeometry, tmaterial );
  var planet3 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xe00071, transparent: true }) );// hot pink planet
  planet3.position.x = 180;
  planet3.add(torus3);


  var torus4 = new THREE.Mesh( tgeometry, tmaterial );
  var planet4 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xfb831f, transparent: true } ));// orange planet
  planet4.add(torus4);
  planet4.position.x = 75;
  planet4.position.z = -150;

  var torus5 = new THREE.Mesh( tgeometry, tmaterial );
  var planet5 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xe8e116, transparent: true } ));// yellow planet
  planet5.add(torus5);
  planet5.position.x = -120;
  planet5.position.z = -150;

  solarsystem.add( planet1 );
  solarsystem.add( planet2 );
  solarsystem.add( planet3 );
  solarsystem.add( planet4 );
  solarsystem.add( planet5 );

  scene.add(solarsystem);

  solarsystem.rotation.x = 0.2;

  camera.position.z = 300;

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

  function onWindowResize() {
  		camera.aspect = window.innerWidth / window.innerHeight;
  		camera.updateProjectionMatrix();
  		renderer.setSize( window.innerWidth, window.innerHeight );
  }

  var tl = new TimelineMax();
  tl.from(planet1.material, 1, {opacity:0})
    .from(planet2.material, 1, {opacity:0}, 0.2)
    .from(planet3.material, 1, {opacity:0}, 0.5)
    .from(planet4.material, 1, {opacity:0}, 0.6);

  function animate() {
  	  requestAnimationFrame( animate );

      planet1.rotation.y += 0.01;
      planet2.rotation.y += 0.01;
      planet3.rotation.y += 0.01;
      planet4.rotation.y += 0.01;
      planet5.rotation.y += 0.01;
      solarsystem.rotation.y += 0.01;

    //console.log(solarsystem.rotation.y);
  	renderer.render( scene, camera );
  }
  animate();

Thanks

2

You just animate the opacity of the planet materials. This has no effect on child objects. You also have to animate the material of the torus objects.

3

I see is there a easier way instead of animating both, I dont want to have to target both materials for each object?.

4

Is it possible to share the material across your objects?

5

Hmm, not sure since I’m still learning ThreeJS.

6

Well, if it’s not possible then you have to animate all material properties.

7

Ok, thanks I’ll do that.