E
E
ERomulon2018-07-27 07:04:47
Animation
ERomulon, 2018-07-27 07:04:47

How to animate mesh opacity in three js + GSAP?

Actually a piece of code, I create in a cycle a large number of white minispheres with opacity: 1.0. How can I work with opacity and their other properties through gsap? At the bottom of the code there is a twin for a simple group rotation, it works. But with plane objects, no.

let R = 605;
let planes = [];
points.forEach(p => {
THREE.P
  let pos = calcPosFromLatLonRad(p.lat,p.long,R);
  let geometry = new THREE.SphereGeometry(2.5, 12.25,12.25 );
  let material = new THREE.MeshBasicMaterial( {
    color: 0xffffff,
    side: THREE.DoubleSide,
    opacity: 0.1

    // wireframe: true
  } );
  let material1 = new THREE.RawShaderMaterial( {
    uniforms: {
      time: {value: 0},
      hover: {value: 0}
    },
    transparent: true,
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent
  } );
  let plane = new THREE.Mesh(geometry,material);

  plane.position.x = pos[0];
  plane.position.y = pos[1];
  plane.position.z = pos[2];
  group.add(plane);
  planes.push(plane);
})
TweenMax.to(group.rotation,8,{x:Math.PI*2,ease:Power2.easeInOut,delay:5.01,repeat:-1});

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question